Variation Swatches and Photos – show variation title after thumbnail click

[Solace]

Solace

September 12, 2024 at 8:50 pm

I am using a thumbnail shop kit for woo product variations.

I’ve set it up so that when a user hovers the thumbnail variation, the title will show in a toolip. But now, I’d like to display the title when the thumbnail is clicked – per the attached image.

Looking at this answer: *Login to see link we should be able to do this via jquery – however, I am not 100% sure how to target the “attribute_product-options” title or caption-title. For example, I can see in my source code:

<input type="radio" value="Cool red tee shirt" id="attribute_product-options_cool-red-tee12345" name="attribute_product-options">

And the label tool tip shows up as:

<span class="kadence-wp-tips" id="label_tooltip_5ccfd16b17d511" role="tooltip" aria-hidden="true">Cool red tee shirt</span>

and also:

<img width="600" style="width: 600px" data-thumb="*Login to see link class="attachment-shop-single skip-lazy" data-caption="Cool red tee" title="Cool red tee" data-zoom-image="*Login to see link height="810" alt="Cool red tee" data-o_data-zoom-image="*Login to see link data-o_srcset="" srcset="" data-o_title="Cool red tee" data-o_data-caption="Cool red tee" data-o_alt="Cool red tee">

–

So how to get the variation title to display “on click” of one of the thumbnails? I’d like the title to show below the thumbnail as shown in the example img.

• This topic was modified 1 year, 7 months ago by Solace.