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

🗣 Bài viết đăng bởi Pinker vào lúc 06-02-2024 và cập nhật lúc 06-02-2024 👁 118 lượt xem
Merge Cart page vs Checkout page

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.

Giỏ hàng nằm trong trang Thanh toán
Giỏ hàng nằm trong trang Thanh toán

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

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.

5/5 - (1 bình chọn)

Bài viết khác

Tổng hợp Download Plugin - Theme cho WordPress : Xem ngay
Nhóm Zalo : Tham gia ngay
TAGS: CART WOOCOMMERCE HỢP NHẤT TRANG GIỎ HÀNG VS THANH TOÁN MERGE CART VS CHECKOUT MERGE CART WOOCOMMERCE

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

9 trừ ba bằng mấy (trả lời bằng chữ) ?

Hotline Zalo Giới thiệu
0986.209.305
Zalo
Giới thiệu