折疊 Woocommerce 結帳頁面中的訂單摘要/備注表

Question

我正在嘗試在 Shopify 上復制“訂單摘要”功能，其中所有訂單詳細信息都隱藏在切換按鈕/手風琴效果中，以使結帳過程更快更簡單。

如果我們可以向切換按鈕添加購物車符號和價格，就像我附上的圖片一樣，可以加分。

我嘗試過使用各種插件，例如 Collapse-O-Matic 和 CSS，但無法在我的 WooCommerce 結帳頁面上達到預期的效果。

我正在尋找一種解決方案，為 WooCommerce 結帳頁面上的訂單匯總表創建切換按鈕或手風琴效果。

任何幫助或指導將不勝感激！

附件：

它應該是什么樣子

Shopify 結帳內的訂單摘要

在此處輸入圖片描述現在的樣子

Answer 1

如果你想要完全控制，你應該為form-checkout.php模板創建一個自定義模板 ( woocommerce/templates/checkout/form-checkout.php )

但是你也可以添加一個代碼片段來隱藏訂單評論的所有表格行，除了訂單總計。 通過保持訂單總額可見，您不必擔心在結帳表單中的值發生變化時正確更新訂單總額。 WooCommerce會自動更新。

該代碼段所做的唯一另一件事是添加一個單獨的行，其中包含購物車圖標和切換按鈕，一些 CSS 和一些 jQuery 用於隱藏和顯示適當的元素。

add_action( 'woocommerce_checkout_order_review', function() {
    ?>
    <style>
        #order_review_heading {
            display: none; 
        }
        #order_review_toggle {
            display: inline-block;
            padding: 1em;
            font-size: 18px;
            line-height: 1;
            width: 100%;
        }
        #order_review_toggle .dashicons {
            font-size: 18px;
        }
        #order_review_toggle .dashicons-cart {
            margin-right: 0.5em;
        }
        #order_review_toggle .dashicons-arrow-up-alt2,
        #order_review_toggle .dashicons-arrow-down-alt2 {
            float: right;
            cursor: pointer;
        }
        #order_review_toggle .dashicons-arrow-up-alt2 {
            display: none;
        }
        .woocommerce-checkout-review-order-table tr:not(.order-total) {
            display: none;
        }
    </style>

    <script>
        jQuery( function( $ ) {
            $('#order_review_toggle .dashicons-arrow-down-alt2').on( 'click', function() {
                let $orderReviewTable = $(this).closest('#order_review').find( '.woocommerce-checkout-review-order-table' );
                $orderReviewTable.find('tr').show();
                $(this).siblings('.dashicons-arrow-up-alt2').show();
                $(this).hide();
            });
            $('#order_review_toggle .dashicons-arrow-up-alt2').on( 'click', function() {
                let $orderReviewTable = $(this).closest('#order_review').find( '.woocommerce-checkout-review-order-table' );
                $orderReviewTable.find('tr').not('.order-total').hide();
                $(this).siblings('.dashicons-arrow-down-alt2').show();
                $(this).hide();
            });
        });
    </script>
    <?php
    printf( '<div id="order_review_toggle"><span class="dashicons dashicons-cart"></span><span>%s</span><span class="dashicons dashicons-arrow-up-alt2"></span><span class="dashicons dashicons-arrow-down-alt2"></span></div>', __( 'Your order', 'woocommerce' ) );
}, 1 );

add_action( 'wp_enqueue_scripts', function() {
    if ( is_checkout() ) {
        wp_enqueue_style('dashicons');
    }
} );

此代碼片段應添加到您的子主題的 functions.php（或通過代碼片段之類的插件）。