Button CSS

Hi @jaygoodrich,

I want to change the corners of the buttons to square instant of 4px rounded ones. When I add the button CSS that I found related to the page to my WP Custom CSS, nothing happens though when targeting it in my browser it works.

I checked your page that you mentioned, and I did not see the PayPal buttons on there. Checking the Cart page I did see the button. You can try this CSS to see if it works, under Appearance > Customize > Additional CSS:

.paypal-button.paypal-button-color-gold:hover, .paypal-button.paypal-button-color-silver:hover {
  border-radius: -10px;
}

You can adjust the radius to 0 or more if needed. Please let me know if this works! I was able to get the buttons to look square.

Same happened for me. It worked when I tested the change in my browser but when I implemented it in the Custom CSS, again, no change. It’s like the CSS is being blocked.

Hi @jaygoodrich

Try adding !important to CSS that does not appear:

.paypal-button.paypal-button-color-gold:hover, .paypal-button.paypal-button-color-silver:hover {
border-radius: -10px !important;
}

Hope that helps.

Hi John,

I tried that as well and it didn’t work. I am stumped.

Jay

Hi @jaygoodrich

You may want to contact your theme author at this point as it’s likely that the theme is forcing a specific styling. You can share with them our suggestions to maybe help along the way.

I personally don’t think it’s a theme issue, but have sent them an email. I have added CSS to square all the corners of all the buttons on the cart page and within Woo with zero issue. It’s like PayPal is overriding the CSS from their level or something.

Hi @jaygoodrich

You’re right, you’d have to use JavaScript to apply the override since it’s PayPal’s scripts that are applying the styles after the page loads. This will require customizations that we cannot help with here.

We recommend one of the services listed on this page who can assist with any custom development work:

https://woocommerce.com/customizations/