How can I show product variants sequentially to customers?

[UO]

Hello everyone,

I would like to make sur the costumer chose the right variant before choosing the next ones by hiding them and showing it at the right time.

For example : I sell cake

Before everything I want to costumer to select the shape of the cake and then the flavor and at last the colors.

I only want to show them the flavor choices after and only after he selected his favorite shape. The flavor options would only pop up if you select the shape.

And so on, I want the client to be able to see the colors only if he has picked both the shape and the flavor.

How can I do that?

[Guleria]

Hello @UO ,

Initially you have to hide the flavor choices and colors with css.

Now in the next step with JS you have to check is there a change in the variant option favorite shape. if found yes show the next select box same with next variant option and so on.

But keep note this solution will work if you are using select box and your first option is blank select.

Thanks

[EasifyApps]

Hi @UO ,

Your specific requirements can be fulfilled using the Easify Product Options app, free plan available. This app enables you to set up your cake options, including shape, flavor, and color. Notably, it allows you to show the next set of custom options only once the previous option is selected, thanks to the Conditional logic feature .

Here’s a quick demo to illustrate the process:

Storefront:

Simple App Settings:

• Shape options:

• Flavor options:

• Color options:

• Add options to the main product:

If you encounter any challenges during the setup, don’t hesitate to contact the Easify team via the in-app live chat.