WordPress WooCommerce产品页特色图片不显示问题求助

AI 小北

2026-8-23

解决方案

一、修复jQuery代码报错问题

WordPress加载的jQuery默认是无冲突模式，不能直接用$，换两种写法就能解决报错：

方式1：把`$`替换成`jQuery`

function fix_product_gallery_opacity() {
    ?>
    <script>
        jQuery(document).ready(function() {
            jQuery('.woocommerce-product-gallery--with-images').css('opacity', 1);
        });
    </script>
    <?php
}
add_action('wp_footer', 'fix_product_gallery_opacity');

方式2：用自执行函数保留`$`

function fix_product_gallery_opacity() {
    ?>
    <script>
        (function($) {
            $(document).ready(function() {
                $('.woocommerce-product-gallery--with-images').css('opacity', 1);
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'fix_product_gallery_opacity');

把上面任意一段代码贴到主题的functions.php里，别直接写裸脚本，通过wp_footer钩子加载才规范。

二、调整CSS选择器（解决特色图片显示问题）

你之前用的.product.has-default-attributes.has-children > .images选择器不对，你的主题没这些类。直接用通用规则试试，把代码加到「外观→自定义→额外CSS」里：

/* 强制显示产品图片容器 */
.woocommerce div.product div.images {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}
/* 确保特色图片作为首张显示 */
.woocommerce-product-gallery__image:first-child {
    display: block !important;
}