Let’s say you have a product with several customizations of the same type which are dependent on the previous choices—e.g., a piece of clothing can come in different styles and colors (i.e. unique options) and have the same set of options in regards to sizes (i.e. the same type of customizations) for each of the possible variants of the said piece of clothing.
If you want your customer to be able to go through all the possible customizations without resetting their selected size choice, you can enable the ‘Sync Custom Options by Tag’ feature. You will also require this feature if you want each 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.
This is how it works:
(notice how the size selection ‘L (10-12)’ stays the same regardless of the bridal wear)
Now let’s take a look at this product. It contains a custom option for Bridal wear and several custom options for the Sizes. Each Size customization has the same amount of choices, and the names of those choices are the same across the custom options as well. This condition is necessary for this feature to work properly. The Size custom options are dependent (i.e. shown or hidden) on the Bridal wear selection—in other words, each custom option for Sizes corresponds to each choice of Bridal wear.
Only one dropdown of Sizes is visible at a time, depending on which style of Bridal wear has been selected previously.
(preview mode. only one size custom option is visible depending on the style of the bridal wear)
The problem is, if a customer selects a Style and a Size, but then decides to change their selection of Style, a new custom option for Size will appear and the previously selected Size choice will reset.
(notice how the size choice ‘S (6-8)’ resets after we select the next style of bridal wear)
To make life a bit easier, you can avoid this by synchronizing Size options. Let’s see how we can do this.
First, click ‘Edit’ to access the custom option’s settings (Size’s settings, in our case) and scroll down to the ‘Sync Custom Options by Tag’ feature. Check the box, and a new field will appear.
(enabling the feature)
(a new field popped up)
Now, we need to come up with a name (a ‘tag’) for the custom options we want to be synchronized. It can be anything, but please note, tags must be the same for all the synchronized custom options. Each Step should have its own tag.
(we are using the word ‘size’ as a tag)
After that, repeat the process for the required custom options.
Additional But Still Very Important Tips (Conditional Logic Rules)
Now that we're done with tagging and syncing our custom options, let's not forget about Conditional Logic Rules. While it's not the main focus of this guide, Logic Rules are essential for this feature to work properly.
As we have established before, each choice for Bridal Wear corresponds to each of the custom options for Sizes. However, right now, it's only true on paper, so we need to actually make it so—by adding Logic Rules to our Size custom options and connecting them to the Bridal Wear choices.
Bridal Wear contains six choices:
- OLIVIA MIDI SATIN BRIDAL ROBE,
- OLIVIA MIDI SATIN BRIDAL ROBE - PEONY,
- TAHLIA EMBROIDERED BRIDAL ROBE - DUSTY PINK,
- TAHLIA EMBROIDERED BRIDAL ROBE - WHITE,
- VIV EMBROIDERED CAMI SET - CHAMPAGNE,
- VIV EMBROIDERED CAMI SET - WHITE.
We have exactly 6 custom options for Sizes to match the choices:
- Choose Your Size - Olivia Midi Satin Bridal Robe,
- Choose Your Size - Olivia Midi Satin Bridal Robe - Peony,
- Choose Your Size - Tahlia Embroidered Bridal Robe - Dusty Pink,
- Choose Your Size - Tahlia Embroidered Bridal Robe - White,
- Choose Your Size - Viv Embroidered Cami Set - Champagne,
- Choose Your Size - Viv Embroidered Cami Set - White.
(bridal wear choices and custom option for sizes)
As a result, we have six pairs of elements (choice-custom option) that we need to address, i.e. 'OLIVIA MIDI SATIN BRIDAL ROBE' (a choice) and 'Choose Your Size - Olivia Midi Satin Bridal Robe' (a corresponding custom option) etc.
Since the visibility of the custom options for Sizes (whether they are shown or not) are determined by the Bridal Wear choices, we will be setting up Logic Rules for the former as to configure their behavior.
We want to achieve the following: when a Bridal Wear choice is selected by a customer, only its corresponding custom option for Sizes should be visible, not all of them at once.
First, let's go to the Size custom option's settings and scroll down to the Conditional Logic Rules tab.
(conditional logic rules)
Then, click the 'Add Logic Rule' button and fill in the location of the choice that this custom option is connected to. Since right now we are configuring the 'Choose Your Size - Olivia Midi Satin Bridal Robe' custom option, its pair aka the choice that influences its visibility would be 'OLIVIA MIDI SATIN BRIDAL ROBE'.
(when the choice 'OLIVIA MIDI SATIN BRIDAL ROBE', which is located in the custom option 'Select your bridal wear*' of the Step '2.BRIDAL WEAR', is selected, this element will be Shown)
This rule basically says that this custom option is visible to your customer only if your customer selected a choice that corresponds to it. In all other cases, it will be hidden. By connecting the rest of the choices and custom options to each other we're ensuring that your customer see only the elements that they need to see.
And we're 1/6 done! Now, repeat the process for the rest of custom options and connect them to their respective choices.
A few things to remember:
- choice names must be the same across the synced custom options,
- only one synchronized custom option should be visible at a time. It means that you will have to apply Logic to them in order to adjust their visibility. In our case, each custom option for Sizes is connected to its respective choice from custom option for Bridal wear. To know more about Conditional Logic, please refer to this guide: Conditional Logic Rules For Displaying Choices / Custom Options / Steps
- a tag must be the same for all custom options,
- each Step should have its own tag (e.g., use ‘size_1’ as a tag for the custom options in the first Step, ‘size_2’ for custom options in the second Step etc.),
- multiple tags per Step is a possibility as well, if you need to sync two different groups of custom options.