WooCommerce在结帐页面上发送到地址下拉列表

I am currently in the process of building a hamper website. My client is wondering if it is possible to have certain hampers than can be sent to animal rescue centres, care homes or similar. These locations would be chosen by him and would ideally be displayed in the checkout page in a dropdown, the user can then choose to send to a one of these or fill out a address themselves.

我目前正在建立一个篮子网站。我的客户想知道是否可能有一些礼篮，而不是送到动物救助中心，养老院或类似的地方。这些位置将由他选择，理想情况下将显示在下拉列表中的结帐页面中，然后用户可以选择发送其中一个或自己填写地址。

I have had a look through the extensions availible for woocommerce, and could not really see anything that fitted the bill.

我已经看过了可用于woocommerce的扩展，并且无法真正看到符合条件的任何东西。

Has anyone tried to achieve anything similar?

有没有人试图实现类似的东西？

Someone could point me on the right direction, please?

有人可以指出我正确的方向吗？

Thanks

谢谢

1 个解决方案

#1

You can add easily any custom fields in checkout form. For example you can use woocommerce_after_order_notes hook to add a custom field after the customer details and order notes:

您可以在结帐表单中轻松添加任何自定义字段。例如，您可以使用woocommerce_after_order_notes挂钩在客户详细信息和订单注释后添加自定义字段：

Here is the code:

这是代码：

// 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'] ) );
    }
}

Naturally this goes on function.php file of your active child theme (or theme) or in any plugin file.

当然，这会在您的活动子主题（或主题）的function.php文件中或任何插件文件中。

This is a fully functional working partial example

这是一个功能齐全的工作部分示例

WHAT IS LEFT (What you will need and what you can have)

什么是左（你需要什么，你可以拥有什么）

YOU WILL NEED
TO Make a custom jQuery/javascript script:
- First to hide the text area field (when page is loaded).
- To show that text area field when the correct value is chosen in the selector (manual entry of the address case).

你需要制作一个自定义的jQuery / javascript脚本： - 首先隐藏文本区域字段（加载页面时）。 - 在选择器中选择正确的值时显示文本区域字段（手动输入地址的情况）。

OTHER OPTIONS:
- Display/edit that values in admin edit orders pages
- Add this custom Fields to Emails …

其他选项： - 在管理编辑订单页面中显示/编辑该值 - 将此自定义字段添加到电子邮件...

Official reference: WooThemes - Customizing checkout fields using actions and filters

官方参考：WooThemes - 使用操作和过滤器自定义结帐字段

Reordering ref: Reordering checkout fields in WooCommerce 3

重新排序参考：在WooCommerce 3中重新排序结帐字段

#1