Cách tùy chỉnh trang thanh toán WooCommerce

Hầu hết các tùy chỉnh có thể được thực hiện bằng cách sử dụng móc và bộ lọc, nhưng nếu muốn chỉnh sửa đánh dấu trên trang thanh toán, bạn có thể thực hiện điều đó trong một chủ đề.

Lời cảnh báo: việc di chuyển xung quanh phần đánh dấu trên trang thanh toán có thể gây ra sự cố với các plugin khác sử dụng hook và bộ lọc.

Tôi không khuyên bạn nên xóa bất kỳ móc hành động nào hoặc chỉnh sửa mạnh mẽ phần đánh dấu. Theo tài liệu WooC Commerce, bạn có thể sao chép mẫu thanh toán vào chủ đề của mình trong thư mục có cấu trúc như sau: woocommerce/checkout/form-checkout.php.

Sau đó, bạn có thể tùy chỉnh form-checkout.php theo ý muốn và nó sẽ tải thay vì mẫu mặc định.

Tùy chỉnh bằng CSS

Các lớp CSS có thể thay đổi dựa trên chủ đề hoặc plugin của bạn, nhưng các lớp mặc định thường có sẵn.
Bạn có thể tùy chỉnh các lớp này bằng CSS tùy chỉnh trong chủ đề con hoặc tùy biến.
Dưới đây là các thẻ cấp cao chính cùng với các lớp và ID mà bạn có thể sử dụng.
<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout"> <div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order"> <table class="woocommerce-checkout-review-order-table">
<div id="payment"> <ul class="wc_payment_methods payment_methods methods"> <div class="form-row place-order">

Ví dụ

form.woocommerce-checkout input[type="text"] {
border-radius: 3px;
background-color: #ccc;
color: #444;
}

Để xem tất cả các lớp trên trang thanh toán, hãy sử dụng browser inspector.

Checkout Action Hooks

Móc hành động có thể được sử dụng để thêm hoặc xóa các thành phần khỏi trang thanh toán. Có 9 móc hành động trên trang thanh toán:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • woocommerce_after_checkout_form

Ngoài ra còn có 7 móc bổ sung có sẵn, tùy thuộc vào bố cục của bạn mong muốn:

  • woocommerce_checkout_before_terms_and_conditions
  • woocommerce_checkout_after_terms_and_conditions
  • woocommerce_before_checkout_billing_form
  • woocommerce_before_checkout_registration_form
  • woocommerce_after_checkout_registration_form
  • woocommerce_before_checkout_shipping_form
  • woocommerce_after_checkout_shipping_form

Checkout Hooks Visualized

Nó giúp bạn có được ý tưởng trực quan về vị trí của các móc. Đây là trang thanh toán WooC Commerce tiêu chuẩn, sử dụng chủ đề Storefront.

Dưới đây là nhiều loại móc khác nhau mà bạn có thể sử dụng, được đặt trực quan trên trang thanh toán ở trên.

Móc hành động được sử dụng để thêm đánh dấu vào trang. Ví dụ: chúng ta có thể thêm thông báo cho khách hàng về chi tiết vận chuyển bằng cách sử dụng hook woocommerce_Before_checkout_shipping_form

add_action( 'woocommerce_before_checkout_shipping_form', function() {
	    echo 'Don\'t forget to include your unit number in the address!';
	});

Nó trông như thế này:

Bạn có thể tìm thấy tài liệu về tất cả các hook ở đây.

Moving, Adding, or Removing Checkout Fields

Cách dễ nhất để tùy chỉnh các trường thanh toán là sử dụng plugin Checkout Field Editor

Plugin này cung cấp giao diện người dùng đơn giản để di chuyển, chỉnh sửa, thêm hoặc xóa bất kỳ trường thanh toán nào. Bạn có thể chỉnh sửa mọi thứ về các trường, bao gồm loại, nhãn, vị trí, v.v.

Sau khi cài đặt và kích hoạt plugin này, bạn có thể truy cập WooC Commerce => Checkout Fields để bắt đầu chỉnh sửa.

Để chỉnh sửa một trường, chỉ cần thay đổi giá trị mong muốn và lưu lại. Để thêm một trường, hãy nhấp vào Thêm trường và để xóa, hãy chọn trường đó rồi nhấp vào Tắt/Xóa.

Dùng Custom Code

Custom code phức tạp hơn một chút, nhưng nếu bạn chỉ muốn thực hiện một chỉnh sửa nhỏ mà không mua plugin thì đây là cách bạn thực hiện.

WooCommerce có sẵn một số bộ lọc để chỉnh sửa các trường thanh toán, bao gồm woocommerce_checkout_fields, woocommerce_billing_fields, and woocommerce_shipping_fields.

Bạn có thể sử dụng woocommerce_checkout_fields filter tất cả các trường thông tin thanh toán.

Remove the billing phone number field


// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
	 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_postcode']);
	 unset($fields['billing']['billing_country']);
	 unset($fields['billing']['billing_state']);	
	
     return $fields;
}

Add Shipping Phone Number Field

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['shipping']['shipping_phone'] = array(
        'label'   => __('Phone', 'woocommerce'),
    'placeholder'=>  _x('Phone', 'placeholder', 'woocommerce'),
    'required' => false,
    'class'    => array('form-row-wide'),
    'clear'    => true
     );

     return $fields;
}

/**
 * Display field value on the order edit page
 */

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){
    global $post_id;
    $order = new WC_Order( $post_id );
    echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';
}

Để chỉnh sửa một trường, bạn có thể truy cập các thuộc tính của trường. Ví dụ: hãy thay đổi trình giữ chỗ cho Zip thành Mã bưu chính.

Change Field Placeholder

add_filter( 'woocommerce_checkout_fields' , 'my_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function my_override_checkout_fields( $fields ) {
     $fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';
     return $fields;
}

Để biết thêm ví dụ, hãy xem tài liệu WooCommerce tại đây.

Đã đăng trong WordPress.