如何在WooCommerce单品页实现缩略图切换同步显示对应图片说明？

步骤1：替换原有静态说明代码 #

把你现有的函数替换成以下代码，它会完成：输出动态说明容器、预加载所有产品图片的说明数据、初始显示主图说明。

function add_dynamic_product_image_caption() {
    global $product;
    
    // 获取当前产品的所有图片ID（包含主图）
    $attachment_ids = $product->get_gallery_image_ids();
    array_unshift($attachment_ids, get_post_thumbnail_id());
    
    // 收集每张图片的说明文本
    $captions = [];
    foreach ($attachment_ids as $id) {
        $caption = get_post($id)->post_excerpt;
        $captions[$id] = $caption ? $caption : '';
    }
    
    // 输出说明容器，初始显示主图说明
    echo '<p style="text-align: center;" class="image-caption" id="dynamic-image-caption">' . get_post(get_post_thumbnail_id())->post_excerpt . '</p>';
    
    // 将说明数据传递给前端JS
    wp_add_inline_script('jquery', '
        const productImageCaptions = ' . json_encode($captions) . ';
    ');
}
add_action('woocommerce_product_thumbnails', 'add_dynamic_product_image_caption');

步骤2：添加动态切换的JS逻辑 #

新增以下函数，注入监听图片切换的脚本，实现说明同步更新：

function enqueue_image_caption_script() {
    if (is_product()) { // 仅在单品页面加载脚本
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function($) {
                // 监听缩略图点击事件（适配WooCommerce默认的图片组件）
                $(document).on("click", ".flex-control-thumbs li img, .woocommerce-product-gallery__trigger", function() {
                    // 获取当前激活图片的ID
                    var currentImgId = $(this).data("attachment_id") || $(".woocommerce-product-gallery__image.flex-active-slide img").data("attachment-id");
                    
                    // 更新说明文本
                    $("#dynamic-image-caption").text(productImageCaptions[currentImgId] || "");
                });
                
                // 适配键盘左右键切换图片的场景（可选增强）
                $(document).on("keydown", ".woocommerce-product-gallery", function(e) {
                    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
                        setTimeout(() => {
                            var currentImgId = $(".woocommerce-product-gallery__image.flex-active-slide img").data("attachment-id");
                            $("#dynamic-image-caption").text(productImageCaptions[currentImgId] || "");
                        }, 100);
                    }
                });
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_image_caption_script');

代码说明 #

• PHP部分：通过$product->get_gallery_image_ids()获取产品所有图册ID，合并主图ID后遍历收集每张图片的post_excerpt（即图片说明），将数据转为JSON传递给前端，同时输出初始的主图说明容器。
• JS部分：监听缩略图点击和键盘切换事件，获取当前激活图片的ID，从预加载的说明数组中取出对应文本更新到容器，适配WooCommerce默认的FlexSlider图片组件，无需额外插件。

内容的提问来源于stack exchange，提问作者kirtan ajudiya