[WooCommerce] 修改結帳頁面欄位標籤名稱的最佳方法

本篇文章更新時間:2023/04/29
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~
如果本站內容對你有幫助,歡迎使用 BFX Pay 加密貨幣新台幣 贊助支持。


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」這兩個結帳欄位區塊。


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[///////////____36%_________]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


文章
Filter
Apply Filters
Mastodon