[theoutdoorarmoryParticipant]

Hi,

My website is theoutdoorarmory.com

I’d like to change the look of the “add to cart” button, specifically the color — make the background gray and then the font color white. I attached screen caps.

thanks in advance.

[ChristianModerator]

Hey there,

Please add the code below in your Appearance > Customize > Custom > CSS

.product .x-btn, .product .button, .product [type="submit"] {
    color: #fff;
    border-color: gray;
    background-color: gray;
    box-shadow: 0 0.25em 0 0 #5C5C5C,0 4px 9px rgba(0,0,0,0.75);
}

Hope that helps. 🙂

[theoutdoorarmoryParticipant]

worked like a charm thanks!

another one: how can I make the product titles NOT all caps? as you can see from the screen cap the title is all caps. this is also the case with the product description, if you scroll down.

[theoutdoorarmoryParticipant]

Hi this is perfect thanks more power to you.

Another question:

I’d like to change the “Add to cart” button same as the one I screen capped — Red background, white font, all caps, FLAT design.

How do I do that? thanks

[ChristianModerator]

Sorry for the confusion. Please add the code in your Appearance > Customize > Custom > CSS

.product h1, .product h2, .product h3, .product h4, .product h5, .product h6, .product .h1, .product .h2, .product .h3, .product .h4, .product .h5, .product .h6 {
    text-transform: capitalize;
}

If you want site-wide implementation, there’s a setting for that in Appearance > Customize > Typography > Headdings > Uppercase

For the red button, please add the code.

.product .x-btn, .product .button, .product [type="submit"] {
    color: #fff;
    border:0;
    background-color: red;
    box-shadow: none;
}

Thanks.

[theoutdoorarmoryParticipant]

Thank you so much! is there anyway I can remove the cart icon beside “Add to cart” ? I just want the button to display “Add to card” without the cart icon.

Hope this could be done. 🙂

[ChristianModerator]

You’re welcome. Please add the code

.woocommerce .button.product_type_simple:before, .woocommerce .button.single_add_to_cart_button:before {
    display: none;
}

Hope that helps. 🙂

[theoutdoorarmoryParticipant]

This is amazing!

One more thing: How can I change the “Apply Coupon” “Update Cart” and “Proceed Checkout” buttons the same format as my “Add to cart” button?

See screen cap of the buttons I want to change into red, white and flat.

Thanks

[Rue NelModerator]

Hello There,

To change the Apply coupon , update cart and procedd to checkout buttons, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce .cart-collaterals .checkout-button,
.shop_table [type="submit"] {
    color: #fff;
    border: 0;
    background-color: red;
    box-shadow: none;
    padding: 0.9em 1.125em 0.813em;
}

We would loved to know if this has work for you. Thank you.

[theoutdoorarmoryParticipant]

Wooohoo this is perfect thank you so much!

[Rue NelModerator]

You’re always welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.

[theoutdoorarmoryParticipant]

Hi, it seems like there’s one left un-edited, which is the “Return to Shop” button. How do I apple the changes from the others (ie Add to Cart, etc.) to that button?

[ZeshanMember]

Hi there,

To style that button too, replace last provided CSS code with this:

.woocommerce .cart-collaterals .checkout-button,
.shop_table [type="submit"],
.button.wc-backward {
    color: #fff;
    border: 0;
    background-color: red;
    box-shadow: none;
    padding: 0.9em 1.125em 0.813em;
}

Thank you!

[theoutdoorarmoryParticipant]

Hi, one last thing: “Place order” button upon checkout is still green, as can be seen on the screen capture attached.

How do I change this to red background/white font, please?

THanks

[FriechModerator]

Hi There,

Please update the css code given above to this:

.woocommerce .cart-collaterals .checkout-button,
.woocommerce-checkout .place-order .button,
.shop_table [type="submit"],
.button.wc-backward  {
    color: #fff;
    border: 0;
    background-color: red;
    box-shadow: none;
    padding: 0.9em 1.125em 0.813em;
}

Hope it helps, Cheers!

[Author]

Posts