Gộp trang Giỏ hàng vs Thanh toán trong WooCommerce

Gộp trang Giỏ hàng vs Thanh toán trong WooCommerce như nào trong bài viết này topmienphi sẽ hướng dẫn bạn 1 cách chi tiết
Mặc định, WooCommerce tách riêng trang giỏ hàng và trang thanh toán. Tuy nhiên, để tối ưu hóa tỷ lệ chốt đơn, việc hợp nhất hai trang này là một cách cải thiện trải nghiệm người dùng hiệu quả. Dưới đây là hướng dẫn chi tiết để bạn thực hiện điều này.

Lợi ích của việc gộp trang Giỏ hàng vs Thanh toán trong WooCommerce

• Giảm số bước trong quy trình mua hàng, giúp khách hàng dễ dàng hoàn tất đơn hàng hơn.
• Giao diện gọn gàng, thân thiện với người dùng.
• Tăng tỷ lệ chuyển đổi và tối ưu doanh thu.

Hướng dẫn thực hiện Gộp trang Giỏ hàng vs Thanh toán trong WooCommerce

Bạn có thể hợp nhất trang giỏ hàng vào trang thanh toán bằng cách thêm các đoạn mã dưới đây vào file functions.php của theme.

1. Hiển thị giỏ hàng trên trang thanh toán

Để thêm nội dung giỏ hàng vào trang thanh toán, sử dụng đoạn code sau:

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

2. Chuyển hướng từ trang giỏ hàng đến trang thanh toán

Nếu người dùng truy cập trang giỏ hàng, hệ thống sẽ tự động chuyển họ đến trang thanh toán:

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

3. Chuyển hướng đến trang cửa hàng nếu giỏ hàng trống

Nếu giỏ hàng không có sản phẩm, người dùng sẽ được chuyển hướng đến trang cửa hàng:

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. Tinh chỉnh giao diện

Để giao diện gọn gàng và thân thiện hơn, bạn có thể thêm đoạn mã sau:

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

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

Kết quả Gộp trang Giỏ hàng vs Thanh toán trong WooCommerce

Sau khi hoàn tất, trang giỏ hàng sẽ được tích hợp trực tiếp vào trang thanh toán, tạo ra giao diện trực quan và liền mạch, giúp tăng tỷ lệ chốt đơn hàng hiệu quả.

Cảm ơn bạn đã dành thời gian đọc bài viết tại Topmienphi.com! Hy vọng những thông tin trong bài đã mang lại giá trị hữu ích cho bạn.

Nếu thấy bài viết hay, đừng quên chia sẻ đến bạn bè và người thân để họ cũng nhận được những thông tin hữu ích này. Chia sẻ của bạn chính là nguồn động lực lớn giúp chúng tôi tiếp tục phát triển và mang đến những nội dung miễn phí chất lượng hơn nữa.

Hãy ghé thăm Topmienphi.com thường xuyên để cập nhật thêm nhiều bài viết mới về ứng dụng, thủ thuật công nghệ, và các mẹo vặt hữu ích. Đừng quên theo dõi chúng tôi trên các mạng xã hội để không bỏ lỡ những thông tin thú vị nhé!