Check out field sizes after removing “order notes”

  • Resolved edaas

    (@edaas)


    3 years, 4 months ago

    Hi community,

    I searched the forum and found some threads but so for nothing working for me.

    Problem: Fields for order details at check out are only half size of the screen.
    → https://snipboard.io/JDZ2Bw.jpg

    What did I do so far?

    After some problems with the size of the order detail fields at check out I fixed it with:

    .woocommerce-checkout .col-1, .woocommerce-checkout .col-2 {
    max-width: 100%;
}
.woocommerce-checkout .form-row {
    display: block;
}

    Then I removed the “Order Notes” section on the right side by adding in functions.php

    add_filter( 'woocommerce_enable_order_notes_field', '__return_false', 9999 );
add_filter( 'woocommerce_checkout_fields' , 'remove_order_notes' );

function remove_order_notes( $fields ) {
     unset($fields['order']['order_comments']);
     return $fields;
}

    Thx for help!

    • This topic was modified 3 years, 4 months ago by edaas.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Hi @edaas ??

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

    /* Display Checkout fields full width */
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
    width: 100% !important;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
    display: none !important;
}

    Results:

    https://www.screencast.com/t/pv9WVjPOyBiS
    ?
    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).

    Cheers! ??

    Thread Starter edaas

    (@edaas)

    Thanks a lot @gabrielfuentes for the fast and working answer!

    I will check out the w3school.

    Best!
    Jan

    Plugin Support abwaita a11n

    (@abwaita)

    You’re welcome, glad to hear it works well!

    If you have any further questions, feel free to create a new thread.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Check out field sizes after removing “order notes”’ is closed to new replies.