Customize WooCommerce Cart, Checkout, and Account Pages

Sep 7, 2018

Updated Jan 2024

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

 

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

/*** 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;
}

2 Comments

  1. N

    This is by far the best guide I have found to custom CSS for woocommerce! Thank you so much!

    Reply
    • Leslie

      So glad you found it helpful!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

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