Product box shadow on hover

  • Resolved mawima

    (@mawima)


    2 years, 3 months ago

    Guess solution is easy, but after searching have no clue – I have Ocean WP, Elementor Pro and Woocommerce. Each product on a list / archives is in a box, which when hovered over has a shadow. I would like to turn the box shadow off. Kindly please advise what would be the solution.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @mawima,

    Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    .woocommerce ul.products li.product:not(.product-category) .product-inner:hover:before {
    -webkit-box-shadow: unset !important;
    -moz-box-shadow: unset !important;
    box-shadow: unset !important;
}

    Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

    Note 1: If you want to set the border on hovered style on the gallery section, please add the CSS below:

    .woocommerce ul.products li.product:not(.product-category) .woo-product-gallery{
    border-top: 1px #ffb443 solid;
    border-left: 1px #ffb443 solid;
    border-bottom: 1px #ffb443 solid;
    margin: -1px 0;
}

    Note 2: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, don’t forget to click on the regenerate all assets file and data in Elementor > Tools.

    I hope that helps.
    Best Regards

    Thread Starter mawima

    (@mawima)

    Dear Shahin,

    Works great – thank you.

    Regards,
    TS

    You’re very welcome. Glad I could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Product box shadow on hover’ is closed to new replies.