Make the “add to cart” button smaller on mobile

Hi,

Could you please explain how to decrease the font size and padding of “add to cart” buttons on the shop page / product archive? None of CSS codes I try seem to work.

Hi designmono,

Thanks for reaching to us.

First of all, take my apologies for the delay in answering.

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-product.wd-hover-fw-button div.wd-add-btn{
	text-align: center;
}

.wd-product.wd-hover-fw-button div.wd-add-btn>a{
	width: auto;
}

Regards,

Thank you, I can adjust the width and height now, but I also need to decrease the font size, e.g. set it to 10px. Adding the font size CSS property doesn’t change anything (adding !important doesn’t help either).

Could you please suggest how to change the font size?

Hi designmono,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-product.wd-hover-fw-button div.wd-add-btn .add-to-cart-loop span{
	font-size: 10px;
}

Regards,

Thank you! Now I’m trying to resize button (or change top&bottom padding) but I’m only able to increase it and can’t find a way to decrease it. With the smaller font the button is basically too big.

Could you please help with this too?

Hi designmono,

Please remove all above Custom CSS and use below one:

.wd-product.wd-hover-fw-button div.wd-add-btn{
	text-align: center;
}

.wd-product.wd-hover-fw-button div.wd-add-btn>a{
	width: auto;
}

.wd-product.wd-hover-fw-button div.wd-add-btn .add-to-cart-loop span{
	padding: 6px;
	font-size: 10px;
}

a:is(.btn,.button,button,[type="submit"],[type="button"]){
	min-height: 20px;
}

Regards,

Wonderful, thank you!

I’ve just deleted the first part of the code which is supposed to align the text – that seems unecessary as the text is centered anyways.

The topic can be closed now 🙂

Hi designmono,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts