Mặc định trang thanh toán của Woocommerce sẽ có nhiều ô nhập thông tin rất dài dòng, khách vào mua hàng trên trang web của bạn sẽ thấy khá phiền phức và có khi họ thay đổi ý định mua hàng vì quá nhiều yêu cầu phải nhập tại bước thanh toán.
Là một nhà quản trị website thì bạn không muốn điều ở trên xảy ra, do đó bạn cần làm gọn trang thanh toán Woocommerce để khách hàng dễ dàng thực hiện ở trang thanh toán.
Ở bài này mình không giải đáp thắc mắc Woocommerxe là gì nha, ngĩa tiếng Việt là Thương mại điện tử và nó là gì thì chắc các bạn cũng biết rồi mới tìm tới bài này.
Làm gọn trang thanh toán Woocommerce
Nếu bạn rành code hay là một nhà thiết kế web thì chắc không tìm bài này đâu, cho nên mình đi thẳng vào vấn đề luôn, để làm gọn trang thanh toán Woocommerce thì bạn chep đoạn code sau bỏ vào file function.php của theme.
Trang thanh toán sau khi được làm gọn gàng, chỉ còn các form thông tin cần thiết.
Code:
/*Sắp xếp lại thứ tự các field*/
add_filter("woocommerce_checkout_fields", "order_fields");
function order_fields($fields) {
//Shipping
$order_shipping = array(
"shipping_last_name",
"shipping_phone",
"shipping_address_1"
);
foreach($order_shipping as $field_shipping)
{
$ordered_fields2[$field_shipping] = $fields["shipping"][$field_shipping];
}
$fields["shipping"] = $ordered_fields2;
return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields',99 );
function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_first_name']);
unset($fields['billing']['billing_postcode']);
unset($fields['billing']['billing_country']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_address_2']);
$fields['billing']['billing_last_name'] = array(
'label' => __('Họ và tên', 'devvn'),
'placeholder' => _x('Nhập họ và tên của bạn', 'placeholder', 'devvn'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['billing']['billing_address_1']['placeholder'] = 'Ví dụ: Số xx Đường ... , Quận ..., TPHCM';
unset($fields['shipping']['shipping_company']);
unset($fields['shipping']['shipping_postcode']);
unset($fields['shipping']['shipping_country']);
unset($fields['shipping']['shipping_city']);
unset($fields['shipping']['shipping_state']);
unset($fields['shipping']['shipping_address_2']);
$fields['shipping']['shipping_phone'] = array(
'label' => __('Điện thoại', 'devvn'),
'placeholder' => _x('Số điện thoại người nhận hàng', 'placeholder', 'devvn'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['shipping']['shipping_last_name'] = array(
'label' => __('Họ và tên', 'devvn'),
'placeholder' => _x('Nhập họ và tên của người nhận', 'placeholder', 'devvn'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true
);
$fields['shipping']['shipping_address_1']['placeholder'] = 'Ví dụ: Số xx Đường ... , Quận ..., TPHCM';
return $fields;
}
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('Số ĐT người nhận').':</strong> <br>' . get_post_meta( $order->id, '_shipping_phone', true ) . '</p>';
}
Các bạn chú ý các theme đang sử dụng child theme thì Code được paste vào Giao diện – Sửa – Chọn child theme đang sử dụng – Function.php. Nên copy xuống dưới cùng trong file function.php để dễ kiểm soát nhé.
Thêm một số tùy chỉnh CSS
Bạn có thể copy đoạn code sau vào CSS nhé:
p.form-row-first, p.form-row-last{width:100%}
.woocommerce-billing-fields input{margin-bottom:0}
#customer_details label{font-weight: normal; font-size: 15px; color:#950303}
Vậy là xong, bạn đã làm gọn gàng trang thanh toán Woocommerce rồi đó, vào xem thành quả và tùy biến thêm CSS cho đẹp hơn nếu bạn có thể nhé.
