WooCommerce運送到結帳頁上的地址下拉列表

Question

我目前正在建立一個籃球網站的過程。我的客戶想知道是否有可能有一些障礙物可以送到動物救護中心，護理之家或類似的地方。這些位置將由他選擇，理想情況下將顯示在結帳頁面的下拉列表中，然後用戶可以選擇發送到其中的一個或自己填寫地址。

我已經瀏覽了woocommerce的擴展，並且看不到任何符合法案的內容。

有沒有人試圖實現類似的東西？

有人可以指點我正確的方向嗎？

謝謝

Answer 1

您可以輕鬆地添加結算表單中的任何自定義字段。例如，你可以使用woocommerce_after_order_notes鉤客戶詳細信息和訂單的註釋後添加自定義字段：

下面是代碼：

// Creating the custom fields on checkout page after order notes 
add_filter('woocommerce_after_order_notes', 'custom_checkout_fields'); 
function custom_checkout_fields($checkout) { 

    echo '<div id="my_custom_checkout_field"><br><h2>' . __('My custom fields title', 'my_theme_slug') . '</h2>'; 

    // The selector 
    woocommerce_form_field('my_field_name1', array(
     'type'  => 'select', 
     'required' => true, 
     'class'  => array('my-field-class form-row-wide'), 
     'label'  => __('Select your destination', 'my_theme_slug'), 
     'options'  => array(
      '' => __('Chose an option', 'my_theme_slug'), 
      'option1' => 'Fill in the custom address (display a field)', 
      'option2' => 'my option 1 choice', 
      'option3' => 'my option 2 choice', 
      'option4' => 'my option 3 choice' 
     ) 
    ), $checkout->get_value('my_field_name1')); 

    // The field (Using javascript to make it appear when selector corresponding value is chosen) 
    woocommerce_form_field('my_field_name2', array(
     'type'  => 'textarea', 
     'required' => false, 
     'class'  => array('my-field-class2 form-row-wide'), 
     'label'  => __('Fill in the custom address', 'my_theme_slug'), 
     'placeholder' => __('Enter an address (optional)', 'my_theme_slug') 
    ), $checkout->get_value('my_field_name2')); 

echo '</div>'; 

} 

// Process the checkout 
add_action('woocommerce_checkout_process', 'custom_checkout_field_process'); 
function custom_checkout_field_process() { 
    // Check if set, if its not set add an error. 
    if (! $_POST['my_field_name1']) // the selector 
     wc_add_notice(__('Please enter something into this new shiny field.'), 'error'); 
} 

// Update the order meta with field value 
add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta'); 
function custom_checkout_field_update_order_meta($order_id) { 
    if (! empty($_POST['my_field_name1'])) { 
     update_post_meta($order_id, 'my_field_name1', sanitize_text_field($_POST['my_field_name1'])); 
    } 
    if (! empty($_POST['my_field_name2'])) { 
     update_post_meta($order_id, 'my_field_name2', sanitize_text_field($_POST['my_field_name2'])); 
    } 
} 

當然，這下去你的活動子function.php文件主題（或主題）或任何插件文件。

這是一個全功能的工作部分例如

還剩下什麼（你需要什麼，你能有什麼）

你需要
TO讓自定義jQuery/javascript腳本：
- 首先到隱藏文本區域字段（頁面加載時）。
- 至顯示表示當在選擇器（手動輸入地址的情況下）中選擇了正確的值時，文本區域字段。

其它選項：
- 顯示/編輯，在管理員修改訂單頁面值
- 這個自定義字段添加到電子郵件...

---

官方參考：WooThemes - Customizing checkout fields using actions and filters

重新排序ref：Reordering checkout fields in WooCommerce 3