7 mins read ‧ 2022/08/07 普

在前端呼叫 WooCommerce 國家欄位

前言

因為前一陣子的客製化要做前端表單

其中一個欄位是國家欄位

要找一個獨立的 Library 來實現當然也可以，不過既然都使用 WooCommerce 了

應該優先找看看 WooCommerce 有沒有支援怎麼樣的方式讓我們添加國家這個欄位

依照你的 WooCommerce 允許販賣國家設定

<select name="vendor_country" id="vendor_country" class="country_to_state vendors_sort_shipping_fields form-control regular-select" rel="vendor_country">
    <option value=""><?php esc_html_e('Select a country&hellip;', 'dc-woocommerce-multi-vendor'); ?></option>
    <?php 
    // 下方的 $country_code 可以設定預設的國家
    // 通常會搭配動態資料，顯示之前用戶儲存的國家
    $country_code = 0;
    foreach (WC()->countries->get_allowed_countries() as $key => $value) {
        echo '<option value="' . esc_attr($key) . '"' . selected(esc_attr($country_code), esc_attr($key), false) . '>' . esc_html($value) . '</option>';
    }
    ?>
</select>

抓出WooCommerce 的全部國家

global $woocommerce;
    $countries_obj   = new WC_Countries();
    $countries   = $countries_obj->__get('countries');
    echo '<div id="my_custom_countries_field"><h2>' . __('Countries') . '</h2>';

    woocommerce_form_field('my_country_field', array(
    'type'       => 'select',
    'class'      => array( 'chzn-drop' ),
    'label'      => __('Select a country'),
    'placeholder'    => __('Enter something'),
    'options'    => $countries
    )
    );
echo '</div>';

結語

這邊的程式碼可以依照你的需求，運用版型覆寫機制放在你想放的地方

這邊的代碼只有前端顯示代碼，並不包含資料儲存