WooCommerce产品滑块显示控制求助：默认显2张，勾选复选框显3张

需求：产品图库滑块默认仅显示2张图片，其余隐藏；勾选自定义结账复选框后，滑块显示3张图片。

步骤1：默认隐藏多余图片（CSS） #

添加以下CSS代码到主题自定义CSS区域或style.css文件：

/* 默认隐藏第3张及以后的产品图库图片 */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:nth-child(n+3) {
    display: none;
}

步骤2：监听复选框状态，动态调整显示数量（JS） #

添加以下JavaScript代码到主题自定义JS区域或单独JS文件：

document.addEventListener('DOMContentLoaded', function() {
    const checkbox = document.querySelector('#custom_label_printing_checkbox');
    const galleryImages = document.querySelectorAll('.woocommerce-product-gallery__image');

    // 初始化：只显示前2张图片
    galleryImages.forEach((img, idx) => {
        img.style.display = idx < 2 ? 'block' : 'none';
    });

    // 监听复选框切换事件
    if (checkbox) {
        checkbox.addEventListener('change', function() {
            galleryImages.forEach((img, idx) => {
                // 勾选时显示前3张，取消时恢复前2张
                img.style.display = this.checked ? (idx < 3 ? 'block' : 'none') : (idx < 2 ? 'block' : 'none');
            });

            // 适配WooCommerce默认Flexslider滑块，刷新滑块状态
            if (typeof jQuery !== 'undefined' && jQuery('.woocommerce-product-gallery').length) {
                jQuery('.woocommerce-product-gallery').flexslider('refresh');
            }
        });
    }
});

步骤3：确保自定义复选框正确挂载 #

将你的PHP代码通过WooCommerce钩子挂载到对应页面，示例如下（以产品页为例）：

// 将自定义复选框挂载到产品页加入购物车按钮前
add_action('woocommerce_before_add_to_cart_button', 'custom_label_printing');

// 自定义复选框代码（已翻译中文）
function custom_label_printing() {
        global $product;

        woocommerce_form_field( 'custom_label_printing_checkbox', array( 
            'type' => 'checkbox', 
            'class' => array('custom-label-checkbox'), 
            'label' => __('需要定制标签？'), 
            'required' => false,
        ), '' ); 

        ?>
        <div class="form-row custom-label">
            <div class="personalize-label">
                <label for="field-personalize-label1" class="form-label">定制内容:</label>
                <div class="form-controls">
                    <input type="text" class="field custom-label-printing-field form-row-wide" name="custom_label_printing" id="field-personalize-label" value="" placeholder="在此输入定制内容..." maxlength="23">
                </div><!-- /.form-controls -->
                <span class="input-count" data-maxlength="23">23</span>
                <input type="hidden" name="product-title" title="<?php echo get_the_title(); ?>" id="product-title">
            </div>
        </div> 
    <?php }

注意事项 #

• 若使用第三方滑块插件（如Swiper），需替换JS中滑块刷新逻辑，调用插件对应的更新/重初始化方法，并调整slidesPerView参数。
• 若复选框在结账页面，需将挂载钩子改为woocommerce_checkout_before_order_review等结账页钩子，并确保JS能正确关联到对应产品的图库元素。

内容的提问来源于stack exchange，提问作者my dev