Oxygen two columns woocommerce checkout

2 min read / Oxygen Builder, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: CSS Fix for Woocommerce checkout page in Oxygen Builder.

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.

2 comments