Showing product variations on archive page

[Jennifer]

Jennifer

January 15, 2018 at 11:09 pm

Hi,
I’m using the Ascend Premium theme. I’ve added code from *Login to see link
to the product archive pages to replace the ‘Select Options’ button for variable products with the actual product variation dropdown so the user can add to cart without having to go into each product page.

If I set Woo Extras > Variation Swatches type to ‘dropdown select box’, then I can select any attribute and add to cart, although Chrome inspector shows the following errors with non-unique id’s:
[DOM] Found xxx elements with non-unique id #pa_sizes>
<select id=”pa_sizes” class=”kad-select select-2-hidden-accessible” name = attribute_pa_sizes” …

If I set Woo Extras > Variation Swatches type to ‘radio boxes’, then I can’t select attributes or add to cart for products #2 onward. It appears that the corresponding variation in product #1 is being selected instead. There are also many more errors with non-unique id’s, as follows:

[DOM] Found xxx elements with non-unique id #attribute_pa_sizes<variation-1>
<input type=”radio” data-attribute-name=”attribute-pa-sizes” value=”variation-1″ id=”attribute_pa_sizesvariable-1″ …
[DOM] Found xxx elements with non-unique id #attribute_pa_sizes<variation-2>
<input type=”radio” data-attribute-name=”attribute-pa-sizes” value=”variation-2″ id=”attribute_pa_sizesvariable-2″ …

[DOM] Found yyy elements with non-unique id #pa_sizes
<select id=”pa_sizes” class=”kt-no-select2″ name = attribute_pa_sizes” …>
<fieldset id=”pa-sizes” class=”kad_radio_variations” name=”attribute_pa_sizes …>

where ‘pa_sizes’ is my attribute name and ‘variation-1/2’ are the variations within the ‘pa_sizes’ attribute
‘xxx’ is the number of products on my archive page and
‘yyy’ is # of products * # of variations.

Can you help me get this to work?

Also, the radio boxes aren’t displaying well (taking up too much space) in the grid view. Is there anyway to show the radio boxes on the single product page, and retain the default dropdown select box on the archive page?

Thanks!
Jennifer