Updated:
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 🙂
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