Hướng dẫn gộp 2 trang giỏ hàng và thanh toán trong Woocommerce

Lợi ích khi sử dụng cách làm này

Phù hợp với website có ít sản phẩm hoặc giá trị đơn hàng cao: Những website chỉ bán vài sản phẩm hoặc các sản phẩm có giá trị lớn thường không cần quy trình mua hàng phức tạp. Khách hàng thường chỉ mua 1–2 sản phẩm nên việc tách riêng trang giỏ hàng là không cần thiết.

Đọc thêm:

Tối ưu quy trình mua hàng – nhanh và tiện lợi hơn: Việc gộp 2 bước thành 1 giúp rút ngắn thời gian và thao tác của khách hàng. Khi quy trình mua hàng càng đơn giản, tỷ lệ hoàn tất đơn hàng thường cao hơn.

Giảm bớt các trường không cần thiết để tránh gây rối: Đối với người dùng ít kinh nghiệm mua sắm online, việc phải điền quá nhiều thông tin có thể khiến họ bối rối và bỏ qua việc thanh toán. Bỏ bớt các trường không quan trọng sẽ giúp họ cảm thấy dễ dàng và tự tin hơn khi đặt hàng.

Dưới đây là cách giải quyết

Bỏ trang giỏ hàng, khách hàng khi bấm vào nút giỏ hàng cho ra luôn trang thanh toán

Có nhiều cách để gộp trang giỏ hàng và thanh toán, nhưng tôi thường chọn cách nhanh – dù là cách “nguy hiểm” nhất đó là chuyển hướng (redirect) trang /gio-hang/ sang /thanh-toan/ bằng mã trạng thái 302.

Gộp 2 trang giỏ hàng và thanh toán

Hoặc bạn cũng có thể sửa file .htaccess (áp dụng với máy chủ Apache):

Thêm dòng sau vào cuối file:

Redirect 302 /gio-hang/ /thanh-toan/

Gộp shortcode giỏ hàng vào luôn trang thanh toán

Mặc dù đã gộp trang, bạn vẫn cần cho khách hàng chỉnh sửa số lượng sản phẩm hoặc xoá sản phẩm không muốn mua – điều mà chỉ trang giỏ hàng mới làm được. Giải pháp là chèn shortcode giỏ hàng vào ngay đầu trang thanh toán. Hãy bọc nó trong các div riêng biệt để dễ dàng tùy chỉnh giao diện bằng CSS về sau. Dưới đây là code dành cho bạn:

<div class = "tp-cart">
	

	
		
			Chưa có sản phẩm nào trong giỏ hàng.		
	
		
			
				Quay trở lại cửa hàng			
		
	
 </div>
<div class = "tp-checkout">
 </div>

Bỏ các trường không cần thiết trong trang thanh toán

Nếu bạn làm trang thanh toán bằng WooCommerce mà giữ nguyên toàn bộ các trường mặc định thì trải nghiệm người dùng sẽ rất tệ. Khách hàng ở Việt Nam thường không quan tâm hoặc không hiểu rõ mấy trường như:

Zip code (mã bưu điện)
City (thành phố – vì đã ghi trong địa chỉ rồi)
Company (tên công ty – không cần nếu không xuất hoá đơn)

Vì vậy, để đơn giản và thân thiện hơn, tôi thường chỉ giữ lại 4 trường quan trọng nhất:

Họ tên – billing_first_name
Số điện thoại – billing_phone
Email – billing_email
Địa chỉ – billing_address_1

Các trường còn lại nên ẩn đi để tránh làm khách hàng rối và thoát ra ngoài

// Bỏ các trường không cần thiết trong trang thanh toán
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_last_name']); 
unset($fields['billing']['billing_address_2']);
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_country']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']); 
 return $fields;
}

Thêm chú thích (placeholder) vào 4 trường thông tin khách hàng

// thêm chú thích vào ô nhập thông tin
add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
function override_billing_checkout_fields( $fields ) {
    $fields['billing']['billing_first_name']['placeholder'] = 'Họ và tên';
    $fields['billing']['billing_email']['placeholder'] = 'Email';
    $fields['billing']['billing_address_1']['placeholder'] = 'Địa chỉ giao hàng';
    $fields['billing']['billing_phone']['placeholder'] = 'Số điện thoại';
    return $fields;
}

Css tùy chỉnh

Bước cuối này bạn chỉ cần thêm css cho đẹp là được. Bạn có thể CSS tùy ý nhé

/**tuy bien trang thanh toán**/
.tp-cart .cart-collaterals{
display:none;
}
.tp-cart .large-7{
min-width:100%;
}
.tp-cart p.form-row-first{
width: 100%!important;
}

Và đây là kết quả

Gộp 2 trang giỏ hàng và thanh toán