Conditionally display fields based on product variation in Extra Product Options

You can add/show/hide extra fields on a product page based on product variations with the help of WooCommerce Extra Product Options Pro.

Product Attributes

Variable products are grouped using product attributes function. Product attributes are briefly divided into two:

1. Global Attributes
2. Local Attributes

Global Attributes

Once defined, these attributes will be available to add to all the products. They will be listed in the attributes section of the product from where you can choose them from the dropdown. Please see the screenshot for more details on Global Attributes.

Local Attributes

While global attributes are available to select throughout all products, local attributes are those which are customly added to particular products from the attributes section inside the product details.

Conditionally display fields based on product variations for global attribute

Let’s assume that we have a product named ‘Shirt’ with three color variations — Red, Blue & Green. Suppose that we have to set a rule such that text field A is to be displayed only when a shirt of Red color is chosen.

These are the steps involved:

1. Go to Products -> Extra Product Options.
2. Create a text field called Field A.

1. Click on Display Rules. Choose Show from the display action drop-down (Show field if all below conditions are met). Then, set the condition to show Field A only when product variation is equal to Red.
2. Select ‘Product Variation’ and ‘value equals to’ from the drop-downs. As we gave Color as a Global Attribute, we should prefix ‘pa_’ before giving the attribute slug and variable slug. In this example, as we want to display Field A only when color Red is chosen, we should give value equals to pa_color:red in the column.

Conditionally display fields based on product variations for local attribute

Let’s suppose that we have different size variations for the product ‘Shirt’. You can create a local attribute using the following steps.

1. Go to Products >> All Products >> Select Edit option under the desired product.
2. In Attributes section, click on the Add option shown near ‘Custom Product Attribute’ to create a new local attribute. In the following example, we have added a local attribute named ‘size’. The attribute is customized with sizes — S, M, L , XL and XXL.

1. Now go to Products -> Extra Product Options and create a text field name Field A.

1. Go to Display Rules. Choose Show from the display action drop-down. To set the condition to show Field A only when product variation is equal to size M (Medium), you should give the slug values of the attribute and variable in the required column. In this example, you should give it as Size:M. As size is a local attribute, the ‘pa_’ prefix is not required.