Customizing checkout fields on 2 columns in Woocommerce cart page

Question

After the new WooCommerce update checkout fields columns are acting strangely. That are my checkout fields customizations:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
unset($fields['billing']['billing_address_2']);
    return $fields;
}

// Checkout placeholder
add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
function override_billing_checkout_fields( $fields ) {
    $fields['billing']['billing_phone']['placeholder'] = 'Telefon';
    $fields['billing']['billing_email']['placeholder'] = 'Email';
    $fields['billing']['billing_company']['placeholder'] = 'Firmanavn';
    return $fields;
}

add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
function override_default_address_checkout_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'Fornavn';
    $address_fields['last_name']['placeholder'] = 'Efternavn';
    $address_fields['address_1']['placeholder'] = 'Adresse';
    $address_fields['state']['placeholder'] = 'Stat';
    $address_fields['postcode']['placeholder'] = 'Postnummer';
    $address_fields['city']['placeholder'] = 'By';
    return $address_fields;
}

I have set that checkout fields in a custom cart page visible here.

My question: With php or with CSS styling, is there a way to have:

firstname and lastname fields in 2 columns next to each other;
Address 1 field full width at 100% (I have unset address 2 field);
State field full width at 100%;
zip code and city fields in 2 columns next to each other;
phone and email fields in 2 columns next to each other.

I tried this CSS, but it just makes 100% for everything. How do I target just these above?

p.form-row-first, p.form-row-last {
    width: 100%;
    float: left;
}

Woocommerce 3.3.1 is a new recent major update still with some bugs. A lot of themes and plugins are not still compatible with it. This version is making a lot of changes in woocommerce templates and a big part of design and styling is now enabled in the customizer… So all that changes make issues like yours. You should roll back to stable version 3.2.6 and always wait 2 or 3 months before updating a production website to a major woocommerce version. — LoicTheAztec
Thanks a lot Loic. Always here to save the day. The above CSS makes all the fields 100% width. But how do I get phone + email and city + zip and first name + last name next to each other? I have 7 fields in my shop: Firstname, lastname, address, zip, city, phone, email. I want firstname + lastname next to each other 50% width each, address by it self 100% width, zip code + city next to each other 50% width each and phone + email next to each other 50% width each. I cannot find the unique ID in CSS allowing me to do it like this. Either I have all fields 50% or 100%.. — eMikkelsen
Hello, sorry for the late answer I had internet issues. I tried your code and everything works fine, except: It removes the placeholder for email+phone and email+phone are not 50% width? Also it removes the placeholder from company_address. — eMikkelsen
I have used the code of your question for the placeholders… so you can adapt it from your working code... Everything is explained in my answer, and you should be able to get it working. — LoicTheAztec

LoicTheAztec LoicTheAztec · Accepted Answer · 2018-02-15T07:23:56

First the correct php code where you rename your label fields and where you set the classes that are involved in the width styling.

Explanations about classes in Woocommerce checkout fields:

array('form-row-first') - Field will be displayed in 1st column (so at 50% of width).
array('form-row-last') - Field will be displayed in 2nd column (so at 50% of width).
array('form-row-wide') - Field will be displayed in both columns (so at 100% of width).

The code:

add_filter( 'woocommerce_checkout_fields' , 'custom_checkout_billing_fields', 20, 1 );
function custom_checkout_billing_fields( $fields ){

    // Remove billing address 2
    unset($fields['billing']['billing_address_2']);

    if( is_cart()){ // <== On cart page only
        // Change placeholder
        $fields['billing']['billing_phone']['placeholder']   = __( 'Telefon', $domain );
        $fields['billing']['billing_email']['placeholder']   = __( 'Email', $domain );
        $fields['billing']['billing_company']['placeholder'] = __( 'Firmanavn', $domain );
        
        // Change class
        $fields['billing']['billing_phone']['class']   = array('form-row-first'); //  50%
        $fields['billing']['billing_email']['class']   = array('form-row-last');  //  50%
        $fields['billing']['billing_company']['class'] = array('form-row-wide');  // 100%
    }
    return $fields;
}

add_filter('woocommerce_default_address_fields', 'custom_default_address_fields', 20, 1);
function custom_default_address_fields( $address_fields ){
    
    if( ! is_cart()){ // <== On cart page only
        // Change placeholder
        $address_fields['first_name']['placeholder'] = __( 'Fornavn', $domain );
        $address_fields['last_name']['placeholder']  = __( 'Efternavn', $domain );
        $address_fields['address_1']['placeholder']  = __( 'Adresse', $domain );
        $address_fields['state']['placeholder']      = __( 'Stat', $domain );
        $address_fields['postcode']['placeholder']   = __( 'Postnummer', $domain );
        $address_fields['city']['placeholder']       = __( 'By', $domain );

        // Change class
        $address_fields['first_name']['class'] = array('form-row-first'); //  50%
        $address_fields['last_name']['class']  = array('form-row-last');  //  50%
        $address_fields['address_1']['class']  = array('form-row-wide');  // 100%
        $address_fields['state']['class']      = array('form-row-wide');  // 100%
        $address_fields['postcode']['class']   = array('form-row-first'); //  50%
        $address_fields['city']['class']       = array('form-row-last');  //  50%
    }
    return $address_fields;
}

Now the related CSS code should be (by default) something like this:
(Try to remove !important to see if it's really necessary)

.form-row-wide,
.form-row-first,
.form-row-last {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
}

@media (min-width: 768px){
    .form-row-first {
        width: 47% !important;
        float: left !important;
        margin-right: 5.8% !important;
        clear: both !important;
    }
    .form-row-last {
        width: 47% !important;
        float: right !important;
        margin-right: 0 !important;
        clear: none !important;
    }
}

Customizing checkout fields on 2 columns in Woocommerce cart page

2 Answers