Adding text of color selection

We want to add text that descries the color selected whenever a swatch is selected.

This is how it shows nows: https://www.dropbox.com/s/g24acyyj7pq8l86/Screen%20Shot%202019-10-31%20at%204.30.16%20PM.png?dl=0

This is how we want it to show: https://www.dropbox.com/s/cwj7si1k63n83xv/Screen%20Shot%202019-10-31%20at%204.30.16%20PM%202.png?dl=0

We noticed that the image of product is wrapped in an li element that gets the class “.selected”. It seem like there should be some kind of Java or Jquery we could use to take whatever element has selected class (for this example Black), and then have the minor from data-wvstooltip=”Black” show up on screen.

<li data-wvstooltip=”Black” class=”variable-item image-variable-item image-variable-item-black selected” title=”Black” data-value=”black”><img alt=”Black” src=”https://publicstreetwear.com/wp-content/uploads/2019/10/BTKA_1570648212533234_b5507e493bd129a7857bf310ad90a5-200×300.jpeg”></li>

Could you help us determine the javascript, or any other method, that would allow us to grab this data attribute and display it on screen? Thanks

Shamser Suzon

Hi Erik,

Unfortunately, the feature is not currently available..

​But it’s great idea. I’ve added it as feature request. I’ll discuss this feature with my team and make it available with the coming version.

Cheers!