Home › Forums › WoodMart support forum › Add to cart, wishlist hover effect – custom css

Add to cart, wishlist hover effect – custom css

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 15, 2024 at 6:37 pm #605252

    Maki889
    Participant

    Hello, does anyone know how I can customize the hover effect for the icons (add to cart, wishlist, view products) with custom css?

    I would like to achieve the following:

    1. icons not in the center but on the right side.
    2. make icons smaller (only 80% of the current size)
    3. instead of a fade up effect I would like it to increase from 0% to 100% opacity as soon as you move the mouse over the product image. More like a Fade IN effect.
    4. remove the white background of the icons so that only the icons themselves are visible
    5. change the color to dark blue if you hover over the icon

    Attached is a picture of how it currently looks.

    I appreciate any help!

    Attachments:
    You must be logged in to view attached files.
    October 16, 2024 at 12:21 pm #605429

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the page URL so I will check and give you a possible solution?

    Best Regards

    October 16, 2024 at 6:33 pm #605557

    Maki889
    Participant

    Sure, here are some examples:

    October 17, 2024 at 11:20 am #605726

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. change the code as per your requirements.

    .product-grid-item .wd-action-btn.wd-style-icon {
    --wd-action-icon-size: 15px;
}
.product-grid-item.wd-product.wd-hover-icons .wd-buttons .wd-action-btn {
    left: 70px !important;
    position: relative;
}
.product-grid-item.wd-product.wd-hover-icons .wd-buttons {
    background: transparent;
    box-shadow: none;
}
.product-grid-item.wd-product.wd-hover-icons .wd-buttons .wd-action-btn>a {
    color: #b4b4f8;
}

    Best Regards

    October 17, 2024 at 7:38 pm #605886

    Maki889
    Participant

    Nice, almost exactly what I wanted.

    However, on hover the icons still move from bottom to top instead of fading in. Can this be changed?

    And the icons are now on the right position but since they are shifted as absolute number (70px from the left) there is a weird displacements when switching product grid from 3 to 4.

    October 17, 2024 at 9:01 pm #605890

    Maki889
    Participant

    And on Product grid with 6 columns one icon even disappears.

    October 18, 2024 at 10:42 am #605991

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

    Best Regards

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