Hợp nhất trang Giỏ hàng vs Thanh toán trong WooCommerce

Giới thiệu

Hiện nay, chúng ta vẫn đang sử dụng cấu hình mặc định trong WooCommerce là trang giỏ hàng sẽ riêng biệt với trang thanh toán. Điều này cũng ko có gì sai, nhưng để tối ưu trong việc chốt đơn hàng, thì hợp nhất trang giỏ hàng vào trang thanh toán vẫn là tốt nhất.

Xem thêm các bài viết hướng dẫn về WooCommerce

• Kiểm tra định dạng Số điện thoại & Email trong WooCommerce
• Hiển thị Email khách hàng khi hoàn tất đơn hàng trong Woocommerce
• Tích hợp mã QR Code thanh toán vào đơn hàng WooCommerce WordPress

Hướng dẫn

Chia sẻ code cho các bạn cách để làm điều này dễ dàng hơn, hãy copy vào file functions.php trong theme của bạn

1. Thêm giỏ hàng vào trang thanh toán

Đầu tiên các bạn cần thêm phần giỏ hàng vào trong trang thanh toán hiện thị giỏ hàng lên

add_action( 'woocommerce_before_checkout_form', 'add_cart_on_checkout', 5 );
function add_cart_on_checkout() {
    echo do_shortcode('[woocommerce_cart]');
}

2. Loại bỏ trang giỏ hàng và đến thẳng trang thanh toán

Nếu vào trang giỏ hàng thì chuyển hướng đến trang thanh toán

add_action( 'template_redirect', function() {
    if (is_cart()) {
        wp_redirect(wc_get_checkout_url());
        die();
    }
});

3. Nếu giỏ hàng trống thì chuyển hướng đến trang shop

add_action( 'template_redirect', 'redirect_empty_checkout' );
function redirect_empty_checkout() {
    if ( is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
   		wp_safe_redirect( get_permalink( wc_get_page_id( 'shop' ) ) ); 
        exit;
    }
}

add_filter( 'woocommerce_checkout_redirect_empty_cart', '__return_false' );
add_filter( 'woocommerce_checkout_update_order_review_expired', '__return_false' );

4. Thêm 1 vài đoạn code nữa để trông được đẹp và gọn gàng hơn

<?php
add_action('woocommerce_after_checkout_form', function(){
    ?>
        <script>
            jQuery('.cart-collaterals').remove()
        </script>

        <style>
            .woocommerce-checkout .ts-product-image {
                display: none;
            }
        </style>
    <?php
});

Như vậy là các bạn đã hoàn tất việc hợp nhất trang giỏ hàng và thanh toán lại với nhau, trông rất gọn gàng và tăng tỷ lệ chốt hàng hơn.