Home › Forums › Basel support forum › Product Hover – Product Labels

Product Hover – Product Labels

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 27, 2018 at 8:51 am #54941

    alex_under
    Participant

    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.
    April 27, 2018 at 11:14 am #54984

    Elise Noromit
    Member

    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

    April 27, 2018 at 11:38 am #54990

    alex_under
    Participant

    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

    April 27, 2018 at 1:40 pm #55023

    Elise Noromit
    Member

    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

    April 27, 2018 at 2:02 pm #55038

    alex_under
    Participant

    “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

    April 27, 2018 at 8:15 pm #55092

    Artem Temos
    Keymaster

    Hi,

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

    Regards

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)