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

Tạo trường bắt buộc và không bắt buộc

Để trường bắt buộc nhập mới thanh toán bạn dùng true. Còn ngược lại không yêu cầu là false

add_filter( ‘woocommerce_billing_fields’, ‘wc_unrequire_wc_phone_field’);
function wc_unrequire_wc_phone_field( $fields ) {
$fields[‘billing_phone’][‘required’] = true;
return $fields;
}

Hoặc là

add_action(‘woocommerce_after_checkout_validation’, ‘my_custom_checkout_field_process’);
function my_custom_checkout_field_process() {
if ( ! $_POST[‘order_comments’] )
wc_add_notice( __( ‘Vui lòng nhập thêm ghi chú trước khi thanh toán’ ), ‘error’ );
}

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'] = 'tranvana@gmail.com';
$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.

Nguồn: https://quachquynh.com/

Để lại một bình luận

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 *