Chỉnh sửa trang thanh toán WooCommerce

WooCommerce là một plugin được nhiều website sử dụng khi tạo trang web bán hàng. Bởi nó quá hoàn hảo hỗ trợ nhiều thứ. Công việc của bạn là tìm hiểu để tùy biến theo ý mình mà thôi. Một trong những kiến thức cần phải biết đó là chỉnh sửa trang thanh toán (Checkout) trong WooCommerce.

Hướng dẫn chỉnh sửa trang thanh toán mặc định trong WooCommerce

Mặc định trong Form thanh toán sẽ có khá nhiều trường (Fields). Các trường này nếu bạn giữ nguyên sẽ gây khó khăn khi thanh toán. Bởi khách hàng sẽ không đủ kiên nhẫn để điền hết vào các trường đó. Vì thế bạn sẽ loại bỏ đi một số không cần thiết.

Xóa trường không cần thiết

Hãy mở file functions.php thêm đoạn mã này xuống dưới cùng

add_filter( 'woocommerce_checkout_fields' , 'custom_fields_woocommerce' );

function custom_fields_woocommerce( $fields ) {
unset( $fields['billing']['billing_last_name'] );
unset( $fields['billing']['billing_postcode'] );
unset( $fields['billing']['billing_company'] );
unset( $fields['billing']['billing_address_1'] );
unset( $fields['billing']['billing_address_2'] );
unset( $fields['billing']['billing_city'] );
unset( $fields['billing']['billing_state'] );
unset( $fields['billing']['billing_country'] );
return $fields;
}

Để xóa một trường nào đó bạn chỉ cần dùng

unset( $fields[‘billing’][‘truong_can_xoa‘] );

Sau khi thêm đoạn mã ở trên kết quả sẽ còn lại các field cần thiết

Hướng dẫn tùy chỉnh trang thanh toán Woocommerce

Thêm chú thích (Placeholder)

Đây dòng chữ hiển thị ở bên trong trường

add_filter( 'woocommerce_checkout_fields' , 'fquachquynh', 9999 );

function fquachquynh( $f ) {

$f['billing']['billing_first_name']['label'] = 'Họ tên';
$f['billing']['billing_first_name']['placeholder'] = 'Trần Văn A';
$f['billing']['billing_phone']['label'] = 'Số điện thoại';
$f['billing']['billing_phone']['placeholder'] = '098.789.987';
$f['billing']['billing_email']['label'] = 'Địa chỉ Email';
$f['billing']['billing_email']['placeholder'] = '[email protected]';
$f['order']['order_comments']['placeholder'] = 'Ghi chú về yêu cầu làm website!';
return $f;
}

Để thêm Placeholder

$f[‘billing’][‘ten_truong‘][‘placeholder’] = ‘Trần Văn A’;

Chuyển hướng đến trang checkout sau khi ấn nút đặt hàng

add_filter( 'woocommerce_add_to_cart_redirect', 'qq_redirect_checkout_add_cart' );

function qq_redirect_checkout_add_cart() {
return wc_get_checkout_url();
}

Dịch văn bản khi trang thanh toán là tiếng Anh

Trong trường các văn bản hiện tiếng Anh thì bạn sẽ sử dụng đoạn mã bên dưới để tự động dịch khi hiển thị trên trình duyệt

add_filter( 'gettext', 'quachquynh', 999 );

function quachquynh( $translated ) {
$translated = str_ireplace( 'Your Order', 'Cộng giỏ hàng', $translated );
$translated = str_ireplace( 'Billing Details', 'Chi tiết thanh toán', $translated );
$translated = str_ireplace( 'Product', 'Giao diện', $translated );
$translated = str_ireplace( 'Subtotal', 'Tạm tính', $translated );
$translated = str_ireplace( 'Order notes (optional)', 'Ghi chú bổ sung (Tùy chọn)', $translated );
$translated = str_ireplace( 'Place Order', 'Đặt mẫu', $translated );
$translated = str_ireplace( 'Price', 'giá', $translated );
$translated = str_ireplace( 'Quantity', 'số lượng', $translated );
$translated = str_ireplace( 'Cart Totals', 'Cộng giỏ hàng', $translated );
return $translated;
}

Kết luận: Trên đây là bài viết giúp bạn dễ dàng tùy chỉnh cho trang thanh toán bằng Woocommerce. Nó sẽ rất hữu ích với những người mới đang tập xây dựng website bán hàng online.

>> Tham khảo thêm: https://woocommerce.com/posts/customize-checkout-fields-woocommerce/

Hãy để lại bình luận:

Mình rất vui khi bạn đã để lại một bình luận. Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *