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文件中。

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

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

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

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

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

重新排序参考：Reordering checkout fields in WooCommerce 3

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

1 个答案: