plugins - how woocommerce swatch color name when hovered or selected

I have the woocommerce plugin and the woocommerce swatches and photos extension that shows swatches instead of variations as a drop down.

When hovering over the swatches and when a swatch is selected, I would like to be able to see the name of the color above the color table.

enter link description here

like the link above

please and thank you for your help

I have the woocommerce plugin and the woocommerce swatches and photos extension that shows swatches instead of variations as a drop down.

When hovering over the swatches and when a swatch is selected, I would like to be able to see the name of the color above the color table.

enter link description here

like the link above

please and thank you for your help

• plugins
• javascript
• hacks

Share Improve this question asked Sep 10, 2013 at 5:48 anmareeanmaree 11111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I’ve got it to show the variation name in a separate div on “hover”, but not yet on “click” as there seems to be a conflict somewhere with WooCommerce.

First of all, place an empty div somewhere on the single product page in your child theme, I'm using /single-product/meta.php.

My div looks like this: <div id="colour-name"></div>.

Then you can use the following javascript to show the variation name:

$j=jQuery.noConflict();
$j(document).ready(function() { 
  $j(".swatch-anchor").hover(function() {
  var newTitle = $j(this).attr("title");
  $j("#colour-name").html(newTitle);
  },
  function() {
  var swapTitle = $j("#colour-name").html();
  $j(this).attr("title",swapTitle);
  $j("#colour-name").html("");
});});