Search Divi WooCommerce Extended Documentation

Search for answers or browse our knowledge base.

All Topics
Print

How to fix the “Add to Cart” button size changing on hover in WooCommerce?

If you’re experiencing an issue where the “Add to Cart” button changes size on hover in WooCommerce, it is caused by additional padding applied by WooCommerce CSS on hover. Follow these steps to fix it:

Solution:
Add the following custom CSS to your Divi Theme Options:

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {  
    padding: 10px !important;  
}  

Steps to Add Custom CSS:

  1. Go to your WordPress Dashboard.
  2. Navigate to Divi > Theme Options > Custom CSS.
  3. Paste the above code into the Custom CSS section.
  4. Save the changes.

This will override the default WooCommerce styles and prevent the button size from changing on hover.

Note:
This behavior is due to WooCommerce’s default CSS and is not directly related to the Divi Extended modules.

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Table of Contents