Customizing checkout fields on 2 columns in Woocom

问题:

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;
}

回答1:

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-first') - 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 needed)

.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;
    }
}

回答2:

I don’t understand your CSS code. I would give the text input fields a width of 100 % generally, like this:

input[type=text] {
  width: 100%;
}
input[type=text].half {
  float: left;
  width: 50%;
}

And those which shall be half size would have a class in the form’s HTML code.