How to Show or Hide Custom Product Fields Based on Conditions in WooCommerce?

In a WooCommerce store, implementing product input fields is an invaluable customization to gather customers’ personalized messages. However, displaying all product options directly on the product page can create clutter. For instance, if you provide a checkbox option for gift wrapping, you may want to show the text field for entering personalized messages only if the customer selects that option.

Let’s explore how this customization dynamically shows or hides input fields based on certain conditions.

Solution: Show or Hide Custom Product Fields Based on Conditions in WooCommerce

This code allows store owners to add a custom checkbox field to their WooCommerce product pages. When customers enable the checkbox, the code will dynamically show or hide the text area based on the checkbox status.

add_action( 'woocommerce_before_add_to_cart_button', 'ts_display_custom_gift_message_field', 9 );
function ts_display_custom_gift_message_field() {
    echo '<div class="custom-gift-message-field">';
    woocommerce_form_field( 'ts_gift_message_checkbox', array(
        'type' => 'checkbox',
        'label' => 'Add a Gift Message?',
    ));
    echo '</div>';

    // Additional text field initially hidden
    echo '<div class="gift-message-details" style="display:none;">';
    woocommerce_form_field( 'ts_gift_message_details', array(
        'type' => 'textarea', // Changed to textarea for longer messages
        'label' => 'Gift Message',
        'placeholder' => 'Enter your custom gift message here...',
    ));
    echo '</div>';
}

// Add custom checkbox value to cart item data for all products
add_filter( 'woocommerce_add_cart_item_data', 'ts_add_custom_gift_message_to_cart', 10, 2 );
function ts_add_custom_gift_message_to_cart( $cart_item_data, $product_id ) {
    if ( isset( $_POST['ts_gift_message_checkbox'] ) && $_POST['ts_gift_message_checkbox'] ) {
        $cart_item_data['ts_gift_message_checkbox'] = true;
        $cart_item_data['ts_gift_message_details'] = isset( $_POST['ts_gift_message_details'] ) ? sanitize_textarea_field( $_POST['ts_gift_message_details'] ) : '';
    }
    return $cart_item_data;
}

// Display custom checkbox in cart and checkout
add_filter( 'woocommerce_get_item_data', 'ts_display_custom_gift_message_in_cart', 10, 2 );
function ts_display_custom_gift_message_in_cart( $cart_data, $cart_item ) {
    if ( isset( $cart_item['ts_gift_message_checkbox'] ) && $cart_item['ts_gift_message_checkbox'] ) {
        $cart_data[] = array(
            'name' => 'Gift Message',
            'value' => $cart_item['ts_gift_message_details'],
        );
    }
    return $cart_data;
}

// Save the custom checkbox field value to the order items
add_action( 'woocommerce_checkout_create_order_line_item', 'ts_save_custom_gift_message_to_order_items', 10, 4 );
function ts_save_custom_gift_message_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['ts_gift_message_checkbox'] ) && $values['ts_gift_message_checkbox'] ) {
        if ( isset( $values['ts_gift_message_details'] ) && ! empty( $values['ts_gift_message_details'] ) ) {
            $item->add_meta_data( 'Gift Message', sanitize_textarea_field( $values['ts_gift_message_details'] ), true );
        }
    }
}

// Display custom checkbox in admin order items table
add_filter( 'woocommerce_order_item_name', 'ts_gift_message_display_in_admin_order_items_table', 10, 2 );
function ts_gift_message_display_in_admin_order_items_table( $item_name, $item ) {
    // Check if the item has a gift message associated with it
    if ( $gift_message = $item->get_meta( 'Gift Message' ) ) {
        // Append the gift message to the item name
        $item_name .= '<br><small>' . esc_html__( 'Gift Message:', 'your-textdomain' ) . ' ' . esc_html( $gift_message ) . '</small>';
    }
    return $item_name;
}

// Show/hide additional field based on checkbox status
add_action( 'wp_footer', 'ts_show_hide_additional_gift_message_field' );
function ts_show_hide_additional_gift_message_field() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            $('#ts_gift_message_checkbox').change(function() {
                if ($(this).is(':checked')) {
                    $('.gift-message-details').show();
                } else {
                    $('.gift-message-details').hide();
                }
            });
        });
    </script>
    <?php
}

Output

When a customer visits the product page, a checkbox labeled “Add a Gift Message?” is displayed on the product page. Initially, a text area for entering the gift message is hidden. When the checkbox is checked, the text area appears, allowing customers to enter their gift message. The entered gift message is added to the cart item data and displayed in the cart and checkout pages.

Similar to how you can dynamically control the visibility of product fields based on customer selections, you can also implement dynamic pricing based on selected input field options allowing for customized pricing structures.