本篇文章更新時間:2023/04/29
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~
如果本站內容對你有幫助,歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。
WooCommerce 結帳欄位調整真的是一個很大痛點。畢竟一個這麼重要的資源,然後有很多角度來切入管理。是我認為如果一個電商網站有超過兩個以上的邏輯變化需求,就可能沒有外掛能夠滿足條件修改的那種等級!
過去相關「結帳欄位」筆記的文:
- [WooCommerce] 調整結帳欄位的終極指南
- [WooCommerce] 結帳頁面設定欄位必填、非必填、隱藏或是移除欄位的方法
- [WooCommerce] 根據選擇運送方式修改結帳欄位的方法
- [WooCommerce] 程式客製化結帳欄位紀錄方法(Session)
- [WordPress] 調整適合 WooCommerce 在台銷售結帳頁欄位(含地址郵遞區號選擇)
- ... 還有更多
為什麼只是改一個欄位標籤名稱要扯這麼多?
主要是我自己也採了一個雷! 單純的想要改結帳頁面付款人的欄位,就使用 woocommerce_checkout_fields
這個事件過濾器。但結果是,預設的欄位:
country
first_name
last_name
company
address_1
address_2
city
postcode
都會因為更新結帳頁面的互動機制「Fragment」給影響,更新結帳頁面後會改回預設的欄位標籤名稱。
所以如果要改上述這些預設就有的欄位名稱標籤最佳修改的地方會是: woocommerce_default_address_fields
這個事件過濾器。 程式碼範例如下:
function mxp_rename_state_province( $fields ) {
$fields['state']['label'] = '改你要的名稱';
return $fields;
}
add_filter( 'woocommerce_default_address_fields' , 'mxp_rename_state_province', 999,1 );
另外還值得注意這些預設的欄位的預設權重設定:
$fields = array(
'first_name' => array(
'label' => __('First name', 'woocommerce'),
'required' => true,
'class' => array('form-row-first'),
'autocomplete' => 'given-name',
'priority' => 10,
),
'last_name' => array(
'label' => __('Last name', 'woocommerce'),
'required' => true,
'class' => array('form-row-last'),
'autocomplete' => 'family-name',
'priority' => 20,
),
'company' => array(
'label' => __('Company name', 'woocommerce'),
'class' => array('form-row-wide'),
'autocomplete' => 'organization',
'priority' => 30,
'required' => 'required' === get_option('woocommerce_checkout_company_field', 'optional'),
),
'country' => array(
'type' => 'country',
'label' => __('Country / Region', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide', 'address-field', 'update_totals_on_change'),
'autocomplete' => 'country',
'priority' => 40,
),
'address_1' => array(
'label' => __('Street address', 'woocommerce'),
/* translators: use local order of street name and house number. */
'placeholder' => esc_attr__('House number and street name', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide', 'address-field'),
'autocomplete' => 'address-line1',
'priority' => 50,
),
'address_2' => array(
'label' => $address_2_label,
'label_class' => array('screen-reader-text'),
'placeholder' => esc_attr($address_2_placeholder),
'class' => array('form-row-wide', 'address-field'),
'autocomplete' => 'address-line2',
'priority' => 60,
'required' => 'required' === get_option('woocommerce_checkout_address_2_field', 'optional'),
),
'city' => array(
'label' => __('Town / City', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide', 'address-field'),
'autocomplete' => 'address-level2',
'priority' => 70,
),
'state' => array(
'type' => 'state',
'label' => __('State / County', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide', 'address-field'),
'validate' => array('state'),
'autocomplete' => 'address-level1',
'priority' => 80,
),
'postcode' => array(
'label' => __('Postcode / ZIP', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide', 'address-field'),
'validate' => array('postcode'),
'autocomplete' => 'postal-code',
'priority' => 90,
),
);
priority
欄位值分別是 10, 20, 30, 40, 50, 60, 70, 80, 90。這樣之間間隔 10 的預設值,是給你排序想安插或改變的其他欄位值的設定空間。
也要小心一點,從這些預設欄位去做的改變值會同時影響到「付款 Billing」與「運送 Shipping」這兩個結帳欄位區塊。