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
Share Improve this question asked Sep 10, 2013 at 5:48 anmareeanmaree 1111 bronze badge1 Answer
Reset to default 1I’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("");
});});