Customize WooCommerce Cart, Checkout, and Account Pages

Sep 7, 2018 | Woo | 0 comments

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..

Customize WooCommerce Cart, Checkout, and Account Pages
Customize WooCommerce Cart, Checkout, and Account Pages
Customize WooCommerce Cart, Checkout, and Account Pages
Customize WooCommerce Cart, Checkout, and Account Pages

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;
}
/*** THIS COMPENSATES FOR FIELDS NOT ALIGNING ***/
h3#ship-to-different-address {
	margin-top: -3px; 
}
/*** 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;
}
/*** COUPON / 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:

  • My link color and button styling are set in the customizer.
  • 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 most likely it will need adjustments.