Product Variant Add to cart button

I need technical support, that i’m building an e-commerce site where I have 3 variants for the products. For that in the product page I need an “Add to Cart” button for each variant. Any reference or video links would be helpful.

Read only link

Hi @Raj_Ravi
The Add to Cart button will add whichever option has been selected on the product page.

Within Option List Settings (Add to Cart\Default State 2\Option List) - set Preselect default variant to Yes. This will ensure whichever “Option” is default within the CMS Products Collection will be selected so if someone was to just click the Add to Cart button it would add an item.

Can you provide a link to the published site as the cart function doesn’t work properly within designer mode.

Thank you @WisdomainUK, this is fine but I wanted it like when there are 3 variants 3 add to cart button should be visible is there any options like that or any work-around?

@Raj_Ravi I can only suggest you create individual items within eCommerce Products for each variant for example:

  • Product 1 - Class 12 - Paperback
  • Product 2 - Class 12 - eBook
  • Product 3 - Class 12 - Combo

Within eCommerce Products\Categories, add a new Category called Books and add the 3 new products you’ve created to it.

Within a static page (not the Products Template page) add a CMS element, connect to your eCommerce Products collection and then add a filter within the Collection list settings to Categories contains Books.

You can then add an Add to Cart element within the Collection Item element so is visible for all products which will then add that individual item/variant to the cart.

See screenshots.



Thank you so much for this @WisdomainUK

Added “Add to Cart” button menu to my site. But how to setup it so that clicking the “Add to Cart” button can add the products to the cart wizday. please tell me

Apologies for the late response, but do you still require help with this?