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

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
Child posts menu for custom post type parent item
1. 2. 2021 in
This code will help you display menu of childs on current post. For example: Product 1 = parent has those child pages: – Product usage– How to– Disclaimer– Calculator When you put this child items menu in your template, it will show all childs of product 1 on all child pages and also on product […]
Read More
Aleš Sýkora wrote
Taxonomy Post Count for Custom Post Type
16. 5. 2019 in
Add this snippet to your functions.php or create your own plugin...
Read More
Aleš Sýkora wrote
Change WordPress login logo with code
6. 11. 2020 in
Need to change wordpress login logo? Use this code in custom plugin or in Code Snippets plugin. Change the background image url to your image and Link Title to your site name for example.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram