WooCommerce结账页订单摘要折叠功能实现求助

以下是无需依赖插件的自定义实现方案，直接通过代码添加手风琴效果、带购物车图标与实时总价的切换按钮：

1. 添加自定义功能代码 #

将以下代码添加到子主题functions.php文件，或使用「Code Snippets」插件添加：

// 替换结账页订单摘要为手风琴结构
add_action('woocommerce_checkout_order_review', 'custom_collapsible_order_summary', 1);
function custom_collapsible_order_summary() {
    // 移除默认订单摘要
    remove_action('woocommerce_checkout_order_review', 'woocommerce_order_review', 10);
    
    // 获取当前购物车总价
    $cart_total = WC()->cart->get_total();
    
    ?>
    <div class="collapsible-order-summary">
        <!-- 切换按钮 -->
        <button class="summary-toggle" id="summaryToggle">
            <span class="cart-icon">🛒</span>
            <span class="summary-title">订单摘要</span>
            <span class="summary-total"><?php echo $cart_total; ?></span>
            <span class="toggle-icon">▼</span>
        </button>
        
        <!-- 折叠内容：原订单摘要 -->
        <div class="summary-content" id="summaryContent">
            <?php woocommerce_order_review(); ?>
        </div>
    </div>
    <?php
}

// 添加JS脚本处理折叠逻辑与价格实时更新
add_action('wp_footer', 'collapsible_summary_scripts');
function collapsible_summary_scripts() {
    if (is_checkout() && !is_wc_endpoint_url()) {
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 初始设置为折叠状态
            $('#summaryContent').hide();
            $('#summaryToggle .toggle-icon').text('▼');
            
            // 切换按钮点击事件
            $('#summaryToggle').on('click', function() {
                $('#summaryContent').slideToggle(300);
                const icon = $('#summaryToggle .toggle-icon');
                icon.text(icon.text() === '▼' ? '▲' : '▼');
            });
            
            // 实时更新按钮上的总价（监听结账页价格变化）
            $(document.body).on('updated_cart_totals updated_checkout', function() {
                const newTotal = $('.order-total .woocommerce-Price-amount').html();
                $('#summaryToggle .summary-total').html(newTotal);
            });
        });
    </script>
    <?php
    }
}

2. 添加自定义样式 #

将以下CSS添加到子主题style.css或主题自定义CSS面板：

/* 订单摘要手风琴容器 */
.collapsible-order-summary {
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

/* 切换按钮样式 */
.summary-toggle {
    width: 100%;
    padding: 15px 20px;
    background-color: #f8f8f8;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
}

/* 购物车图标 */
.cart-icon {
    margin-right: 10px;
    font-size: 20px;
}

/* 总价样式 */
.summary-total {
    font-weight: 700;
    color: #2d2d2d;
}

/* 切换箭头 */
.toggle-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* 折叠内容样式 */
.summary-content {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .summary-toggle {
        padding: 12px 15px;
        font-size: 14px;
    }
    .summary-content {
        padding: 15px;
    }
}

3. 效果说明 #

• 初始状态订单摘要为折叠状态，仅显示带购物车图标、「订单摘要」文字与实时总价的切换按钮
• 点击按钮可展开/收起完整订单详情（包含商品、优惠券、运费、总价等）
• 结账页价格变动时（如添加优惠券、选择配送方式），按钮上的总价会自动更新
• 样式可根据你的主题风格调整CSS中的颜色、间距、字体等参数

内容的提问来源于stack exchange，提问作者c d