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.
like the link above
please and thank you for your help
Topic hacks plugins Wordpress javascript
Category Web
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("");
});});
Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.