Documentation

Create Your First Conditional Layer

WooCommerce Product Configurator 1.4.0 features the introduction of Conditional Layers.

Use Cases for Conditional Layers

Conditional Layers are extremely powerful – for example, our product, Modern Pine Desk, has a few configurable attributes. 

We have “Drawer Width”, “Drawer Color”, “Leg Style”, and “Leg Color” and when the customer makes these selections, we want to update the compiled image to display the relevant attribute’s image. 

In our example, the Modern Pine Desk’s drawer can span the width of the desk, or occupy only the middle section; both are available in all colors – meaning we can have a “Full Width” drawer in Green, Ocre, and Stone

This means depending on the “Drawer Width” selected, we’d need to conditionally load a different image for the “Drawer Color”.

This is where Conditional Layers will come in handy. We are able to add a Conditional Layer to our “Drawer Colour” attribute, that says – if drawer width equals “Full Width”, use the Full Width image for our selected color.

Step One: Creating a Conditional Layer

  1. When editing your product, navigate to the Configurator tab in the Product Data section.
  2. Open the attribute panel you’d like to add your Conditional Layer to; in our example, Drawer Colour
  3. Find and click the Add Conditional Group button. This will reveal a conditional group panel, giving you an attribute value, a comparison value, and the value itself.

We want to say, that if “Drawer Width” (attribute), “is equal to”, “Full Width” (value), then use the images selected in the next step for the “Drawer Color” layer. To add more conditions, you can click Add Condition.

example of use images when all conditions are met

Step Two: Selecting Conditional Images

Now that we have completed step one, we can add our conditional images. In our example, we want to tell the frontend that when a customer selects the “Full Width” Drawer option, to use the full width image for each color. 

Here, we can add a full width Green, Ocre, and Stone drawer image – and upon the customer making that selection, the compiled image will use the full width image that we will upload.

  1. To select the image, click on the plus icon, found to the right of each attribute value (in our case, Green, Ocre, and Stone). 
  2. This will initialize the media selection window, either upload, or choose the relevant image, and click
    Set Image
  3. Once happy, update the product.
selecting conditional images example

Further

Our Modern Pine Desk features interchangeable legs. We want to give customers the ability to toggle leg color and leg type.

We need to set up a conditional layer, that says when a customer has selected the “Straight” leg type, display each color’s straight leg image variant. 

  1. So, we find our “Leg Color” attribute in the Product Configurator tab and add a Conditional Group
  2. We select “Leg Style” as the attribute and select “Straight” as the value. 
  3. Now we can add the relevant images, (in this case, straight) for each color, “Charcoal”, and “Pine”.
example of adding a conditional group

Once happy, update the product. The customer should now be able to toggle the color of the drawer, the width of the drawer, the leg color, and leg style. 

Are you using WooCommerce Product Configurator yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.

WooCommerce Product Configurator by Iconic

WooCommerce Product Configurator

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support