Show/Hide an additional checkout field when ticking a checkbox in Woocommerce - php

Question

My WooCommerce store has 2 different products.
In check out page, if customer buy a normal product, he only fill normal billing fields.
But if this customer buy a second product, the customer must be tick a checkbox that will make appear an additional field.
Anyone could help me solve this problem?

Answer 1

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 below 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