Conditionally Displaying Fields Based on Product VariationsYou can add/show/hide extra fields on a product page based on product variations with the help of WooCommerce Extra Product Options Pro.
Variable products are grouped using product attributes function. Product attributes are briefly divided into two:
- Global Attributes
- Local 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.
While global attributes are available to select throughout for all products, local attributes are those which are custom added to a particular product from the attributes section inside the product details.
Conditionally display fields based on Product Variations for Global AttributeLet’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:
- Go to Products → Extra Product Options.
- Create a text field called Field A.
- Click on Display Rules. Choose Show from the display action drop-down (Show field if all below conditions are met).
- Set the condition to show Field A only when product variation is equal to Red.
- 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 a Local AttributeLet's suppose that we have different size variations for the product ‘Shirt’. You can create a local attribute using the following steps.
- Go to Products → All Products → Select Edit option under the desired product.
- 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.
- Now go to Products → Extra Product Options and create a text field name Field A.
- Go to Display Rules. Choose Show from the display action drop-down.
- 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.