WooCommerce产品图库需求：固定主图并点击图库图触发Lightbox

Hey there! Totally get what you're asking for—keeping the main product image fixed while making thumbnails open directly into the lightbox is a super common tweak for WooCommerce stores. Let me walk you through a couple of reliable ways to make this happen.

方法1：自定义代码实现（推荐，无需额外插件） #

This is the most flexible approach, and it lets you avoid adding extra plugins to your site.

步骤1：禁用默认的主图切换行为 #

First, we'll stop WooCommerce's default behavior where clicking a thumbnail swaps the main image. Add this code to your theme's functions.php file, or use a custom code plugin like Code Snippets (safer for theme updates):

add_action('wp_footer', 'lock_main_product_image_and_fix_lightbox');
function lock_main_product_image_and_fix_lightbox() {
    if (is_product()) { // Only run this on single product pages
        ?>
        <script>
            jQuery(document).ready(function($) {
                // Remove the default click events that swap the main image
                $('.woocommerce-product-gallery__trigger').off('click');
                $('.flex-control-thumbs li').off('click');
                
                // Make thumbnails open directly into the lightbox
                $('.flex-control-thumbs a').on('click', function(e) {
                    e.preventDefault();
                    const imageUrl = $(this).attr('href');
                    // Trigger WooCommerce's built-in lightbox
                    $(document.body).trigger('woocommerce_open_lightbox', [imageUrl]);
                });
            });
        </script>
        <?php
    }
}

步骤2：优化视觉提示（可选CSS） #

To make it clear to users the main image won't swap, add this CSS to your theme's custom CSS panel (Appearance > Customize > Additional CSS):

/* Remove the "active" thumbnail highlight since we're not swapping images */
.woocommerce-product-gallery .flex-control-thumbs li.flex-active {
    opacity: 1 !important;
    border-color: transparent !important;
}
/* Keep hover effect for thumbnails to indicate they're clickable */
.woocommerce-product-gallery .flex-control-thumbs li:hover {
    opacity: 0.8;
}

方法2：使用插件（适合不想写代码的用户） #

If you'd rather avoid code, look for a WooCommerce gallery plugin that supports custom behavior. Options like WooCommerce Product Gallery Slider or WP Product Gallery Lite usually include settings to:

• Disable the main image swap functionality
• Set thumbnails to open directly into the lightbox
  Just install the plugin, navigate to its settings panel, and toggle those options on.

Quick Notes #

• If you edit your theme's functions.php, always use a child theme or backup first—this way your changes won't get wiped when the theme updates.
• If your theme has a custom product gallery structure, you might need to adjust the CSS/JS selectors (use your browser's dev tools to check the class names of your thumbnails).

内容的提问来源于stack exchange，提问作者Roman Selin