Home › Forums › WoodMart support forum › Modifications to Product Grid Hover in Theme

Modifications to Product Grid Hover in Theme

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 22, 2023 at 8:38 pm #476718

    bk5
    Participant

    Dear Support Team,

    I am reaching out to express my admiration for your theme and kindly request your assistance with it. Specifically, I am looking to make some modifications to the product grid exclusively during the “hover” state.

    Here are the changes I would like to make:

    1. When hovering over a product in the grid, I would like the “Star-rating” and “In-stock” content to be removed.

    2. Additionally, I would like the “Woo-commerce Short Product Description” to be displayed instead of the aforementioned content during the hover state.

    3. Furthermore, I would like to remove the Specification area at the bottom during the hover and replace it with the “ADD TO BASKET” and “SKU” information.

    For your reference, I have attached a screenshot. Kindly review the provided information and access to the site in the private content.

    Thank you for your attention to this matter.

    Best regards,

    Attachments:
    You must be logged in to view attached files.
    June 23, 2023 at 11:00 am #476831

    Luke Nielsen
    Keymaster

    Hello,

    1,3. Try to use the below code for help. Paste the code to Theme Settings -> Custom CSS.

    .product-grid-item:hover .wd-product-stock,
.product-grid-item:hover .star-rating,
.product-grid-item:hover .hover-content-wrap {
    display: none;
}

    2. Sorry to say but right now there is no option in Theme Settings available for that. It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

    In this case, I suggest you change the product style via Theme Settings -> Product Archive -> Product styles.

    https://prnt.sc/ojAfexhUscqY

    Kind Regards

    June 27, 2023 at 6:07 pm #477683

    bk5
    Participant

    Thank you for your assistance so far. I have successfully achieved the desired outcome using the method you suggested. However, I am encountering some issues after changing the product grid style on hover. I have attached the previous product grid style for reference, and I would like to maintain a similar appearance.

    1. The excerpt data currently appears only on hover. I would like it to be displayed below the title at all times, both on hover and in the normal product view.

    2. I would like the font size of the excerpt data to be 10px, and I prefer the font family “poppins” for it.

    3. There seems to be an issue with the price display. After selecting the new product style, only the red sale price is visible, and the regular price is no longer displayed. Could you please provide me with the CSS code to address this problem once again?

    4. The “Add to basket” button is currently missing. I would like it to be visible both on hover and in the normal product view.

    5. There is some empty space below the image gallery that appears after hovering. I would like this empty space to be eliminated.

    6. Currently, the title becomes bold only when specifically hovering over the title itself. I would like the title to become bold when someone hovers over any area of the product grid.

    Attachments:
    You must be logged in to view attached files.
    June 29, 2023 at 8:32 am #478089

    bk5
    Participant

    Waiting for response

    June 29, 2023 at 9:40 am #478109

    Luke Nielsen
    Keymaster

    Hello,

    1. In this case, you need to set an appropriate product design for showing the description by default.

    2. Please navigate to Theme Settings -> Typography -> Advanced -> create a rule with the “Custom” condition: https://prnt.sc/E3It-IxOt7zZ (.product-grid-item .wd-more-desc), then change an appropriate fields to make changes as you want.

    3. The issue appears due to your custom code from Theme Settings:

    https://prnt.sc/e4V4Ml_7Ryaz

    4. The situation is the same as with the first point, if we will show there button by default via custom code, the product design will look awful. Here is an example: https://prnt.sc/IwfW_ripzHQz

    5. Here is a code for help: 

    .product-grid-item.wd-hover-base:is(:hover,.state-hover) 
.wrapp-swatches {
    transform: translateY(102%) translateZ(0);
}

    6. In the Advanced typography create a rule with the “Product grid title” condition and define an appropriate font weight here: https://prnt.sc/P_6b1A6LprIl

    Kind Regards

    June 29, 2023 at 10:59 pm #478324

    bk5
    Participant

    Can you please clear the point 1? How can I set an appropriate product design for showing the description by default ?

    June 30, 2023 at 10:20 am #478423

    Luke Nielsen
    Keymaster

    Hello,

    Sorry, my mistake. I meant that I suggest you choose some product design from Theme Settings -> Product archive -> Product styles: https://prnt.sc/mWwh-zigLIU6

    Thanks for your time and have a great day.

    Kind Regards

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