Jump to content

Combining Conditional Variants and Visual Product Variants

Recommended Posts

Hi everyone,

I am trying to achieve a product page similar to the one here: https://drewdoggett.com/shop/titans  He is using woocommerce for his cart (I looked at the source code).

I would like to achieve three things which he is doing:

(1) A Visual Product Variant selection;

(2) Product Image updates with variant selection; and

(3) Product Variants show/hide and are selectable/not selectable based on other variants previously chosen.

I know for (1) there is this plugin for a visual variant from these guys: https://www.sqspthemes.com/plugins/product-swatch-variant

I know for (2) there is a plugin for updating image based on variants: https://www.sqspthemes.com/plugins/change-product-image-with-variant

I don't know how to achieve number three while also achieving the first two goals and/or whether these plugins would be able to "talk" to any code I write to achieve number three.

The problem is I need certain drop-downs or product choices to reveal themselves based on other selections. I can't have each product variant always available because not all choices may be purchasable. For example, you cannot purchase a Plexiglass print with a frame or a mat but those options are still available to the customer because they are tied to white and black frame options. This means a customer has to sit there and work out what is actually available or not and choose the right combination to add something to the cart. Terrible UX. I also don't want to do a single drop-down with a list of every size and product variant available because it would be a list of over 50 options for each artwork.

I have uploaded a screenshot snippit of my product list as a hint to how complex this gets... There are 11 variations per print size and 4 or 5 print sizes per artwork... And each variant depends on another variant selected...

Is there another plug-in or code to help me get to where I want to go?

Screen Shot 2019-10-22 at 16.15.03.png

Link to comment

It seems to me that the best approach would not be to attempt to glue two or more plugins together. 

Instead you should set up the products with all of the variant information but hide the dropdowns using css.  )

Then you should be able to parse the variant data using javascript and use it to construct a front end similar to the one in the example you have.  The variant data is already on the product page (as JSON, from memory).

Interacting with your custom front end would  set the values on the hidden dropdowns.

Then, once the user has completed their selections they can click add to basket and the hidden dropdowns will already be set to the correct values to do the job. 

Essentially, you're abstracting the complexity. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.