Conditional Logic Rules For Displaying Choices / Custom Options / Steps

---

Conditional logic is used to configure the visibility of certain elements (e.g. Steps, Custom Options, Choices, Layers) of the product. For example, you can set a logic rule so that Option X will only show if Choice Y is selected on the previous step. In other words, if the condition is true (customer selecting a particular choice), then action must take place (hide or show an element).  

Important: we are suggesting to place logic on as high level as possible. The logic placed on the Step will work better than the logic placed on the Custom option. Place logic on the Choices only if it is absolutely necessary.

This feature is mainly used to show/hide choices and options that will not work with each other. However, it can be also used to set a different price and/or SKU for specific combinations.

Interface 

Now, let’s see where exactly the Conditional Logic section is located in our interface. 

As we’ve stated previously, you can apply logic rules to Steps, Custom Options, Choices, and Layers. You can find the ‘Conditional Logic Rules’ section in each element's settings. 

(conditional logic rules for steps. Click on the edit button and scroll down. Here it is!)

--

(conditional logic for custom options. same location: the element’s settings, bottom of the page)

--

(conditional logic rules for choices are located in the settings of each individual choice)

--

(and finally, conditional logic rules for layers. Go to the layers section, click on the desired layer to access its settings tab, and then click on the ‘Logic’ panel)

Setting Up Rules

To create a rule, first press the button ‘Add Logic Rule’.

(a dropdown appeared)

A dropdown appears asking you to specify the step, custom option, and the choice that will influence your current element. So, the line of the rule will look like this: 

(an example of a single condition rule. if a customer selects the choice ‘Big Box’, which is located in the custom option called ‘Cushion Style’ in the step 'Design', the current element will be Hidden; the path always goes like this: step — custom option — choice)

If the element depends on several choices, instead of one Choice, you can choose "One of.." or "Not equal to," which will allow you to set a dependency on the several Choices.

If the element depends not on one choice but on two, you can add a second rule, etc.

(another line appears)

You can see that it looks a bit different. Before the second ‘Which Step?’ field we have another dropdown:

(the ‘or-and’ dropdown)

‘Or’ and ‘And’ are logical operators that combine your conditions together into one complex relation. 

• ‘or’ = if at least one condition is true, the action will take place,
• ‘and’ = both conditions must be true for the action to take place.

Using these operators, you can create more sophisticated rules that consist of more than one condition to influence the visibility of your element.

Let's take look at some examples:

• pic 1, AND: this element will be shown only if both ‘Big Box’ and ‘100% Linen’ are selected at the same time. Otherwise, it is hidden.
• pic 2, OR: this element will be shown if at least one choice (either ‘Big Box’ or ‘100% Linen’, or both) is selected. Either is fine. Both are great, too. If neither is selected, the element is hidden. 

There is no limitation on the number of logical rules.

Detailed Example

This is the product. It’s an armchair and it has many customization options available, but let’s focus on its fabric and colours.

(overview of the product; there is a set of colours for each fabric choice)

The idea is simple: we want each set of colour choices to correspond with its respective fabric. In other words, only one custom option for colours should be visible depending on which fabric choice has been selected. If we do not use any logic rules, every custom option will be available to your customer, not only becoming an inconvenience but potentially being able to mess up with your product’s intended design and functionality. 

(what it looks like if we do not use logic rules—only one fabric choice is selected, but custom options for colours are still visible)

We can easily fix this. Since we want each colour set to match the fabric choice, we need to add some logic rules to custom options for colours to configure their visibility. Colours are dependent on fabrics; in other words, fabric choice determines what set of colours should be visible—this is why we will be adding some logic rules to the latter. 

We have 5 different fabrics in stock: 

• 100% Linen, 
• Corduroy, 
• Linen/Cotton, 
• Brushed Cotton 
• Velvet. 

There are 5 custom options for colours that correspond to those fabrics:

• 100% Linen - Colour,
• Corduroy - Colour,
• Linen/Cotton - Colour,
• Brushed Cotton - Colour,
• Velvet - Colour.

If the ‘100% Linen’ fabric choice is selected, then the ‘100% Linen - Colour’ custom option should be visible. If the ‘Corduroy’ fabric choice is selected, then the custom option ‘Corduroy - Colour’ should be visible and so on.

If we take these conditions and translate it to logic rules, this is what we’ll get:

(a logic rule for the custom option ‘100% Linen - Colour’. if a customer selects the choice ‘100% Linen’, which is located in the custom option called ‘Fabric’ in the step called Design, then ‘100% Linen - Colour’ will be Shown)

What’s left to do is to go through all of the colour sets and apply the same logic—changing the choice to the necessary one, of course.

Great! Let’s see the result: 

(only one set of colours for each fabric—just what we wanted!)

One Of... / Not Equal To...

When you have multiple choices in your custom option and only some of them, but not one or all of them, influence the visibility of your other elements, you can use the 'One Of...' functionality.

(the 'One Of...' functionality. The action will take place (i.e. the element will be shown) only if one or all of these 4 choices have been selected by a customer; otherwise, it will be hidden)

Alternatively, you can use our 'Not Equal To...' functionality. It works the other way around — the action will take place if marked choices are not selected by a customer. 

(this element will be hidden only if one or all of these 5 choices are not selected; otherwise, if one or all them are selected, it will be shown)

—

Other Usages

You will also require Conditional Logic Rules if you want your combination of choices to stand for specific SKU or a different price. For example, you have a white S-sized t-shirt, and this combination of choices ('white' and 'S') generates 'S_WHITE' SKU and a price of 10$, while the same white t-shirt with the size of M would now cost 15$ with 'M_WHITE' SKU. Please refer to this guide for a detailed instruction on how to do it: Customization - Sync Custom Options by Tag.

—

Applying logic rule to several choices in the same option

If you need to apply the same logic rule to several choices in one option, you don't have to put it in each choice manually. Follow the steps below

1. Open the Choice edit screen

2. Build a logic rule

3. Below, you find a dropdown with all choices in this option listed. Select the ones that you want to have the same conditional logic rule, and apply.

—

A few things to remember:

• the visibility of your elements is influenced by other existing elements in your product and customers’ interactions with them (selected or not),
• We strongly suggest adding rules to bigger values. For example, it is preferable to set a rule for the Step than for the Custom option. We suggest setting logic on the choices only if you are sure that this is absolutely necessary.
• if an element doesn’t have any logic rules applied to it, it will always be shown,
• be careful when using operators OR and AND. one misplaced operator—and suddenly your customer can see something they're not supposed to ;)