Sửa trang thanh toán WooCommerce dễ dàng không dùng plugin

Trang thanh toán WooCommerce – Đây là 1 trang mà rất nhiều bạn làm website bằng WordPress rất mong muốn chỉnh sửa nó đẹp hơn mà hầu như toàn phải dùng đến plugin để chỉnh sửa. Bài viết này mình sẽ hướng dẫn các bạn các chỉnh sửa mà không dùng đến plugin trên wordpress.

Trang thanh toán mặc định của Woocommerce

Theo như các bạn thấy thì trang Thanh toán mặc định của Woocommerce nhìn trông rất thiếu chuyên nghiệp và thừa thãi với nhiều trường (field) mà bạn và cả khách hàng sẽ không bao giờ dùng đến.

Để giải quyết vấn đề này, hôm nay tôi tranh thủ viết 1 bài hướng dẫn sơ cách tùy biến trang thanh toán này trở nên gọn gàng và tiện lợi hơn mà bạn không cần phải dùng đến Plugin thứ 3 với nhiều tùy chỉnh khác.

Tất nhiên sử dụng Code sẽ mất thời gian ở lần đầu tiên khá nhiều, khá khó dùng nếu bạn không rành code, ít tùy chỉnh hơn so với dùng plugin… tuy vậy bạn có thể chủ động nhiều thứ và sử dụng cho nhiều Website khác sau này chỉ bằng cách dán đoạn code đã tùy biến vào là xong.

Trang thanh toán WooCommerce
Trang thanh toán mặc định của Woocommerce

Để chỉnh sửa các trường thì các bạn copy đoạn code dưới đây và paste vào file function.php nhé.

* Thanh Toán - Xóa - Sửa Field */
function nz_edit_cko($fields){
	$fields['billing']['billing_first_name']['label'] = 'Họ tên';
	$fields['billing']['billing_first_name']['placeholder'] = 'Nhập họ tên quý khách';
	$fields['billing']['billing_email']['label'] = 'Email';
	$fields['billing']['billing_email']['placeholder'] = 'Địa chỉ Email (có thể để trống)';
	$fields['billing']['billing_phone']['label'] = 'Số điện thoại';
	$fields['billing']['billing_phone']['placeholder'] = 'Nhập số điện thoại';
	$fields['billing']['billing_address_1']['label'] = 'Địa chỉ nhận hàng';
	$fields['billing']['billing_address_1']['placeholder'] = 'Số nhà - Quận/Huyện - Thành phố...';
	$fields['order']['order_comments']['label'] = 'Ghi chú thêm về đơn hàng';
	$fields['order']['order_comments']['placeholder'] = 'Ví dụ thời gian giao hàng, địa chỉ giao hàng, gọi trước khi giao...';
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_country']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_city']);
    return $fields;
}
add_filter('woocommerce_checkout_fields','nz_edit_cko');

Ở đây bạn sẽ thấy các mục bao gồm:

  • billing – đây là nhóm bên thanh toán, ở một vài giao diện (theme) khác sẽ có thêm trường shipping nhóm vận chuyển và order các bạn cũng áp dụng tương tự.
  • label – là đoạn văn bản phía trên của field, các bạn có thể để trống cũng đc nếu cần gọn gàng hết mức.
  • placeholder – phần này là văn bản mô tả ở trong field, sẽ tự mất khi khách hàng điền vào.
  • unset – nếu bạn muốn field không hiển thị

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

chinh sua trang thanh toan woocommerce

Thay đổi kích thước các trường (field) trong trang thanh toán

Như hình trên thì các bạn sẽ thấy đã lọc được phần lớn các Field thừa thãi không cần thiết và thêm văn bản vào một cách khá ổn rồi, nhưng về mặt giao diện thì nó vẫn còn rất tang hoang.

Tất nhiên để giải quyết vấn đề này thì các cao thủ CSS sẽ dễ dàng làm được, nhưng với Woocommerce thì họ đã tích hợp sẵn bộ CSS nên ở đây chúng ta sẽ dùng luôn của họ để tối ưu hơn.

/* Thanh Toán - Chỉnh sửa kích thước Field
form-row-first – Nửa đầu
form-row-last – Nửa sau
form-row-wide – Full
Fix - p.form-row-wide.form-row-last {clear: none;}
*/
function nz_style_checkout($nz_size_cko){ 
	$nz_size_cko['billing']['billing_first_name']['class'][10] = 'form-row-first';
	$nz_size_cko['billing']['billing_phone']['class'][20] = 'form-row-last'; 
	$nz_size_cko['billing']['billing_address_1']['class'][30] = 'form-row-last';
	$nz_size_cko['billing']['billing_email']['class'][40] = 'form-row-first'; 
	return $nz_size_cko;
}
add_filter('woocommerce_checkout_fields','nz_style_checkout',9999);

Ở đây bạn sẽ thấy 3 yếu tố mà tôi đã ghi chú ngay trong code rồi, nên giải thích thêm đơn giản là:

  • form-row-first – Nửa đầu – Sẽ rộng gần 50% và canh lề phải 1 tí.
  • form-row-last – Nửa sau – Rộng như trên, ko canh lề phải, kết hợp với cái trên sẽ tạo thành 1 hàng hoàn chỉnh.
  • form-row-wide – Full – Rộng 100% chiếm hoàn toàng 1 dòng hàng ngang.

Về phần Ghi chú thì nó đã ổn sẵn rồi nên mình sẽ không chỉnh sửa gì nữa.

Và đây là kết quả sau khi sửa các trường trang thanh toán Woocommerce

:

3 thay doi kich thuoc min.jpg

Thêm các trường (field) khác cho trang thanh toán Woocommerce

Mặc định trang thanh toán chỉ có vài Field cần thiết, phần còn lại khá thừa thãi, tuy nhiên trong nhiều trường hợp bạn cần thêm vài ghi chú, tùy chọn các kiểu cho khách hàng thì sẽ phải code thêm tính năng này. Khi bạn nhận được đơn hàng từ khách thì sẽ thấy các tùy chọn thêm để lên đơn hàng chính xác cho khách hàng.

Ví dụ vài trường hợp:

  • Khách cần gói quà hay các bạn phải thêm 1 tùy chọn Lựa chọn gói quà để khách cần thì check vào đó.
  • Khi gói quà muốn có thêm thiệp chúc với nội dung abc… thì phải thêm tùy chọn nhập text.
  • Khách muốn chuyển phát nhanh và thêm đóng gói kỹ càng hoặc bảo hiểm vận chuyển các kiểu…
/* Thêm Form Custom vào Check Out */
function nz_custom_checkout($checkout){
	woocommerce_form_field('nz_them_url', array(
		'type'          => 'text',
		'required'	=> false,
		'class'         => array('nz_custom_checkout', 'form-row-last'),
		'label'         => 'Tùy chọn tính năng',
		'label_class'   => 'nz_cs_label',		
    		'clear'     	=> true
		),
		$checkout->get_value('nz_them_url')); 
}
add_action('woocommerce_after_checkout_billing_form', 'nz_custom_checkout');

Các tùy chọn bao gồm:
type – bao gồm các kiểu định dạng thông thường của form như checkbox, ratio…

Kết luận

Như vậy là mình đã hướng dẫn xong cho các bạn cách tuỳ chỉnh trang thanh toán mà không cần dùng đến plugin gây ảnh hưởng đến tốc độ website. Chúc các bạn thành công!!!

Bài viết liên quan

Đánh giá bài viết

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 *