Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
00 Days
00 Hours
00 Minutes
00 Seconds

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
}
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 }
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
}
flexi bogo cta banner image


This to the shop owners who are running or planning to run BOGO offers on their WooCommerce store…

BOGO deals are great for increasing your sales, but have you thought about which offers are bringing you more revenue and which offers are not performing that great?

Don’t just set a BOGO deal, track the revenue generated by your deals in real-time with the Flexi BOGO for WooCommerce plugin.

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.

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

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.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of


0 Comments
Newest
Oldest
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible.

Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

By using our site, you acknowledge that you have read and understood our Privacy Policy and Terms & Conditions.