Round corners on “Add to Cart” buttons?

Hi @meisha

You can do this with a little bit of custom CSS code.

Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

button, input[type="button"], input[type="reset"], input[type="submit"], .button, .widget a.button {
  border-radius: 15px;
}

You should see the changes right away, but this is just a preview for you, so you can experiment a little if you like.
Once you’re happy with it, select “Save Changes” from the top, and your changes will be applied to your site.

Thank you, Senff! This code worked great on the “Add to Cart” buttons on the Shop page, but didn’t change the “Add to Cart” buttons in the Shop section of the Home page. Do you know how I can target those buttons, as well?

Anyone know how to target the “Add to Cart” buttons on the Home page product grid? Thank you!

Hi there @meisha !

You’re right, the buttons on the homepage are slightly different, and need a different css selector.

You could try this:

a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart {
  border-radius: 15px;
}

Note the css selector has to be quite specific to override the default styles from Storefront for these buttons (from WooCommerce Blocks).

If you’re curious, you can learn more about css selectors in this guide from Mozilla. Have fun!

Thank you for your reply, Rua! I gave this one a try and it still didn’t target the those buttons. Do you have any suggestions that I could try? Thank you for the link to the CSS Selectors Guide. I’m giving a look.

Hi @meisha

Do you have a link to your site so we can see what might be the issue?

So far it isn’t live yet, but when it is, I’ll be able to post one. Thank you for asking, Senff. But the buttons are straight from the Storefront template, generated automatically when products are added. I didn’t do anything extra to them.

The code I gave earlier should apply to the standard buttons on the front page as well, at least on a standard Storefront site. It’s possible that another plugin might cause the issue here, but without being able to see your site, it’s hard to tell.

Hi,
I’have the same problem of @meisha.

I tried to deativate woocommerce css and snippet suggested, but doesn’t work.

Do you have any suggestion?

@meisha

Here you go Bud, I just figured it out(all buttons plus storefront homepage), hope it helps a lot of people!

Just add the following to additional CSS:

input,
select,
textarea,
.hentry .entry-content .wp-block-button .wp-block-button__link,
a.button,
a.button:visited,
button,
html input[type=button],
input[type=reset],
input[type=submit],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border-radius: 20px;
}

Works perfectly! I apologize that I’m only just getting around to trying it, but I’ve been tied up with other things and not at my computer much. I really appreciate your working this out, and the site looks so much better with just that change! ?? Kudos, kevink82! Thank you so much!