In this post we will look at how to change the default 1 column checkout page of the popular Avada WordPress theme into a 2-column layout.

We only have to make some modification to the stylesheet, no template editing is required.

Simply add the code below to the end of the theme’s style.css file. This modification works with Avada version 3.9 to 4.x

/*Checkout Page Custom Css Code By wpletsgo.com*/
.woocommerce-checkout .woocommerce .avada-checkout-no-shipping {
  float: left;
  width: 49%;
}
.woocommerce-checkout .woocommerce .woocommerce-content-box.full-width {
  float: right;
  width: 49%;
   border: medium none;
   background:#F6F6F6;
}
#order_review table{
        background:#fff;
}
.woocommerce-checkout .woocommerce .avada-checkout-no-shipping  .col-1{
        border:none !important;
}
#order_review .shop_table thead tr th {
  font-family: arial;
  font-size: 14px !important;
  font-weight: bold;
  padding: 16px 20px !important;
  text-transform: uppercase;
}
#order_review table td {
  padding: 16px 20px !important;
}
#order_review_heading {
  border: medium none;
  display: table;
  font-family: arial;
  font-size: 15px !important;
  font-weight: bold;
  margin: 0 auto !important;
  text-decoration: none !important;
  text-transform: uppercase;
}
#place_order {
  background: teal none repeat scroll 0 0 !important;
  width: 100%;
  color: #ffffff;
}
.woocommerce-billing-fields.avada-select > h3 {
  font-family: arial !important;
  font-size: 15px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}
.checkout .payment_methods li {
  margin-bottom: 12px !important;
}
.payment_methods li img {
  float: none !important;
  margin: 0 18px;
  width: 40%;
}
.woocommerce-billing-fields label {
  color: #000;
}
@media screen and (max-width: 1024px) {
.woocommerce-checkout .woocommerce .avada-checkout-no-shipping {
  float: none !important;
  width: 100%;
}
.woocommerce-checkout .woocommerce .woocommerce-content-box.full-width {
  width: 100%;
   border: medium none;
   background:#F6F6F6;
}
}
/*Checkout Page Custom Css Code By wpletsgo.com*/

So what does it do?

The above css code turns the default Avada checkout layout into a 2-column layout. This layout is more user-friendly and perhaps helps to improve your conversion rate by making the checkout process easier for your customers. This modification will also retain the responsive design of the theme.

See before – after screenshots

Avada checkout full page
Modified Avada checkout page