WooCommerce结账页面JS样式无法持久及添加切换按钮需求

问题原因 #

WooCommerce结账页面在触发AJAX操作（比如更新购物车、切换配送方式）时，会重新渲染部分DOM元素。你原来的代码只在DOMContentLoaded时执行一次，新渲染的元素不会被加上隐藏样式，所以生效几秒后就失效了。

解决步骤 #

1. 重构JS逻辑，监听WooCommerce更新事件 #

把隐藏元素的逻辑封装成独立函数，同时监听页面初始加载和WooCommerce专属的updated_checkout事件，确保每次页面更新后都重新执行隐藏操作。另外用CSS类控制隐藏，比直接修改行内样式更稳定，也方便后续切换。

2. 添加切换按钮 #

在结账页面合适位置插入切换按钮，绑定点击事件来切换目标元素的显示/隐藏状态，同时要保证AJAX更新后按钮的事件绑定不会失效。

修改后的完整代码 #

把下面的代码替换你原来的函数，放到主题的functions.php文件里：

add_action( 'wp_footer', 'add_checkout_toggle_script', 9999 );
function add_checkout_toggle_script() {
    global $wp;
    if ( is_checkout() && empty( $wp->query_vars['order-pay'] ) && ! isset( $wp->query_vars['order-received'] ) ) {
        ?>
        <style>
            /* 定义隐藏类，用!important确保优先级 */
            .checkout-product-hidden {
                display: none !important;
            }
            /* 切换按钮基础样式，可根据需求自定义 */
            .toggle-products-btn {
                margin: 10px 0;
                padding: 8px 16px;
                background: #2d7dd2;
                color: #fff;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
            }
            .toggle-products-btn:hover {
                background: #1f5f9c;
            }
        </style>
        <script>
            // 封装隐藏额外商品的函数
            function hideExtraProducts() {
                const productItems = document.querySelectorAll('.products');
                // 从第3个元素开始隐藏（索引从0开始，所以index>=2）
                productItems.forEach((item, index) => {
                    if (index >= 2) {
                        item.classList.add('checkout-product-hidden');
                    }
                });
            }

            // 插入切换按钮的函数
            function insertToggleButton() {
                // 选择按钮插入的目标容器，这里选订单摘要表格的父容器，可根据页面结构调整
                const targetContainer = document.querySelector('.woocommerce-checkout-review-order-table');
                // 避免重复创建按钮
                if (targetContainer && !document.querySelector('.toggle-products-btn')) {
                    const toggleBtn = document.createElement('button');
                    toggleBtn.className = 'toggle-products-btn';
                    toggleBtn.textContent = '显示/隐藏额外商品';
                    
                    // 绑定切换事件
                    toggleBtn.addEventListener('click', () => {
                        const productItems = document.querySelectorAll('.products');
                        productItems.forEach((item, index) => {
                            if (index >= 2) {
                                item.classList.toggle('checkout-product-hidden');
                            }
                        });
                    });
                    
                    // 把按钮插入到订单摘要表格的上方
                    targetContainer.parentNode.insertBefore(toggleBtn, targetContainer);
                }
            }

            // 页面初始加载时执行
            document.addEventListener('DOMContentLoaded', () => {
                hideExtraProducts();
                insertToggleButton();
            });

            // 监听WooCommerce结账AJAX更新事件，确保页面刷新后逻辑依然生效
            document.body.addEventListener('updated_checkout', () => {
                hideExtraProducts();
                insertToggleButton();
            });
        </script>
        <?php
    }
}

代码说明 #

• CSS类控制隐藏：用.checkout-product-hidden类加上!important，避免被WooCommerce的默认样式覆盖，保证隐藏效果稳定。
• 监听updated_checkout事件：这是WooCommerce在结账页面AJAX更新后触发的专属事件，能确保每次页面动态刷新后，隐藏逻辑都会重新执行。
• 切换按钮逻辑：动态插入按钮到指定位置，点击时通过切换CSS类实现显示/隐藏，同时加入重复创建判断，避免AJAX更新时生成多个按钮。

内容的提问来源于stack exchange，提问作者Idka-80