WooCommerce 运送到结帐页面上的地址下拉列表
WooCommerce ship to dropdown list of address on checkout page
我目前正在建立一个礼篮网站。我的客户想知道是否有可能将某些礼篮送往动物救助中心、疗养院或类似场所。这些位置将由他选择,理想情况下会显示在结帐页面的下拉列表中,然后用户可以选择发送到其中一个或自己填写地址。
我已经查看了可用于 woocommerce 的扩展,但没有真正找到符合要求的东西。
有没有人尝试过类似的事情?
有人能给我指出正确的方向吗?
谢谢
您可以在结帐表单中轻松添加任何自定义字段。例如,您可以使用 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 文件或任何插件文件中。
这是一个功能齐全的工作部分示例
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).
OTHER OPTIONS:
- Display/edit that values in admin edit orders pages
- Add this custom Fields to Emails …
官方参考:WooThemes - Customizing checkout fields using actions and filters
重新排序参考:
我目前正在建立一个礼篮网站。我的客户想知道是否有可能将某些礼篮送往动物救助中心、疗养院或类似场所。这些位置将由他选择,理想情况下会显示在结帐页面的下拉列表中,然后用户可以选择发送到其中一个或自己填写地址。
我已经查看了可用于 woocommerce 的扩展,但没有真正找到符合要求的东西。
有没有人尝试过类似的事情?
有人能给我指出正确的方向吗?
谢谢
您可以在结帐表单中轻松添加任何自定义字段。例如,您可以使用 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 文件或任何插件文件中。
这是一个功能齐全的工作部分示例
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).OTHER OPTIONS:
- Display/edit that values in admin edit orders pages
- Add this custom Fields to Emails …
官方参考:WooThemes - Customizing checkout fields using actions and filters
重新排序参考: