Home › Forums › WoodMart support forum › product box border

product box border

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 13, 2018 at 12:33 pm #62679

    plytep
    Participant

    Dear Wood Mart support.

    I would like to put the border of product box on product page when mouse hover only.
    Please advise.

    Thank you.
    Best regards,
    Plytep

    June 13, 2018 at 1:14 pm #62698

    Elise Noromit
    Member

    Hello,

    Please add this CSS to Theme Settings > Custom CSS

    .product-image-wrap:hover{
    border:1px solid red;
}

    Replace “red” with the color your needs.

    Best Regards

    June 13, 2018 at 3:13 pm #62755

    plytep
    Participant

    Dear Woodmart support.

    I try the css code that you advise already.
    It works on single product page.
    But I want to do it on for example archive product page or shop page.
    Please help again.

    Thank you.
    Best regards,
    Plytep

    June 13, 2018 at 4:41 pm #62763

    Elise Noromit
    Member

    Hello,

    Please try this CSS: 

    .product-grid-item:hover {
    border: 1px solid red;
}

    Best Regards

    June 14, 2018 at 7:17 am #62875

    plytep
    Participant

    Dear Woodmart support.

    I try code
    .product-grid-item:hover {
    border: 1px solid red;
    }
    It shows the red border very shortly and suddenly override by the zoom-in or bigger product box.
    Now, my website is in my PC. if you need to access my website. I can wait until i transfer my website to actual host server then I will message to you.

    Thank you.
    Best regards,
    Plytep

    June 14, 2018 at 7:46 am #62885

    Elise Noromit
    Member

    Hello,

    As soon as your site on the host, please provide URl and access.

    Best Regards

    June 15, 2018 at 8:06 am #63031

    plytep
    Participant

    Dear Woodmart support.

    May be we can solve the problem from the picture attached.
    I have two issues as below.

    1. I want to show border of product box as in the picture attached (big read rectangle).
    2. I need to hide the product description as in the picture attached (small read rectangle).

    Thank you.
    Best regards,
    Plytep

    Attachments:
    You must be logged in to view attached files.
    June 15, 2018 at 8:27 am #63036

    Elise Noromit
    Member

    Hello,

    I need page URL I have provided CSS above and tested it in our testing environment, it works properly. However, you say that it does not work. This is the issue of decor and it can wait till you move your site on the live host.

    Contact us with your site URL

    Best Regards

    June 18, 2018 at 3:24 pm #63564

    plytep
    Participant

    Dear Woodmart support.

    I want to put a border for product grid in category page or shop page as in the red rectangle in the picture attached.

    I tried this code as your suggestion but it still does not work.
    .woodmart-hover-base.hover-ready.state-hover, .woodmart-hover-base.hover-ready:hover {
    z-index: 20;
    webkit-transform: translateY(-5px) translateZ(0);
    transform: translateY(-5px) translateZ(0);
    border: 1px solid red;
    }
    Please help again.

    Thank you.
    Best regards,
    Plytep

    Attachments:
    You must be logged in to view attached files.
    June 18, 2018 at 4:59 pm #63583

    Elise Noromit
    Member

    Hello,

    Now it is fixed. I have replaced the code and it works.

    Best Regards

    June 19, 2018 at 7:42 am #63681

    plytep
    Participant

    Dear Woodmart.

    It is working fine.

    Thank you.
    Best regards,
    Plytep

    June 19, 2018 at 7:54 am #63686

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

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

The topic ‘product box border’ is closed to new replies.