下载链接
通过网盘分享的知识：WooGallery Pro WooCommerce
链接: https://pan.baidu.com/s/5AzqjrSurocUpl_6R_QBz_Q
核心定位
WooGallery Pro 是一款面向 WooCommerce 商城的图片与视频画廊增强插件，专注于提升商品详情页的视觉展示效果。该插件可将默认的商品图册升级为轮播布局，并支持变体图片、视频、放大镜和灯箱等交互功能。
主要功能
- 轮播布局与缩略图位置：提供多种滑块样式，支持灵活调整缩略图摆放位置
- 变体图片管理：每个商品可选添加多组额外图片，对应不同规格属性
- 商品视频支持：在画廊中直接嵌入产品演示视频
- 图片放大与灯箱：支持悬停放大和点击灯箱全屏浏览
- 响应式控制：可自定义画廊宽度、导航方式、元素间距和排序逻辑
适用场景
适合拥有多规格商品（如服装、鞋靴、电子产品）的 WooCommerce 独立站，以及希望通过细节展示提升转化率的电商卖家。视频功能对解释复杂产品或展示使用场景尤为有用。
此版本在使用Elementor编辑单个产品详情会有无限往下拖动异常，修复步骤如下
问题描述
使用可视化编辑器修改单个商品时，可能遇到图片不断放大、页面高度异常增加、编辑区域无限延伸等问题。
有时商品详情模板预览正常，正式产品页面也没有问题，只有进入单个商品的编辑页面才会发生异常。
问题分析
这种情况可能与第三方商品图库插件的轮播初始化、图片尺寸计算、延迟加载，以及编辑器预览环境的兼容性有关。
单纯通过 CSS 限制图片宽度，不一定能解决问题，因为异常可能来自图库脚本反复计算布局。
解决方案
采用编辑器专用静态图库预览方案：
-
编辑单个商品时，显示静态主图与缩略图，避免运行完整的交互式图库。
-
编辑商品详情模板时，保留原来的图库预览。
-
正式产品页面继续使用原图库插件，保留轮播、缩放、缩略图等功能。
安装方法
将完整 PHP 代码保存为 elementor-product-gallery-editor-fix.php，上传到当前 WordPress 子主题根目录。
然后在子主题的 functions.php 中添加一次：
require_once get_stylesheet_directory() . '/elementor-product-gallery-editor-fix.php';重新打开单个商品的编辑页面，检查图库显示是否正常。
elementor-product-gallery-editor-fix.php文件代码如下
<?php
/**
* Single-product editor: static product-gallery preview (generic implementation).
*
* Purpose: When editing an individual product in the visual editor,
* replace WooGallery's animated gallery with a lightweight static preview.
* The published product page and the Elementor SINGLE PRODUCT TEMPLATE editor
* retain the original gallery and are not changed by this file.
*
* Child-theme installation (replace the old file with the same name):
* require_once get_stylesheet_directory() . '/elementor-product-gallery-editor-fix.php';
*
* Safe removal: remove the require_once line and delete this PHP file.
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'epg_safe_editor_product_id' ) ) {
function epg_safe_editor_product_id() {
static $result = null;
if ( null !== $result ) {
return $result;
}
$result = 0;
// Elementor's visual editor canvas is a front-end iframe. The editor
// shell in wp-admin and all ordinary storefront views are excluded.
if ( is_admin() || ! isset( $_GET['elementor-preview'] ) || is_array( $_GET['elementor-preview'] ) ) {
return 0;
}
$raw = (string) wp_unslash( $_GET['elementor-preview'] );
if ( ! preg_match( '/^[0-9]+$/D', $raw ) ) {
return 0;
}
$id = absint( $raw );
if ( ! $id || 'product' !== get_post_type( $id ) || ! current_user_can( 'edit_post', $id ) ) {
return 0;
}
$result = $id;
return $result;
}
}
if ( ! function_exists( 'epg_safe_editor_gallery_markup' ) ) {
function epg_safe_editor_gallery_markup() {
static $markup = null;
if ( null !== $markup ) {
return $markup;
}
$product_id = epg_safe_editor_product_id();
if ( ! $product_id ) {
return '';
}
$image_ids = array();
$featured_id = (int) get_post_thumbnail_id( $product_id );
if ( $featured_id ) {
$image_ids[] = $featured_id;
}
if ( function_exists( 'wc_get_product' ) ) {
$product = wc_get_product( $product_id );
if ( $product && method_exists( $product, 'get_gallery_image_ids' ) ) {
foreach ( (array) $product->get_gallery_image_ids() as $image_id ) {
$image_id = absint( $image_id );
if ( $image_id && ! in_array( $image_id, $image_ids, true ) ) {
$image_ids[] = $image_id;
}
}
}
}
$html = '<div class="epg-editor-static" data-epg-safe-preview="1">';
$html .= '<div class="epg-editor-static__image">';
if ( ! empty( $image_ids ) ) {
$html .= wp_get_attachment_image(
$image_ids[0],
'woocommerce_single',
false,
array(
'class' => 'epg-editor-static__main-img',
'loading' => 'eager',
'decoding' => 'async',
)
);
} else {
$html .= '<div class="epg-editor-static__no-image">No featured product image</div>';
}
$html .= '</div>';
if ( count( $image_ids ) > 1 ) {
$html .= '<div class="epg-editor-static__thumbs">';
foreach ( array_slice( $image_ids, 0, 5 ) as $image_id ) {
$html .= '<span class="epg-editor-static__thumb">';
$html .= wp_get_attachment_image( $image_id, 'woocommerce_thumbnail', false, array( 'loading' => 'lazy' ) );
$html .= '</span>';
}
$html .= '</div>';
}
$html .= '<div class="epg-editor-static__note">Editor-only static preview. Published product pages retain the regular gallery.</div>';
$html .= '</div>';
$markup = $html;
return $html;
}
}
// Prevent shortcodes from starting the WooGallery carousel in the product
// editor canvas. This is earlier than the gallery plugin's shortcode callback.
if ( ! function_exists( 'epg_safe_editor_pre_shortcode' ) ) {
function epg_safe_editor_pre_shortcode( $return, $tag, $atts, $match ) {
if ( false !== $return || ! epg_safe_editor_product_id() ) {
return $return;
}
$gallery_shortcodes = array(
'woogallery',
'woogalleryslider',
'wcgs_gallery_slider',
'reno_product_gallery',
);
if ( in_array( $tag, $gallery_shortcodes, true ) ) {
return epg_safe_editor_gallery_markup();
}
return $return;
}
add_filter( 'pre_do_shortcode_tag', 'epg_safe_editor_pre_shortcode', 5, 4 );
}
// Also cover Elementor widgets whose rendered HTML was automatically replaced
// by WooGallery instead of directly using [woogallery].
if ( ! function_exists( 'epg_safe_editor_widget_content' ) ) {
function epg_safe_editor_widget_content( $content, $widget ) {
if ( ! epg_safe_editor_product_id() || ! is_string( $content ) ) {
return $content;
}
if ( false !== strpos( $content, 'data-epg-safe-preview' ) ) {
return $content;
}
if (
false !== strpos( $content, 'wpgs-gallery' ) ||
false !== strpos( $content, 'wcgs-woocommerce-product-gallery' )
) {
return epg_safe_editor_gallery_markup();
}
return $content;
}
add_filter( 'elementor/widget/render_content', 'epg_safe_editor_widget_content', 50, 2 );
}
if ( ! function_exists( 'epg_safe_editor_body_class' ) ) {
function epg_safe_editor_body_class( $classes ) {
if ( epg_safe_editor_product_id() ) {
$classes[] = 'epg-editor-safe-mode';
}
return $classes;
}
add_filter( 'body_class', 'epg_safe_editor_body_class', 20 );
}
if ( ! function_exists( 'epg_safe_editor_styles' ) ) {
function epg_safe_editor_styles() {
$product_id = epg_safe_editor_product_id();
if ( ! $product_id ) {
return;
}
$featured_id = (int) get_post_thumbnail_id( $product_id );
$featured_url = $featured_id ? wp_get_attachment_image_url( $featured_id, 'large' ) : '';
$bg = $featured_url ? 'url(' . wp_json_encode( $featured_url, JSON_UNESCAPED_SLASHES | JSON_HEX_TAG ) . ')' : 'none';
?>
<style id="epg-editor-safe-mode">
/* Scoped to Elementor's authenticated single-product editing iframe. */
body.epg-editor-safe-mode .epg-editor-static {
display:block!important;width:100%!important;max-width:100%!important;
min-width:0!important;height:auto!important;margin:0!important;
padding:14px!important;border:1px solid #dce5ef!important;
border-radius:6px!important;overflow:hidden!important;
box-sizing:border-box!important;background:#fff!important;
color:#263445!important;font-family:Arial,sans-serif!important;
}
body.epg-editor-safe-mode .epg-editor-static *,
body.epg-editor-safe-mode .epg-editor-static *::before,
body.epg-editor-safe-mode .epg-editor-static *::after {box-sizing:border-box!important;}
body.epg-editor-safe-mode .epg-editor-static__image {
display:flex!important;align-items:center!important;justify-content:center!important;
width:100%!important;height:clamp(220px,32vw,430px)!important;
max-height:430px!important;min-height:220px!important;overflow:hidden!important;
background:#f9fbfd!important;
}
body.epg-editor-safe-mode .epg-editor-static__main-img {
display:block!important;position:static!important;width:auto!important;height:auto!important;
max-width:100%!important;max-height:100%!important;min-width:0!important;
min-height:0!important;object-fit:contain!important;transform:none!important;
}
body.epg-editor-safe-mode .epg-editor-static__thumbs {
display:flex!important;gap:8px!important;width:100%!important;max-width:100%!important;
overflow:hidden!important;margin-top:10px!important;
}
body.epg-editor-safe-mode .epg-editor-static__thumb {
flex:0 0 54px!important;display:block!important;width:54px!important;height:54px!important;
border:1px solid #e1e5ea!important;border-radius:4px!important;
overflow:hidden!important;background:#fff!important;
}
body.epg-editor-safe-mode .epg-editor-static__thumb img {
display:block!important;width:100%!important;height:100%!important;
max-width:100%!important;max-height:100%!important;object-fit:contain!important;
}
body.epg-editor-safe-mode .epg-editor-static__note {
display:block!important;margin-top:10px!important;font-size:11px!important;
line-height:1.5!important;text-align:center!important;color:#67788b!important;
}
body.epg-editor-safe-mode .epg-editor-static__no-image {
font-size:13px!important;color:#67788b!important;text-align:center!important;
}
/* Fallback for galleries injected by WooCommerce hooks, outside shortcodes/widgets.
Strong size containment prevents galleries from stretching the Elementor canvas. */
body.epg-editor-safe-mode #wpgs-gallery,
body.epg-editor-safe-mode .wcgs-woocommerce-product-gallery {
position:relative!important;display:block!important;
box-sizing:border-box!important;width:100%!important;max-width:100%!important;
min-width:0!important;height:420px!important;min-height:0!important;
max-height:420px!important;overflow:hidden!important;
contain:layout size paint!important;background:#f9fbfd!important;
border:1px solid #dce5ef!important;
}
body.epg-editor-safe-mode #wpgs-gallery > *,
body.epg-editor-safe-mode .wcgs-woocommerce-product-gallery > * {
display:none!important;
}
body.epg-editor-safe-mode #wpgs-gallery::before,
body.epg-editor-safe-mode .wcgs-woocommerce-product-gallery::before {
position:absolute!important;inset:12px 12px 34px!important;content:''!important;
display:block!important;z-index:1!important;background-image:<?php echo $bg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>!important;
background-position:center!important;background-repeat:no-repeat!important;
background-size:contain!important;
}
body.epg-editor-safe-mode #wpgs-gallery::after,
body.epg-editor-safe-mode .wcgs-woocommerce-product-gallery::after {
position:absolute!important;bottom:8px!important;left:8px!important;right:8px!important;
content:'Editor-only preview - published pages retain the regular gallery'!important;
display:block!important;z-index:2!important;font:11px/1.4 Arial,sans-serif!important;
text-align:center!important;color:#67788b!important;
}
body.epg-editor-safe-mode .elementor-widget-shortcode,
body.epg-editor-safe-mode .elementor-widget-woocommerce-product-images,
body.epg-editor-safe-mode .elementor-widget-container,
body.epg-editor-safe-mode .elementor-shortcode {
min-width:0!important;max-width:100%!important;
}
@media(max-width:767px){
body.epg-editor-safe-mode #wpgs-gallery,
body.epg-editor-safe-mode .wcgs-woocommerce-product-gallery {height:300px!important;max-height:300px!important;}
body.epg-editor-safe-mode .epg-editor-static__image {height:270px!important;min-height:0!important;}
}
</style>
<?php
}
add_action( 'wp_head', 'epg_safe_editor_styles', 999 );
}注意事项
该方案属于编辑器兼容性绕过方法，并非修改图库插件的内部源码。
使用前建议备份网站，并确认问题仅发生在编辑器中。如果正式前台也存在同样问题，需要进一步检查图库脚本和插件之间的冲突。