Product Hover – Product Labels

Dear Sirs,

I would like to change the look and use of the products.

1) I want to change the position of the labels ( new / sale / out of stock )
I want to move it at the <swatches-wrapper> in order to move with the thumbnails of the variations when hovered.
See Screenshot1.jpg, Screenshot2.jpg, Screenshot3.jpg

2) Can I add hover change at the variations thumbnails ( now you need to click them ).
I want to have Hover and Click function
See Screenshot4.jpg

Attachments:

You must be logged in to view attached files.

Hello,

Try to use this code to move labels in the bottom:

.labels-rectangular {
    bottom : 40px!important;
    left: 0;
}

Change this value bottom : 40px; as per your needs and add it to Theme settings > Custom CSS

As for changing variation on hover, there is no such an option unfortunately.

Best Regards

I don’t just want to move it at the bottom.

I want them to be in the swatches div in order to move with it.

Look at the screenshots. There is movement of the labels with the swatches

Hello,

In this case, you will need template customization. Such issue is not solved with CSS. Please delete the CSS code provided earlier if you do not need it.

Best Regards

“In this case, you will need template customization”

Can you guide me which file should I edit?
I know php in order to make the changes

Hi,

This product style template file can be edited in woodmart/woocommerce/content-product-base.php.

Regards

[Author]

Posts