我的WooCommerce商店有2种不同的产品。
在结账页面中,如果客户购买普通产品,他只会填写正常的结算字段。
但是,如果该客户购买了第二个产品,则客户必须勾选一个复选框,该复选框将显示为附加字段。
任何人都可以帮我解决这个问题吗?
答案 0 :(得分:0)
You will have to set in the function your 2 product IDS and to put the correct texts for your custom checkout fields. The code bellow will conditionally display a checkbox when both products are in cart. When customer will tick the checkbox an additional text field will appear:
// Add fields to the checkout
add_action( 'woocommerce_after_order_notes', 'custom_checkout_fields' );
function custom_checkout_fields( $checkout ) {
// Set HERE below your different product IDs
$product_1_id = 37; // Normal product
$product_2_id = 67; // Specific product (second product)
$has_id_1 = $has_id_2 = false;
// Check if products are in cart
foreach( WC()->cart->get_cart() as $cart_item ){
if( $cart_item['product_id'] == $product_1_id ) $has_id_1 = true;
if( $cart_item['product_id'] == $product_2_id ) $has_id_2 = true;
}
// Display conditionally Custom checkout Fields (when both products are in cart)
if( $has_id_1 && $has_id_2 ){
echo '<div id="custom_checkout_fields">';
// The Check box
woocommerce_form_field( 'my_checkbox', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('Fill in this field'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'my_checkbox' ));
// The hidden field
woocommerce_form_field( 'my_text_field', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Fill in this field'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'my_text_field' ));
echo '</div>';
$required = esc_attr__( 'required', 'woocommerce' );
// The jQuery Script
?>
<script>
jQuery(function($){
// Initialising variables
var textField = 'p#my_text_field_field',
checkboxField = 'input[name^="my_checkbox"]',
required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>'; // Required html
// Initialising at start (Hidding the text field)
$(textField).hide(function(){
$(this).removeClass("validate-required");
$(this).removeClass("woocommerce-validated");
$(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
if( $(textField+' > label > abbr').html() != undefined )
$(textField+' label > .required').remove();
});
// When Checkbox is checked / unchecked (Live event)
$( checkboxField ).click( function() {
if( $(this).prop('checked') == true )
$(textField).show(function(){
$(this).addClass("validate-required");
$(this).removeClass("woocommerce-validated");
$(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
if( $(textField+' > label > abbr').html() == undefined )
$(textField+' label').append(required);
});
else
$(textField).hide(function(){
$(this).removeClass("validate-required");
$(this).removeClass("woocommerce-validated");
$(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
if( $(textField+' > label > abbr').html() != undefined )
$(textField+' label > .required').remove();
});
});
});
</script>
<?php
}
}
// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ( ! empty( $_POST['my_text_field'] ) ) {
update_post_meta( $order_id, __('My Field'), sanitize_text_field( $_POST['my_text_field'] ) );
}
}
Code goes in function.php file of your active child theme (active theme or in any plugin file).
Tested and Works in WooCommerce 3+
Related official developer documentation: Customizing checkout fields using actions and filters