Home › Forums › WoodMart support forum › Make the “add to cart” button smaller on mobile

Make the “add to cart” button smaller on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 27, 2024 at 3:52 pm #561302

    designmono
    Participant

    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.

    April 30, 2024 at 12:55 pm #561991

    Hung Pham
    Keymaster

    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,

    April 30, 2024 at 1:22 pm #562007

    designmono
    Participant

    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?

    April 30, 2024 at 1:25 pm #562009

    Hung Pham
    Keymaster

    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,

    April 30, 2024 at 1:34 pm #562012

    designmono
    Participant

    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?

    April 30, 2024 at 3:44 pm #562100

    Hung Pham
    Keymaster

    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,

    April 30, 2024 at 4:33 pm #562137

    designmono
    Participant

    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 🙂

    May 1, 2024 at 10:19 am #562309

    Hung Pham
    Keymaster

    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
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Make the “add to cart” button smaller on mobile’ is closed to new replies.