GET YOUR FIRST 14-DAYS OF PRO FREE

Adding conditional logic to your Staggs attributes

In this post:

Wouldn’t it be nice to conditionally show or hide attributes based on a previous attribute value? Right, we thought so too! That is why we have added support for conditional logic rules to our configurator builder and settings page so you can manage conditional rules globally as well, which is helpful if you have loads of products.

Let us explain how it works.

Conditional logic on product level (leading)

Let’s start by covering the conditional logic on product level, because the rules applied on product level are leading (override the global rules).

Adding the attributes

Let’s take our sofa as an example.

We have plenty of colors, some of which are available for the leather sofa type with a 3-seater size.

Others are available for the fabric type and a 2-seater size.

Not only do we need to add these rules in the configurator, we also have to structure our attributes in such way that we can apply conditional logic to it.

Otherwise unwanted attribute items are being hidden. And we don’t want that to happen.

So we have to group our attributes:

  1. Sofa color 2 seater fabric
    1. size: 2 seater
    2. type: fabric
  2. Sofa color 2 seater leather
    1. size: 2 seater
    2. type: leather
  3. Sofa color 3 seater fabric
    1. size: 2 seater
    2. type: fabric
  4. Sofa color 3 seater leather
    1. size: 3 seater
    2. type: fabric

As you can see, we end up with four attributes in total, each containing their own attribute items.

Setting up conditional rules

With our attributes in place, we can add the attributes to the configurator builder and configure the conditional rules.

First, we add our sofa size and type attributes.

Next, we can add our color attributes and apply conditional logic to these attributes.

Make sure you check the box ‘set conditional logic’, otherwise the rules won’t be displayed.

Compare operators

You can choose between various compare operators.

For attribute options, you can use the following comparisons:

  • Is equal to
  • Is not equal to

For attribute inputs, you can use other comparisons:

  • Is greater than
  • Is less than
  • Is greater than or equal to
  • Is less than or equal to

Option conditional logic

Since version 1.8 you can also add conditional logic for specific attribute options

This means you don’t have to show/hide the attribute completely.

You can just apply specific rule to show/hide a single option.

To add option conditional rules, simply tick the box “Set option conditional display”

Conditional display and option conditional display also work together.

Though the (attribute) conditional display is leading.

Global conditional rules

Since version 1.12.4 you can also apply conditional rules to an attribute that applies for all configurations (if the rules have not been overriden at product level)

Simply go over to Staggs -> Settings -> Conditional rules and start adding in the rules

Here you find 2 fields as well:

  1. Attribute conditions
  2. Attribute option conditions

It works the same as on product level. Select attribute (and option) and then define the display rules.

Save the settings and you should see the rules take effect.

Remember conditional selected options

By default, the configurator selects the first option in the list of available attribute options.

But when you switch between options back and forth, you will notice that the options always reset to the first one.

If you want the configurator to remember the last selected option for the conditional attribute, you can do so by enabling the setting “Remember selected options of conditional attributes”

You can find this in Staggs -> Settings -> WooCommerce [tab]

You can even go a step further and save the selected option for all attributes.

Let’s say you have applied conditional logic to the 2 seater fabric and selected Beige.

If you switch to 3 seater fabric, the value will also become Beige. Because the configurator remembers the value across all attributes.

To enable this, also check the setting “Remember selected options of conditional attributes across all attributes”

Tips

There are some ‘best practices’ when applying the Staggs conditional rules. Please read them carefully. If you need any assistence, please contact support. We are happy to help you out!

1) We recommend you structure your attribute titles as detailed as possible.

The attribute post titles will only be displayed in your admin table. Not in the configurator.

This really helps when you have loads of configuration attributes.

2) We recommend you keep the names of the attributes the same when applying conditional logic.

Let’s say the title of our attributes for sofa colors is “Sofa color”, then we apply the “Sofa color” title to all the four Sofa colors attributes.

That way the configurator will override the preview image of the group. Otherwise you get 4x the same image stacked upon each other, because it sees every attribute as unique.

Note: this only applies to conditional items in the same group.

If you also have a sofa leg color group, you should use a different title for those attributes.

Configurator builder

Chevron icon
Toggle widget nav content

Attribute Types

Chevron icon
Toggle widget nav content

Hooks and Filters

Chevron icon
Toggle widget nav content