Capslock10 Capslock10 - 2 months ago 10
CSS Question

Making checkout billing address fields filling at 100% of the available width

I removed the shipping address on WooCommerce checkout page, and would like the billing address fields to fill all the website space.

Like this:

enter image description here

How can I do something like this?

Thanks.

Answer

You could try to add this in the styles.css file of your active child theme or theme:

.woocommerce-page.woocommerce-checkout .col2-set .col-1 {
    float: none !important;
    width: 100% !important;
}

Or alternatively in the function.php file of your active child theme or theme:

function custom_checkout_css_styles() {
    ?>
        <style>.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {float: none !important;width: 100% !important;}</style>
    <?php
};
add_action( 'woocommerce_checkout_before_customer_details', 'custom_checkout_css_styles' );

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This is tested and works.

Comments