Search Divi WooCommerce Extended Documentation
Search for answers or browse our knowledge base.
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:
- Go to your WordPress Dashboard.
- Navigate to Divi > Theme Options > Custom CSS.
- Paste the above code into the Custom CSS section.
- 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.