How to Change the Mouse Hover Shadow Effect on the Shop Page

Introduction

By default, BuddyBoss does not provide a built-in option to customize or remove the mouse hover shadow effect on products displayed on the Shop page. If you’d like to adjust this styling—such as removing the shadow entirely or applying a custom effect—you can easily do so using a simple CSS snippet added through Theme Options to control the Shop Page Hover Shadow Effect.

Custom Workaround

1. In your WordPress admin, go to BuddyBoss > Theme Options.
   
2. Under Custom Codes, toggle Enable CSS to On.
   
3. Paste the following CSS:
   

.woocommerce li.product:hover {

  box-shadow: none;

}

4. Click Save Changes.
   

Note: Any custom code is considered “custom work.” Please review our Support Policy for more details.

Troubleshooting and FAQs

Q: The hover shadow is still showing, what should I check?

A:

• Clear any caching plugin or CDN cache.
  
• Make sure the CSS was pasted correctly with no missing brackets or semicolons.
  
• Confirm that Enable CSS is turned on before saving.
  

Q: Can I customize the shadow instead of removing it?

A: Yes. Replace none with your preferred shadow value. For example:

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

Q: Will this affect other WooCommerce pages?

A: This rule targets WooCommerce product items and will apply wherever those product cards appear, including the Shop page and related product listings.

Q: Who can I contact for further assistance?

A: You can submit a support ticket through your BuddyBoss account dashboard for personalized help.