Customizing Woocommerce Checkout 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

Adding the CSS

The first step, which we’re not going to cover here, is to set a custom class called “custom-checkout” to your checkout shortcode.  This is done differently depending on what theme you are using, so you will have to search around for this if you are unsure.

Next, it is time to add the following CSS to your website.  If you are using Divi then you can do this in your “Theme Options” and “Custom CSS” section.  If you are using another theme then you will probably have an option somewhere to add custom CSS to.

Web Hosting
/****************CHECKOUT***************/
.woocommerce form .form-row {
    width: 100% !important;
}
.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea {
    width: 100% !important;
    padding: 8px;
}
.woocommerce #payment .form-row select, .woocommerce-page #payment .form-row select {
    width: 100%;
    height: 30px;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    float: left;
    width: 100%;
}
.custom-checkout h3 {
    background-color: #165f1c;  /****CHANGE TO COLOR YOU WANT TO USE FOR TITLE BACKGROUND ****/
    width: 45%;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 50px;
    color: #FFF;
    float: right;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    padding: .6180469716em;
    background-color: #f2f2f2;
    color: #43454b;
    outline: 0;
    border: 0;
    -webkit-appearance: none;
    border-radius: 2px;
    box-sizing: border-box;
    font-weight: 400;
   border:solid 2px #e4e4e4;
}

#wc_checkout_add_ons {
    width: 45%;
    float: right;
    text-align: center;
}

@media screen and (min-width: 980px) {
.woocommerce-shipping-fields h3, .woocommerce-billing-fields h3 {width:100%;}
.woocommerce .col2-set, .woocommerce-page .col2-set {
 width: 45%;
 float: left;
}
.woocommerce-checkout-review-order{
 width: 45%;
 float: right;
}
}
@media screen and (max-width: 979px) {
.custom-checkout h3 {
 width: 100%;
}
}
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

4 Comments

  1. Darrel

    Great Post! Thanks for that

  2. Birdie

    This is AWESOME! Thank you for posting it.

  3. alireza

    thanks buddy. so handy. how can I change the font family as well?

    • Web Limitless

      The best way to do that would be within the theme settings and change it for everything. Alternatively you can just do it on the checkout page with something like this

      —-
      .woocommerce table.shop_table td {
      font-family: serif;
      }
      ——

      However, the CSS attribute for text isn’t the same on the entire page and you may have to change a few CSS attributes to include font-family….

Submit a Comment

Let's Work Together!

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

2 + 14 =