• No products in the cart.

How to move payments on WooCommerce checkout to right column

When building a custom WooCommerce Checkout page, you may need to move the payments elsewhere. The same process can be applied to any section within the WooCommerce Checkout.

How to move it simply just using CSS?

  • Go to your webiste WP-ADMIN and select Appearance -> Customize
  • Go to Custom CSS
  • Paste code below:
#customer_details {
    width: 100%;
    display: block;
}
#customer_details .col-md-6 {
    width: 50%;
    float: left;
}
#customer_details .col-md-6:nth-child-2, #order_review_heading {
    display: none;
}
#order_review {    
    display: block;
    float: left;
    width: 50%;
}
@media only screen and (max-width: 768px) {
#customer_details .col-md-6 {
    width: 100%;
    float: left;
}
#order_review {    
    display: block;
    float: left;
    width: 100%;
}
}
  • Publish

See the video how to make it: