[Resolved] How to get rid of Woocommerce’s ugly rounded, border radius?

[Jason]

Hi Guys,

I’ve been trying all day, to get rid of the ugly rounded edges that show up on Woocommerce buttons, I included a link below.
there theme overrides GP premium theme, the CSS, and elements, I don’t know how to make the border radius square.

Any ideas? thank you

Kind regards

[David]

Hi there,

try this CSS:

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    border-radius: 0;
}

The problem with using Woocommerce Blocks, is that all the HTML and CSS they create is in no way related to the Woocommerce Templates and its associated CSS. Which sucks.

For that reason i still use Woocommerce Shortcodes as those use the same template parts, so they respect the styles from woo and the theme 🙂

[Jason]

Wow, thanks, that worked, thanks for that.

[David]

Glad to be of help

[Author]

Posts