Customize WooCommerce Cart, Checkout, and Account Pages



Sep 7, 2018



Updated May 2023



2 Comments

CSS code for changing areas of your WooCommerce cart, checkout, and account pages to match the rest of your site. Some elements that are changed:

background color of forms
form fields
placeholder text
form table borders
payment boxes on checkout
coupon box
dropdowns on checkout (ex: state)
account areas

View Demo

Notes

Since first writing this post Divi has had TONS of features added so some of these changes can be set in WooCommerce modules and Woo templates can be built with the theme builder. This code is helpful if you prefer coding yourself or need specific selectors to style parts that Divi doesn’t provide a setting for.

Most websites will not need all the included color customizations. Rather than copying/pasting all the code I recommend going through and only using what you need, considering what is best for user experience and legibility first. I’ve added comments to (hopefully) help you find what you need.

On my demo site I’ve moved the Additional Info below the Billing Details because I’ve never been a fan of all that empty space on the right. The CSS for that is on this post.

If there is an area or element you need styled but don’t see here please let me know in the comments.

The code should work on any WordPress site, not just those using the Divi theme, but adjustments might be needed.

CSS Code

[css]
/*** ADD BACKGROUND COLOR TO MAIN WOO PAGES ***/
 .woocommerce-cart #main-content, .woocommerce-checkout #main-content, .woocommerce-account #main-content { /* use .woocommerce-page INSTEAD if you want all Woo pages including shop */
     background-color: #f0f0f0;
}
/*** MAIN FORMS/TABLES ***/
 .woocommerce table.shop_table, .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register, #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment, form.checkout.woocommerce-checkout, form.woocommerce-EditAccountForm.edit-account, form.woocommerce-ResetPassword {
     border: 0; /* add a border if you prefer */
     background-color: #77A0A9; /* main background color for all forms */
     padding: 20px;
     border-radius: 0;
     color: #fff; /* probably only needed if the background is dark */
}
 .woocommerce-checkout #payment {
     padding: 0;
}
 .woocommerce-cart .cart-collaterals .cart_totals table {
     padding: 20px;
}
 .woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
     background-color: transparent;
}
/*** CHANGE COLOR OF PRODUCT LINK ON CART PAGE ***/
 .woocommerce table.shop_table a {
     color: #fff;
}
/*** FORM HEADINGS ***/
 .woocommerce-page h2, .woocommerce-page h3, .woocommerce-account h1 {
     text-transform: capitalize;
}
 .woocommerce-checkout h3 {
     color: #2A313F; /* probably only needed if the background is dark */
     font-weight: bold;
}
/*** FORMS/TABLES SECTION LABELS ***/
 .woocommerce table.shop_table th {
     color: #fff; /* probably only needed if the background is dark */
}
 .woocommerce table.woocommerce-cart-form__contents th {
     font-size: 18px;
}
/*** FORM FIELDS ***/
 .woocommerce-account input, .woocommerce-checkout input, .woocommerce-cart .input-text, #order_comments.input-text {
     background-color: transparent !important;
     color: #fff !important;
     border: 1px solid rgba(217,229,231,0.7) !important;
}
 .woocommerce-account input:focus, .woocommerce-checkout input:focus, .woocommerce-cart .input-text:focus, #order_comments.input-text:focus {
     border-color: #fff !important;
}
/*** FORM FIELD LABELS ***/
 .woocommerce form .form-row label {
     font-size: 18px;
}
/*** DROPDOWNS ***/
 .select2-container--default .select2-selection--single {
     background-color: transparent;
     border: 1px solid rgba(217,229,231,0.7);
     border-radius: 0;
     padding-top: 12px;
     height: 55px; /* height of dropdown, may need adjusting */
     margin-bottom: 0;
}
 .select2-container--default .select2-selection--single .select2-selection__arrow {
     top: 12px;
}
 .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: #fff; /* dropdown field text and placeholder color */
}
 .select2-container--default .select2-search--dropdown .select2-search__field {
     background-color: #fff !important; /* dropdown search field */
     color: #222 !important;
}
 .select2-results, .select2-search--dropdown, .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] {
     background-color: #D9E5E7; /* dropdown options */
     color: #222;
}
 .select2-container--default .select2-selection--single .select2-selection__arrow b {
     border-color: #fff transparent transparent transparent; /* teeny tiny dropdown arrow */
}
 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
     border-color: transparent transparent #fff transparent;
}
/*** DROPDOWNS SELECTED ITEM ***/
 .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
     background-color: #CBA135;
     color: #fff;
}
/*** LITTLE X TO REMOVE PRODUCT ON CART PAGE ***/
 .woocommerce a.remove {
     color: #FED766 !important;
}
 .woocommerce a.remove:hover {
     background-color: #2A313F;
}
/*** IMAGE THUMBNAILS ON CART PAGE ***/
 #add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
     width: 60px;
}
/*** YOUR ORDER SECTION ON CHECKOUT PAGE ***/
 h3#order_review_heading {
     margin-top: 3rem;
     background: #2A313F;
     padding: 20px 20px 0;
     color: #FED766;
}
 table.woocommerce-checkout-review-order-table {
     background-color: #2A313F !important;
}
/*** ADDITIONAL INFO BOX ON CHECKOUT PAGE ***/
 #order_comments.input-text {
     min-height: 20vh;
}
/*** MISC BORDERS IN FORMS/TABLES ***/
 .woocommerce table.shop_table td, .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, .woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th, #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods {
     border-color: rgba(255,255,255,0.3); /* use border: 0 instead for no borders */
}
/*** 'REQUIRED' ASTERISKS ***/
 .woocommerce form .form-row .required {
     color: #FED766;
}
/*** COUPONS AND INFO BOXES ***/
 .woocommerce form.checkout_coupon, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
     background-color: #CBA135;
}
 @media only screen and (max-width: 479px) {
     .woocommerce table.cart td.actions .coupon .button {
         width: 100%;
    }
}
/*** CHANGE HEIGHT OF COUPON FIELD ON CART PAGE TO MATCH HEIGHT OF BUTTON ***/
 .woocommerce-cart table.cart td.actions .coupon .input-text, input#coupon_code.input-text {
     padding-top: 11px; /* default is 16px */
     padding-bottom: 11px; /* default is 16px */
}
/*** 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: #385167;
     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: #385167;
}
 #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods {
     border-bottom: 0;
}
 .woocommerce-checkout #payment ul.payment_methods {
     padding: 0;
}
/*** PAYMENT BOX RADIO AND CHECKBOXES ***/
 .woocommerce-checkout #payment ul.payment_methods li input {
     visibility: hidden;
}
 .woocommerce-checkout #payment ul.payment_methods li input[type=radio] + label:before, .woocommerce-checkout #payment ul.payment_methods li input[type=checkbox] + label:before {
     position: relative;
     content: '\5b'; /* using same icon for radios and checks because I don't think it matters to differentiate here */
     font-family: 'ETmodules'; /* using ET icon font */
     font-size: 18px;
     font-weight: bold;
     top: 3px;
     margin-left: -30px;
     color: #FED766;
}
 .woocommerce-checkout #payment ul.payment_methods li input[type=radio] + label:hover:beforem .woocommerce-checkout #payment ul.payment_methods li input[type=checkbox] + label:hover:before {
     content: '\5c'; /* radio icon on hover */
     filter: alpha(opacity=40);
     opacity: 0.4;
}
 .woocommerce-checkout #payment ul.payment_methods li input[type=radio]:checked + label:before, .woocommerce-checkout #payment ul.payment_methods li input[type=checkbox]:checked + label:before {
     content: '\5c'; /* radio icon selected */
     color: #FED766;
}
 .woocommerce-checkout #payment ul.payment_methods li input[type=radio]:checked + label:hover:before, .woocommerce-checkout #payment ul.payment_methods li input[type=checkbox]:checked + label:hover:before {
     color: #FED766;
     filter: alpha(opacity=100);
     opacity: 1;
}
 .woocommerce-checkout #payment ul.payment_methods li input[type=radio] + label:hover, .woocommerce-checkout #payment ul.payment_methods li input[type=checkbox] + label:hover {
     cursor: pointer;
}
/*** PLACEHOLDER TEXT ON WOO PAGES ***/
 .woocommerce-page ::-webkit-input-placeholder {
     color: #fff !important;
}
 .woocommerce-page ::-ms-input-placeholder {
     color: #fff !important;
}
 .woocommerce-page ::-moz-placeholder { /* these are separate on purpose do not combine */
     color: #fff !important;
}
[/css]

Divi Slider Look: Use Navigation Dots as Text Links

May 2023 | CSS Styling

Sliders are known to not be great for conversion so I like to find other uses for them because visuals are so important for so many users. The demo site shows a coming soon example as well as an alternate gallery look, both using the navigation dots as text links to...

Divi Default Header Dropdown Styling

May 2023 | CSS Styling

This code styles dropdown menus on desktop. I'm using the slide effect on the dropdown (in customizer settings) but instead of having it slide in left to right I'm changing it to slide up from the bottom. A bit of space is also added between the header and the...

Move Additional Information Below Billing Details on WooCommerce Checkout Page

May 2023 | WooCommerce

This code makes the checkout form one-column instead of two and moves the Additional Information section below the Billing Details.NotesThe code should work on any WordPress site, not just those using the Divi theme, but adjustments might be needed.Alternatively you...

2 Comments

N on Nov 26, 2023 at 7:46 pm

This is by far the best guide I have found to custom CSS for woocommerce! Thank you so much!
Reply
- Leslie on Dec 1, 2023 at 10:59 am
  
  So glad you found it helpful!
  Reply

Submit a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.