how woocommerce swatch color name when hovered or selected

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("");
});});