Customize WooCommerce Cart, Checkout, and Account Pages
This tutorial provides some CSS code for changing your WooCommerce cart, checkout, and account pages to match the rest of your site and customize it a bit.
I’ve added comments to the code to help guide what changes what but you might find it a bit difficult to tweak if you’re new to CSS and if you’re trying to do more than just change colors. Plus we’re dealing with tables and they can be a pain in the butt. Post questions in the comments and I’ll be happy to help as best I can.
Here are a few screenshots of what can be changed, these are from my own site…
Elements that are changed:
- background color of forms
- styling of form fields
- placeholder text
- tables in forms
- payment box on checkout (e.g. PayPal and Stripe box backgrounds)
- buttons – the code here changes ALL woo buttons (in case you don’t want them to use your customizer button settings)
- coupon field
- dropdowns on checkout (e.g. state)
- “my account” pages included
- other little things
css code
The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.
/*****************************************************/
/******** WOO CART / CHECKOUT / ACCOUNT PAGES ********/
/*****************************************************/
/*** MAIN FORMS BACKGROUND COLOR ***/
.woocommerce table.shop_table,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment,
#customer_details,
h3#order_review_heading,
form.woocommerce-EditAccountForm.edit-account {
border: 0 !important; /* you can add a border if you prefer */
background: #f5f5f5; /* this is the main background color for all forms */
}
/*** FORM AND OTHER PADDING ***/
#customer_details,
form.woocommerce-EditAccountForm.edit-account,
h3#order_review_heading {
padding: 30px 20px;
}
/*** ADJUST FORM ROUNDED EDGES ***/
#customer_details {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.woocommerce-checkout-review-order table.shop_table {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/
.woocommerce-account input,
.woocommerce-checkout input,
#order_comments.input-text {
background-color: #f5f5f5 !important;
color: black !important; /* not the placeholder, the text color when typed */
border: 0; /* optional */
}
/*** COUPON FIELD ONLY ***/
.woocommerce-page #coupon_code.input-text { /* if you want your coupon different from other fields */
background-color: black !important;
color: blue !important;
font-size: 16px !important; /* if you don't want the default giant font on the coupon field */
}
/*** PLACEHOLDER TEXT ON ALL WOO PAGES ***/
.woocommerce-page ::-webkit-input-placeholder {
color: red !important;
}
.woocommerce-page :-ms-input-placeholder {
color: red !important;
}
.woocommerce-page ::-moz-placeholder {
color: red !important;
}
.woocommerce-page :-moz-placeholder { /* this isn't the same as above don't delete */
color: red !important;
}
/*** THIS COMPENSATES FOR SHIP TO DIFF ADDRESS FIELD NOT ALIGNING ***/
h3#ship-to-different-address {
margin-top: -3px;
}
/*** ALL WOO BUTTONS ***/
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button {
text-transform: capitalize !important;
background: #ffa500 !important;
color: #222 !important;
}
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page button.button:hover {
background: #00adad !important;
color: #fff !important;
}
/*** PAYMENT BOX ON CHECKOUT ***/
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background-color: #15bf86;
color: #fff;
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: #15bf86;
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 0;
}
/*** BORDERS AND TABLES ***/
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
border: 0;
}
.woocommerce table.shop_table td,
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th,
.woocommerce-checkout #main-content .cart-subtotal td {
border-top: 2px solid #fff;
}
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background: transparent;
}
.woocommerce-checkout #content-area table th,
.woocommerce-checkout #content-area table td {
padding-left: 20px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
font-size: 18px;
}
/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
background: #b33f62 !important;
}
/*** ORDER NOTES ON CHECKOUT ***/
.woocommerce-checkout .woocommerce form .form-row textarea {
height: 150px; /* height of optional notes box */
}
/*** STATE DROPDOWN SELECT COLOR ***/
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background: #ffa500;
}
/*** QUANTITY BOX ***/
.woocommerce #content .quantity input.qty,
.woocommerce .quantity input.qty,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-page #content .quantity input.qty,
.woocommerce-page .quantity input.qty {
color: #fff !important;
background: #222 !important;
height: 46px; /* you may need to change this based on your font size */
}
Notes:
- Font sizes greatly affect how fields and other elements look, so keep that in mind if you see that yours doesn’t look exactly like mine.
- This code is only using WooCommerce classes so it can be used on non-Divi themes, but might need adjustments.
Thank you!!! I have been searching forever for this information!!
Awesome!! Glad it helped 🙂
I know nothing about coding, so do I just copy this whole code and paste?
Great help!
Thanks, glad it was helpful!
Fantastic thank you so much
Hello,
This is a question not quite on styling but on customizing the Cart page so I’m hoping you might help.
I am trying to remove PayPal buttons from my Cart page (but not my Checkout page!) and wondering if you can help. Firstly, would I be able to do this from appearance > customize > additional css or should I be looking somewhere else? Secondly, I found this code from another help forum:
.page-id-2906 #wc_braintree_paypal_container {
display: none;
}
Is this what I should be looking to add?
Great content and thank you so much!
Hi Erik! Yes you would need to add CSS code and it can go in the customizer > additional CSS box, but the code you found wouldn’t work because it’s for a specific page on that person’s site. I can get you some code though, I just need a link to your site so I can inspect the code 🙂
Actually just try this:
.woocommerce-cart #wc_braintree_paypal_container {
display: none;
}
For some reason that worked great on our test site and then didn’t work on our live site. I will work on finding out why the live site isn’t functioning the same as the test but this was incredibly helpful! Thank you so much!
If there is a place I can leave a review or anything else to support you I would be happy to. You have great content here and I was so happily surprised for your quick response.
Try adding the code to Divi Theme options > custom css box instead. It really shouldn’t make a difference but Divi can be finicky sometimes so it’s worth a try. And thanks for the kind words, I’m just happy people find something useful 😀
I’m in awe, truly! I have been trying every dang code I can think of, using inspect element, and every tut I can find on the web, and my coupon wrapper in the cart still stubbornly stays the gray color. I want the input boxes to stay gray, the the wrapper around it to be #333. Any advice?
It’d be great if I could get the “Cart Totals” wrapper to be #333 as well, and Cart Totals text to be #d4d4d4, but at this point, it’s the coupon wrapper that’s driving me the most bonkers lol
Hi Mandi, sorry for the delay in responding.
When you say coupon wrapper do you mean the border? Because I see it being pink not grey so not sure I’m understanding what you want to change, or maybe you figured this one out already.
https://ibb.co/WWDVTmp
For the cart totals wrapper try this:
.cart_totals table {
border-color: #333;
}
as far as the text in the cart that’s a little different as not all of that content is wrapped in a p tag or span, the parts in the table are all created in different ways. You can email me at agirlandhermac @ gmail if you want me to get you some code for that but I want to be sure I’m understanding what you’re wanting.
Hi!
I’m having a problem with the CSS with checkout form and cart of woocommerce, everything looks unformatted. I tried to use your code, but did not help ;/ Could you please help?
Check links: https://inhalation-summit.com/index.php/event/?add-to-cart=540
https://inhalation-summit.com/index.php/checkout/
Best regards, Diogo
Hi Diogo! Where are you putting the CSS code? When I add my first snippet for “main forms background color” with a background of red it is showing up correctly on your site so the code should work: https://ibb.co/dgsg1r5
Do you have an area for custom CSS or are you adding it to a child theme?
Hi Leslie,
I have managed to put the code! Everything looks great! Thank you!
Oh great!! Thanks for stopping by my site 🙂
This is fabulous, but I can’t get it to work. Using Avada Theme and I’m wondering if it’s overriding everything I’m trying to do. Any way to check for a conflict?
Hi Andrew! I’m just guessing here but I think because you’re using Woo plugins like WooCommerce Appointments and WooCommerce Deposits there may be styling from those overriding. Or it could be a ThemeFusion/Avada thing as it does have it’s own Woo styling.
I can see my first snippet you added but your classes are slightly different. You can use these for form backgrounds but other stuff may require using inspect to find the right class of each element you want to change.
.woocommerce-message {
padding: 30px;
color: white;
}
form.woocommerce-cart-form {
background: orange;
}
.cart-collaterals .shipping-coupon .coupon {
background: green;
}
.cart_totals {
background: red;
}
you can see my changes here and change the colors to your own: https://ibb.co/k1v4kwx
Wow – you’re good 🙂 I can’t find anything in Avada, but I did find this, which is all I’m trying to change (background of checkout form fields). I changed it to black, but really just trying to darken the existing light lavender for contrast. There’s a lot going on but it’s the background of the input fields on the checkout process – https://blueskysage.com/checkout/
#comment-input input, #comment-textarea textarea, #tribe-bar-form input[type=text], .avada-select .select2-container .select2-choice, .avada-select .select2-container .select2-choice2, .avada-select-parent select, .chzn-container .chzn-drop, .chzn-container-single .chzn-single, .comment-form-comment textarea, .gform_wrapper .gfield input:not([type=”radio”]):not([type=”checkbox”]):not([type=”submit”]):not([type=”button”]):not([type=”image”]):not([type=”file”]), .gform_wrapper .gfield select, .gform_wrapper .gfield textarea, .gform_wrapper .gfield_select[multiple=multiple], .input-text, .main-nav-search-form input, .post-password-form label input[type=”password”], .search-page-search-form input, .searchform .fusion-search-form-content .fusion-search-field input, .select2-container–default .select2-selection–single, .select2-dropdown, .tribe-bar-disabled #tribe-bar-form .tribe-bar-filters input[type=text], .wpcf7-captchar, .wpcf7-form .wpcf7-date, .wpcf7-form .wpcf7-number, .wpcf7-form .wpcf7-quiz, .wpcf7-form .wpcf7-select, .wpcf7-form .wpcf7-text, .wpcf7-form textarea, input.s, input[type=”email”], input[type=”number”], input[type=”password”], input[type=”text”], select, textarea {
background-color: #000;
}
Hmm if you mean the dropdown select you can try this:
.avada-checkout .select2-container–default .select2-selection–single {
background: black;
}
Your code above is targeting more than just Woo forms so you may want to check your whole site to see if it’s affecting anything you don’t want it to.
If that’s not what you mean your form fields look blue to me so it looks like you figured that part out (?)
It’s that light blue background that I’m trying to change. Haven’t figured it out yet 🙁
Okay email me because I think I’m misunderstanding which part but I’m sure I can figure it out for you agirlandhermac @ gmail 🙂
Brilliant! Thanks so much Leslie. I was wondering is it possible to change the text “Basket Totals” in the basket page to “Total Price” using a snippet in the Custom CSS area?
Hi Ron 🙂 Actually there is a way to do that! Try this:
.woocommerce-cart .cart_totals h2 {
font-size: 0 !important;
}
.woocommerce-cart .cart_totals h2:before {
content: “Total Price”;
font-size: 26px;
line-height: 1em;
}
I did it on my site so you can see it live or here: https://ibb.co/D1Msckq
Thank you so much! Very helpful.
I appreciate your work with Divi and DiviChat.
Thanks so much Monica! And thanks for listening to DC <3
Hi Leslie,
Thanks so much for this! Super helpful.
I don’t see here how to change the colors of a few things. The background of the ‘Paypal’ area or on the top of the table where it says Product and Total on the Checkout Page.
On the Cart form it’s at the top where it says ‘Product, Price, Quantity, and Total’ as Well as where it says ‘Cart Totals’
I see where you have the other background color area but I can’t figure out these other spots and the inspector is stubborn about selecting these areas.
Thanks so much!
Barry
Hi Barry! Sorry for the delay in responding, for the PayPal area you can use this:
.woocommerce-checkout #payment div.payment_box {
background: red; /* PayPal box */
color: white;
}
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: red; /* triangle */
}
For the other bits you asked about those areas are made up of tables and weren’t really designed for individual cell targeting so they can be a pain in the butt. Here’s a shot of how I grabbed some of the table parts in inspector: https://ibb.co/896xQL4
so the code would look something like this
.woocommerce-cart th.product-name {
background: red;
}
.woocommerce-cart th.product-price {
background: yellow;
}
.woocommerce-cart th.product-quantity {
background: orange;
}
By the way I’m adding the .woocommerce-cart before the selectors so that it only affects this table on the cart page but it’s up to you if you want to remove that part. When you want to target something on only the checkout page you would use .woocommerce-checkout before your selectors like I did with the PayPal code.
Let me know if that helps, thx for using my snippets 🙂
How to styling (drop Down) payment box on checkout, i m using Porto Theme & Woocoomece Multistep Checkout Wizard,
Screenshot-
https://prntscr.com/oox2c0
Like This- Drop Down
https://prntscr.com/oox624
Hi Bunty, you would need to inspect the code and tweak via CSS adding in those radio icons and other styling, I’ve never used that theme or plugin but it should be possible. They may have documentation on what code to change, otherwise you would need to hire a developer or designer to tweak it if you’re unable to as that’s more help than I’m able to offer in the comments here.
Hi, Thank you so much for this script!
I was wondering how to fix the following:
The form field that reads, “House number and street name” is possible to indent the text a bit inwards. It’s too close to the border. Or just get rid of it completely.
How can I add a secure badge image under proceed to checkout or under PayPal button?
And lastly I would like to make the asterisk slightly bigger and change the color.
Thank you
Hi Wil, thanks for stopping by! Try these…
Q1 (address and apt fields):
input#billing_address_1,
input#billing_address_2 {
padding-left: 10px;
}
Q2
button#place_order.button {
margin-bottom: 110px !important; /* adds space below button, change as needed */
}
button#place_order.button:after {
content: “”;
display: block;
margin: 0;
background: url(“https://placehold.it/200×50”); /*change URL */
position: absolute;
top: 75px; /* moves image down, change as needed */
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 200px;
height: 50px;
opacity: 1;
cursor: default;
}
Sample: https://ibb.co/hVLHMfS
Q3
.woocommerce form .form-row .required {
color: blue;
font-size: 25px;
line-height: 25px;
}
Also I’d retype any quotes just to be safe.
I’ve added a screenshot and changed the code a bit for Q2 🙂
Hello, How can do customize / large size font word of “change address” of cart page by css. This word is into cart totals, shipping row. I want to its size large then now of the website.
Hi Shankar, try this (I added more than font size just so you could tell it’s being targeted):
.woocommerce-cart .cart-collaterals .shipping-calculator-button {
text-transform: uppercase;
color: red;
font-size: 22px;
}
Sample: https://ibb.co/pQZXX3y
I’m wondering how I can edit the login/registration page in woocommerce. I’d like to change the size of the input fields instead of having them be very long. I’d also like to move the login in button so it’s above the “remember me” checkbox. Thanks in advance!
Hi David! I’m so sorry for the delay in getting to this. I usually reply within a few days with code but have had a hectic few weeks. If you haven’t figured it out yet you can use the following code snippets…
For the login field length you can reduce the size of the entire form like this:
.woocommerce-form-login {
max-width: 400px;
}
You can use % instead of px but that would make it look too skinny on mobile so px is probably best.
To move the login button above “remember me” try this:
.woocommerce-form-login .form-row {
display: flex;
flex-direction: column;
}
.woocommerce-form-login .woocommerce-form-login__rememberme {
order: 2;
}
You’ll see after you do that your login button is now stretched out. If you like that then I would suggest adding this to remove the little space to the right of the button:
.woocommerce-form-login .woocommerce-button.woocommerce-form-login__submit {
margin-right: 0;
}
If you don’t want the button the length of the form box then add this and adjust the number:
.woocommerce-form-login .woocommerce-button.woocommerce-form-login__submit {
max-width: 200px;
}
Here’s a screenshot from a demo site: https://ibb.co/Wy4Xq82
Thanks so much! These codes worked perfectly! You’re a real guru. I’ve got two more questions for you.
What is the code need to change the border color of the input fields within the login form? And the actually text within those fields. For instance I’d like the box around where the “username” goes to be black, and the text to be black as well. Thanks for your help!
Great, glad it worked for you!
This will change those on that form:
.woocommerce-form-login.login input {
border-color: blue;
color: red;
}
If you want that for every field on that page (login and register) use this selector instead:
.woocommerce-account input
Screenshot from your store: https://ibb.co/4T5sbhw
I’m just using those colors so it’s easy to see the changes. I’ve tested all this code on your site (inc the second selector) and it worked for me.
Life saver thank you!!!
Hi! How can I get rid of the striped background shading that’s showing up in the table on my cart page? I copied and pasted your CSS code and was able to change one of the stripe colors to white, but I’d like the each product row to have a white background, rather than every other row being gray. Any help is much appreciated!
https://unfetteredletters.net/cart/
Hi G! So sorry for the wait on this, I’m afraid I somehow missed your question.
Try this:
.woocommerce table tbody>tr:nth-child(odd)>td,
.woocommerce table tbody>tr:nth-child(odd)>th {
background-color: #fff;
}
Screenshot: https://ibb.co/bgM22gW
Hi! I’m loving the post and all the code has worked spot on except for the “Add to Cart” button on the single product page. The background hover color still works but the button color remains blue no matter what I try. Mind giving me a few tips on how to fix that if at all possible?
Thanks and I’m enjoying your work!
Hi Nathan! If I’m understanding correctly this should work:
.single-product button.single_add_to_cart_button.button.alt {
color: red;
}
Screenshot from a demo site: https://ibb.co/pwV7mss
Honestly girl! Thank you for putting this out here, I appreciate
Could you put out a code that would hide, the categories on woocommerece
Hi Innocentia! If you mean on the single product pages themselves you can use this:
.product .product_meta {
display: none;
}
Thanks! Were you able to figure out where to put this code? If you’re not using Divi you can put it in your theme customizer > custom CSS.
Just want to thank you! I was so fustrated with woocommerce not matching the rest of my site and no obvious way to change it.
This page let me finish my site – https://www.otarshop.com/ 🙂
Keep doing what you’re doing!
Thanks Richard!! So glad it helped 🙂
On my checkout page I am wanting to change the color of the box with the wording: Have a coupon? Click to enter your code. It is currently a light blue and I need it to be more of a teal, #62bcb6. I hope you have something that helps.
Hi Randy! I’m so sorry for the delay in responding, I’ve been on vacation. It looks like you figured it out though, I see that box is now the hex color you provided. Let me know if I’m misunderstanding or if you needed help with something else. By the way I got a Cricut machine for Christmas so I may be one of your customers in the future lol 🙂
Never really comment on posts. But hey thanks for the code. Works great and I appreciate you!
Thank you, glad to help! 🙂
THANKS FOR THE CODE!!
I only want to change the button background and font colours so grabbed the code under
/*** ALL WOO BUTTONS ***/
found the values to change and changed background top black and font to white, all worked great except the font colour of the Proceed to Checkout button in the basket which is black. Can you guide me to what I need to do to correct this, please?
Hi Richard, my sincere apologies for taking so long to respond. I’m not sure if you already fixed this, I can’t seem to figure out how to add something to your cart but this is the exact class for the Proceed to Checkout button:
.wc-proceed-to-checkout a.checkout-button {
color: red !important;
}
I have applied the css code and placed it in the child theme. While it’s working well with the cart page, it’s still giving me a lot of headache on the checkout page. It’s not centered on the interface both on desktop and mobile. Secondly, it has a background color I didn’t intend to have. What could be the problem? Please refer to these two pages: https://golaserengraving.com/shop/basket and https://golaserengraving.com/shop/checkout-page/.
Hi Charles, thanks for your patience! I’m afraid I’m not sure what it is you want centered, can you give me a bit more detail? For the unintended background color I think you mean the teal color in the paypal box. For that you’ll need to change the colors pointed out here: https://ibb.co/hmRfZPx
Hi, thanks for the great code fixes! I have another Problem I can’t seem to figure out and would love your help please! I’m trying to change the little red ‘x’ button that removes a product from the cart. It is a red x that becomes a white x on hover. I just want to change the colours really!
Thanks for your help!
Hi Rick, thanks for checking out my site! It looks like you already figured out how to change the red x color in the cart, let me know if there’s another place on your site I’m not seeing 🙂
Hi Lesley
I had a tech guy remove American Express from my Account page where you add method of payment. Now the Paypal button has been removed and he can’t get it back. Paypal is working on the other pages, but we just can’t add it as a method of payment on the account page. Is this a CSS issue and can you help?
Hi Terri! That doesn’t sound like a CSS issue to me and I can’t look at your site and inspect since it’s behind a maintenance page, but I’m inclined to think it has to do with a Woo setting or which PayPal addon you’re using. There are several when I look at Woo documentation (PP Standard, PP Checkout, etc), and I logged into 3 different Woo sites of mine (live and demo) and I don’t see PP as an option to have as a saved payment method on the account page so it may have been tied to the Amex addon/plugin. I don’t believe adding a standalone PP account (no cc attached) is an option but I could be wrong, and because PP can be used with credit cards display settings may change based on whatever PP addon you’re using. I’m sorry if all that doesn’t help but if you haven’t already I’d go through your Woo settings one by one and make sure there isn’t something there, and if there isn’t my next step would be to look through your specific addon documentation. Thanks for stopping by my site! 🙂
Hi Leslie,
Wondered if you could help, please. The text on my coupon box at the top of the checkout is white as well as the text box. I’d like to change the text box colour to #f1d2cd but I can’t find the right place in the CSS for it. I’ve tried your coupon code above but it’s not worked for me. Thanks in advance
Hi Ellie! Try this code and let me know if it doesn’t work for you:
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-info a {
color: #f1d2cd !important;
}
thanks ! its works