WooGallery Pro WooCommerce 商品图库插件[更至v3.4.0]

下载链接

通过网盘分享的知识：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  = '';
        $html .= '';
        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 .= 'No featured product image';
        }
        $html .= '';

        if ( count( $image_ids ) > 1 ) {
            $html .= '';
            foreach ( array_slice( $image_ids, 0, 5 ) as $image_id ) {
                $html .= '';
                $html .= wp_get_attachment_image( $image_id, 'woocommerce_thumbnail', false, array( 'loading' => 'lazy' ) );
                $html .= '';
            }
            $html .= '';
        }
        $html .= 'Editor-only static preview. Published product pages retain the regular gallery.';
        $html .= '';
        $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';
        ?>
        
        php
    }
    add_action( 'wp_head', 'epg_safe_editor_styles', 999 );
}

注意事项

该方案属于编辑器兼容性绕过方法，并非修改图库插件的内部源码。