How do I change the colors for order total and place order?

How do I change the font color for “order total” and also the background color of “Place Order” button in checkout?

Thank you!

Hello,

Could you please send a screenshot of the text you want to change color? And here is custom CSS snippet to change place order button background

.woocommerce .place-order input[type=submit] {
    background: red;
    border-color: red;
}

Regards

Here’s what I want to change. I’d like to be able to use the hex code for each so that it matches the color of the top bar.

http://stitchgalleryone.com/wp-content/uploads/2016/11/Screen-Shot-2016-11-07-at-2.28.27-PM.png

Try this one

.woocommerce .place-order input[type=submit] {
    background: #338dd2;
    border-color: #338dd2;
}

.woocommerce-checkout-review-order-table tfoot .order-total td .amount {
color:#338dd2;
}

That worked perfectly! Thanks. Do you have the code for changing the colors for these in the wishlist with a hex code?

http://stitchgalleryone.com/wp-content/uploads/2016/11/Screen-Shot-2016-11-07-at-3.00.36-PM.png

Maybe you would better change your primary color via Theme Settings -> Styles & Colors? It will change this color globally.

Thanks. One last question. How do I change the colors for “add to cart” buttons and the other graphics in this image.

BTW, your support is fantastic!

http://stitchgalleryone.com/wp-content/uploads/2016/11/Screen-Shot-2016-11-07-at-3.47.21-PM.png

Here is a code snippet for this task

.single-product-content .cart .button {
	background-color: #338dd2;
    border-color: #338dd2;
}

.single-product-content .cart .button:hover,
.single-product-content .cart .button:focus {
	background-color: #1d6fad;
    border-color: #1d6fad;
}

.woocommerce-message .button {
	background-color: #338dd2;
    border-color: #338dd2;
}

.woocommerce-message .button:hover,
.woocommerce-message .button:focus {
	background-color: #1d6fad;
    border-color: #1d6fad;
}

.woocommerce-message, 
.wpcf7-mail-sent-ok,
.wishlist_table tr td.product-stock-status span.wishlist-in-stock {
  border-color: #338dd2;
  color:#338dd2;
} 

Thank you. The code works.

Can you also look at this screenshot? I’d like to control the color of these buttons and areas:

http://stitchgalleryone.com/wp-content/uploads/2016/11/Screen-Shot-2016-11-08-at-7.14.09-AM.png

Another question – is there code to control the background color of the main mobile menu? The default is black.

Here is code for this request

.woocommerce .cart-actions .coupon .button {
  background-color: #338dd2;
  border-color: #338dd2;
}
.woocommerce .cart-actions .coupon .button:hover,
.woocommerce .cart-actions .coupon .button:focus {
    background-color: #1d6fad;
    border-color: #1d6fad;
}
.wishlist_table tr td.product-add-to-cart>.add_to_cart.button {
  background-color: #338dd2;
  border-color: #338dd2;
}
.wishlist_table tr td.product-add-to-cart>.add_to_cart.button:focus, 
.wishlist_table tr td.product-add-to-cart>.add_to_cart.button:hover {
    background-color: #1d6fad;
    border-color: #1d6fad;
}
.cart-widget-side .widget-heading {
  background-color: #1d6fad;
}
.widget_shopping_cart .buttons a {
  background-color: #338dd2;
  border-color: #338dd2;
  color:white;
}
.widget_shopping_cart .buttons a:focus, 
.widget_shopping_cart .buttons a:hover {
    background-color: #1d6fad;
    border-color: #1d6fad;
    color:white;
}
.mobile-nav {
  background-color: #338dd2;
}
.mobile-nav .sub-menu-dropdown ul {
  background-color: #1d6fad;
}
.mobile-nav .sub-menu-dropdown ul:before {
    color:#1d6fad;
}
.mobile-nav ul li a,
.mobile-nav .icon-sub-menu,
.mobile-nav .searchform {
      border-color:rgba(255,255,255,.15);
}

Regards

[Author]

Posts