Aleš Sýkora wrote

Oxygen two columns woocommerce checkout

23. 4. 2020 in ,

Welcome to another quick fix for Oxygen Builder. Today I will take a look at the Woocommerce Checkout page. What I want to do is make it two columns. Oxygen builder is displaying it as one column long page, which is not really user friendly for me. Let’s fix it with some custom CSS.

Video

I will be using this CSS fix only for Desktop version with resolution bigger than 769px so I will use a media Query.

You will need to create custom Stylesheet in Oxygen (Go to some template edit with Oxygen > Manage > Stylesheets).

CSS Fix for two columns checkout

@media (min-width: 769px) {
    .oxy-woo-checkout .woocommerce .col2-set,
    .oxy-woo-checkout .woocommerce-page .col2-set {
        display: block;
    }
    .woocommerce.woocommerce-checkout form #customer_details.col2-set,
    .woocommerce-page.woocommerce-checkout form #customer_details.col2-set {
        width: 55%;
        float: left;
        margin-right: 4.347826087%;
    }
    .woocommerce.woocommerce-checkout form #customer_details.col2-set .col-1,
    .woocommerce.woocommerce-checkout form #customer_details.col2-set .col-2,
    .woocommerce-page.woocommerce-checkout form #customer_details.col2-set .col-1,
    .woocommerce-page.woocommerce-checkout form #customer_details.col2-set .col-2 {
        float: none;
        width: auto;
    }
    .woocommerce.woocommerce-checkout form #order_review,
    .woocommerce.woocommerce-checkout form #order_review_heading,
    .woocommerce-page.woocommerce-checkout form #order_review,
    .woocommerce-page.woocommerce-checkout form #order_review_heading {
        width: 40%;
        float: right;
        margin-right: 0;
        clear: right;
    }
}

Hope it work for you, same as for me. Let me know in comments below.

One comment on “Oxygen two columns woocommerce checkout”

Leave a Reply to Plotus22 Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
How to use Infinite Scroll in Repeater element of Oxygen Builder
If you want to use the “Load more” button when using repeater, you can do that with .JS library called “Infinite Scroll“. Load Infinite Scroll script from CDN (I am using Advanced Scripts again). For a speed purposes – use conditions to make it load only on pages where you need to use it. Current […]
Read More
Aleš Sýkora wrote
Restrict post types in taxonomy archive
29. 10. 2019 in
If you need to restrict which custom post types will display in taxonomy archive, you need to do it with some PHP. Here is how to do it.
Read More
Aleš Sýkora wrote
Woocommerce Bootstrap 4 CSS Columns Cart Fix
8. 10. 2019 in
Woocommerce uses same CSS classes for their cart columns. It makes some problems with Bootstrap 4. Easy way to fix it.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram