Customizing Woocommerce Shopping Cart Page with CSS

Woocommerce has its limitations if you are not a hardcore coder, but with some simple CSS we can make it look a little bit different!

We are going to look at changing the “Checkout Page” around a bit and giving it a little nicer look.

*** This has been tested on Divi 3.0, so if you’re having trouble getting it to work then shoot us an email below and we’ll help you out ***

From This

To This

Divi is an extremely flexible theme, however, when it is paired with Woocommerce it has its limitations. Thanks to some simple CSS, we can get a completely new look!

To use the code below you’re going to go to your shopping cart page and input the code up top in this area

 

 

 

 

 

 

 

This is where you will input the CSS below.  Places that you can edit your buttons are commented in the code.  If you have questions then don’t hesitate to comment below or send us an email.

Web Hosting
/******** SHOPPING CART PAGE - OVER 980 PX ONLY *****/

@media screen and (min-width: 980px) {
.checkout-button {
    width: 100% !important;
    float: right !important;
      /***** Checkout Button, style how you would like *****/
    color:#FFF !important;
}
.woocommerce-page.et_pb_button_helper_class button.button {
    /***** Checkout Button, style how you would like *****/
    color:#FFF !important;
}




.cart_totals {
    float: right !important;
    width: 32% !important;
    border: solid 2px #f2f2f2;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.woocommerce-cart .wc-proceed-to-checkout {
    padding: 1em 0 0 0;
}

.woocommerce-page.et_pb_button_helper_class a.button {
    margin-bottom: 0px !important;
}



.woocommerce table.shop_table {
    float: left !important;
    width: 63% !important;
}


.woocommerce-page table.cart td.actions .coupon {
    float: left;
    width: 100%;
}


.woocommerce-page.et_pb_button_helper_class button.button, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
    width: 60%;
    margin-bottom: 10px;
}




/***** Heading, change according to taste ***/
.cart_totals h2, .shipping_calculator h2 {
    background-color: #2e4960 !important;
    color: #FFF !important;
    padding: 5px !important;
    text-align: center !important;
    border-radius: 3px !important;
    margin-bottom: 0px !important;
}
}
Web Hosting

Conclusion

Woocommerce is amazing, but can be very frustrating if you are wanting to change around the look of the pages.  Thanks to CSS we have a little bit of an option with how we can make it look.

Divi WordPress Theme

0 Comments

Submit a Comment

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

Let's Work Together!

Get started with a free consultation today.  We'll guide you in the right direction and ensure your business succeeds.

8 + 8 =

Get Your FREE Easy Guide to Marketing Online

Get Your FREE Easy Guide to Marketing Online

Sign up for our newsletter and get the easiest guide to marketing online that you will find.  You will also be entered into our monthly draws for free websites and will be the first to know when we start our 7-day internet business boot camp!

You have Successfully Subscribed!