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
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
Hoặc là
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/