Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save hirejordansmith/3e3dd594e6fed0f4fe982941eca71537 to your computer and use it in GitHub Desktop.
Save hirejordansmith/3e3dd594e6fed0f4fe982941eca71537 to your computer and use it in GitHub Desktop.
Better WooCommerce Cart and Checkout Styles
/* Woocommerce Styles */
/*
A couple things to note...
1. This code was written very specifically for my base child theme so it might not work out of the box with every theme.
I have it here mostly to share with anyone who might be looking to do the same thing I was.
2. I generally add my WooCommerce CSS overrides to a custom-woo.css file then use wp_enqueue_style() to call it
so that it enqueues after the default WooCommerce Stylesheets
*/
.woocommerce-message { display: none; }
.woocommerce-cart.full-width-content .content,
.woocommerce-checkout.full-width-content .content { max-width: 100%; }
.woocommerce-cart .woocommerce table.shop_table td.actions {
border-top: 1px solid #e6e6e6;
background: #f7f7f7;
border-bottom: 0px solid #e6e6e6;
}
.woocommerce-cart .entry-content form { width: 60%; float: left; }
.woocommerce-cart .woocommerce .cart-collaterals {
width: 33%;
float: right;
}
.woocommerce-cart .woocommerce .cart-collaterals h2 { display: none; }
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals { width: 100%; }
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr th,
#add_payment_method table.cart th,
.woocommerce-cart table.cart th,
.woocommerce-checkout table.cart th,
.woocommerce-checkout table.shop_table th { color: #034997; font-size: 14px; font-size: 1.4rem; }
#add_payment_method .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
#add_payment_method table.cart td,
.woocommerce-cart table.cart td,
.woocommerce-checkout table.cart td,
.woocommerce-checkout table.shop_table td { color: #555; font-size: 16px; font-size: 1.6rem; }
.woocommerce-cart .woocommerce table.shop_table th { border-bottom: 2px solid #034997; }
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table {
border: 1px solid #e6e6e6;
margin: 0;
text-align: left;
width: 100%;
border-collapse: separate;
border-radius: 0;
border-bottom: none;
border-right: none;
margin-bottom: 35px;
border-bottom: 1px solid #e6e6e6;
}
body #add_payment_method #payment ul.payment_methods li input,
body.woocommerce-cart #payment ul.payment_methods li input,
body.woocommerce-checkout #payment ul.payment_methods li input { width: auto; margin: -2px .5em 0 0; }
body .woocommerce form .form-row .input-checkbox { width: auto; margin: -2px 5px 0 0; }
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
body.woocommerce-cart .cart-collaterals .cart_totals tr td,
body.woocommerce-cart .cart-collaterals .cart_totals tr th,
body.woocommerce-checkout .cart-collaterals .cart_totals tr td,
body.woocommerce-checkout .cart-collaterals .cart_totals tr th,
body .woocommerce table.shop_table th {
border-top: none;
border-bottom: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
text-align: right;
padding: 10px 20px;
}
body #add_payment_method table.cart td,
body #add_payment_method table.cart th,
body.woocommerce-cart table.cart td,
body.woocommerce-cart table.cart th,
body.woocommerce-checkout table.cart td,
body.woocommerce-checkout table.cart th { border-right: 1px solid #e6e6e6; }
#add_payment_method .cart-collaterals .cart_totals tr th,
body.woocommerce-cart .cart-collaterals .cart_totals tr th,
body.woocommerce-checkout .cart-collaterals .cart_totals tr th { }
.woocommerce-cart .cart-collaterals .cart_totals table th { border-bottom: 1px solid #e6e6e6; }
body .woocommerce #respond input#submit.alt,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt {
background: #72A40D !important;
font-weight: 500;
}
body .woocommerce #respond input#submit.alt:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce input.button.alt:hover {
background: #034997 !important;
}
body .woocommerce .cart .button,
body .woocommerce .cart input.button,
body .woocommerce #respond input#submit,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button { background: #034997 !important; color: #fff; font-weight: 500; border-radius: 40px; }
body .woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
float: right;
width: 100%;
display: block;
text-align: center;
margin-bottom: 0;
font-size: 1.25em;
padding: 1em;
border-radius: 40px;
margin-top: .5em;
}
body .woocommerce form .form-row-first,
body .woocommerce form .form-row-last,
body .woocommerce-page form .form-row-first,
body .woocommerce-page form .form-row-last { width: 49%; }
body .woocommerce #respond input#submit.disabled,
body .woocommerce #respond input#submit:disabled,
body .woocommerce #respond input#submit:disabled[disabled],
body .woocommerce a.button.disabled,
body .woocommerce a.button:disabled,
body .woocommerce a.button:disabled[disabled],
body .woocommerce button.button.disabled,
body .woocommerce button.button:disabled,
body .woocommerce button.button:disabled[disabled],
body .woocommerce input.button.disabled,
body .woocommerce input.button:disabled,
body .woocommerce input.button:disabled[disabled] { background: #ccc; }
body .woocommerce a.checkout-button.button.alt { border-radius: 40px; }
body .woocommerce #content table.cart td.actions .coupon,
body .woocommerce table.cart td.actions .coupon { width: 68%; }
body #add_payment_method table.cart td.actions .coupon .input-text,
body.woocommerce-cart table.cart td.actions .coupon .input-text,
body.woocommerce-checkout table.cart td.actions .coupon .input-text {
padding: 8px 6px 7px;
width: 65%;
}
body .woocommerce table.shop_table td { padding: 15px; }
body .woocommerce-checkout table.shop_table td { text-align: right;
border-right: 1px solid #e6e6e6; border-top: 0; }
.woocommerce a.remove { margin: 0 auto; }
.woocommerce-cart .woocommerce table.shop_table th.product-remove,
.woocommerce-cart .woocommerce table.shop_table th.product-name { text-align: center; }
.woocommerce-cart .woocommerce table.shop_table th.product-price,
.woocommerce-cart .woocommerce table.shop_table th.product-quantity,
.woocommerce-cart .woocommerce table.shop_table th.product-subtotal { text-align: right; }
.woocommerce-cart .woocommerce table.shop_table .cart_item td.product-price,
.woocommerce-cart .woocommerce table.shop_table .cart_item td.product-quantity,
.woocommerce-cart .woocommerce table.shop_table .cart_item td.product-subtotal { text-align: right; }
.woocommerce-checkout #add_payment_method #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout .woocommerce .col2-set { width: 47.8260869565%; float: left; margin-right: 4.347826087%; }
.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .woocommerce .col2-set .col-2 { margin-bottom: 2em; width: 100%; float: none; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { background: #fff; width: 47.8260869565%; float: right; margin-right: 0; }
.woocommerce-checkout #ship-to-different-address-checkbox { width: auto; float: right; margin-left: 15px; margin-top: 10px; opacity: 1; position: static; }
.woocommerce-checkout #ship-to-different-address label { font-size: 24px; font-weight: 700; line-height: 1; margin: 0; margin-bottom: 1em; padding: 0; text-transform: uppercase; color: #000; }
.woocommerce-checkout .woocommerce form .form-row.create-account label { padding-top: 2px; font-weight: bold; }
.woocommerce-checkout .payment-fixed { position: fixed; z-index: 9; box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 2em; left: 52%; margin-left: 0; padding: 20px; top: 0; width: 45.5% !important; -webkit-transition: padding .1s ease-in; -moz-transition: padding .1s ease-in; -o-transition: padding .1s ease-in; -ms-transition: padding .1s ease-in; transition: padding .1s ease-in; }
.product-shipping-message { font-size: 16px; text-align: center; text-transform: uppercase; padding: 10px 0px; border-top: 1px solid #139248; border-bottom: 1px solid #139248; }
body .woocommerce table.shop_table tbody th,
body .woocommerce table.shop_table tfoot td,
body .woocommerce table.shop_table tfoot th { border-bottom: none; }
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea { max-width: 100%; }
body .woocommerce .product-name a { color: #000; pointer-events: none; cursor: default; }
@media only screen and (max-width: 1139px) {
.woocommerce-cart .entry-content form { width: 64%; }
}
@media only screen and (max-width: 980px) {
.woocommerce-cart .entry-content form {
width: 80%;
float: none;
margin: 0 auto;
}
.woocommerce-cart .woocommerce .cart-collaterals {
width: 80%;
float: None;
margin: auto;
}
body .woocommerce #content table.cart td.actions .coupon, body .woocommerce table.cart td.actions .coupon { width: 100%; }
body #add_payment_method table.cart td.actions .coupon .input-text, body.woocommerce-cart table.cart td.actions .coupon .input-text, body.woocommerce-checkout table.cart td.actions .coupon .input-text { width: 48%; }
}
@media only screen and (max-width: 650px) {
.woocommerce-cart .entry-content form {
width: 100%;
}
.woocommerce-cart .woocommerce .cart-collaterals {
width: 100%;
}
.woocommerce-checkout .woocommerce .col2-set { width: 100%; float: none; margin-right: 0; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { width: 100%; float: none; }
}
@glrodasz
Copy link

Have you any demo for this?

@Tymnus
Copy link

Tymnus commented Sep 21, 2017

Tested this out. It all seems to work. But the text sizes are kind of huge on smaller screens and the button colors have poor contrast with the assigned text color.

@aravon72
Copy link

Wow!!! This is awesome!

@opicron
Copy link

opicron commented Apr 2, 2018

Thanks, good idea! I used some of it ;)

@ImChefMike
Copy link

Demo?

@powersd32
Copy link

Line 11 kicks back an error:

The code snippet you are trying to save produced a fatal error on line 11:

syntax error, unexpected '.', expecting end of file
The previous version of the snippet is unchanged, and the rest of this site should be functioning normally as before.

Please use the back button in your browser to return to the previous page and try to fix the code error. If you prefer, you can close this page and discard the changes you just made. No changes will be made to this site.

@nishitprajapat
Copy link

this code is not mobile responsive

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment