Support » Plugin: WooCommerce » customer_details in one column

  • Resolved Heidi D

    (@hadeeldabbagh)


    On the checkout page, how do I move the Additional Information section below Billing Details? I would like all the customer details to show up in one column. I don’t have any shipping details as it’s a digital product.

    I tried the below CSS but it’s not working:
    .page-id-41 .woocommerce .woocommerce-checkout #customer_details .col-1,
    .page-id-41 .woocommerce .woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Mirko P.

    (@rainfallnixfig)

    Hi @hadeeldabbagh,

    It sounds like you want to move the Order notes section at the bottom of the Billing details, right?


    Link to image: https://i.imgur.com/7IlYCtG.png

    I’ve found an interesting article that can let you achieve that by adding a PHP snippet to your functions.php file. Here’s the direct link:

    https://www.businessbloomer.com/woocommerce-move-order-notes-checkout/

    You could use a plugin such as Code snippets for that.

    I hope this helps.

    Thread Starter Heidi D

    (@hadeeldabbagh)

    Thank you! this partly addresses the need. The code snippet moves the order notes below billing details, but the column where the order notes field used to be is still there (as empty space) and takes up half the width of the section.

    I would like the fields in the first column to take up the entire space previously taken by two columns rather than get squashed to half the space.

    The reason I’m doing this is that I have moved the order-review and payments section to the right side of the checkout page to optimize on real estate and minimize scrolling.

    Plugin Support Mirko P.

    (@rainfallnixfig)

    Hi @hadeeldabbagh,

    Thanks for getting back.

    I’ve tried the snippet on my test site and it worked smoothly. Now, it seems you would need to further customize the checkout page. Can you please share a link to your checkout so we can have a look and where possible provide further guidance?

    Cheers!

    Thread Starter Heidi D

    (@hadeeldabbagh)

    Thanks for helping look into it! I put the link to a test product in the website URL of my profile.

    Plugin Support Mirko P.

    (@rainfallnixfig)

    Hi @hadeeldabbagh,

    Thanks for sending over your website URL.

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:

    
    
    /* Billing details checkout page - full width column */
    .oxy-woo-checkout .woocommerce .col2-set .col-1, .oxy-woo-checkout .woocommerce-page .col2-set .col-1, .oxy-woo-checkout .woocommerce .col2-set .col-2, .oxy-woo-checkout .woocommerce-page .col2-set .col-2 {
    width: 100% !important;
    }
    /* Billing details checkout page - remove second column */
    .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    display: none;
    }
    
    

    This is what I’m seeing on my end:


    Link to image: https://snipboard.io/SOPHuc.jpg

    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Hope this helps.

    Thread Starter Heidi D

    (@hadeeldabbagh)

    Thanks so much @rainfallnixfig that looks perfect!

    Appreciate the recommendation on the CSS tutorials, I’ve been trying to learn through trial and error so far, but definitely worth going through a more structured approach 🙂

    Have a great weekend!

    Plugin Support Mirko P.

    (@rainfallnixfig)

    Hey @hadeeldabbagh,

    You’re most welcome! Thanks for confirming it worked.

    I’ll go ahead and close the thread but if you have any further questions please open a new topic.

    Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘customer_details in one column’ is closed to new replies.