Combining Conditional Variants and Visual Product Variants

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?

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. 

Thanks, Colin. To be honest, I didn't totally follow but I'm not a coder so that's probably why. Maybe there is a less technical approach? Should I delete this post and post elsewhere? Maybe I'm looking in a forum for a solution I can't implement myself. lol.

Hi Jonathan, did you end up sorting this? I have a similar request.