CODEWITHSUNDEEP
phpwordpresswoocommerce
Max
Max

Reputation: 35

Checkout fields to have 2 columns in Woocommerce cart page

I have found the solution to have the following fields in-line with each other on the woocommerce checkout page - orignal question here: Customizing checkout fields on 2 columns in Woocommerce cart page

Most fields with this code become inline, however the following fields have no affect:

I think it's an error within the billing section in the code. This is the full code: 

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

if( is_cart()){ // <== On cart page only
    // Change placeholder
    $fields['billing_phone']['placeholder']     = __( 'Phone', $domain );
    $fields['billing_email']['placeholder']     = __( 'Email', $domain );
    $fields['billing_address_2']['placeholder'] = __( 'Address line 2', $domain );

    // Change class
    $fields['billing_phone']['class']     = array('form-row-last'); //  50%
    $fields['billing_email']['class']     = array('form-row-first');  //  50%
    $fields['billing_address_2']['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'] = __( 'First name', $domain );
    $address_fields['last_name']['placeholder']  = __( 'Last name', $domain );
    $address_fields['address_1']['placeholder']  = __( 'Address line 1', $domain );
    $address_fields['state']['placeholder']      = __( 'County', $domain );
    $address_fields['postcode']['placeholder']   = __( 'Post Code', $domain );
    $address_fields['city']['placeholder']       = __( 'Town/City', $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-last');  // 50%
    $address_fields['postcode']['class']   = array('form-row-first'); //  50%
    $address_fields['city']['class']       = array('form-row-first');  //  50%
}
return $address_fields;
}

Here is the css code: 

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

Upvotes: 1

Views: 2666

Answers (1)

kashalo
kashalo

Reputation: 3562

you have some mistake in your code and i believe the answer which you took those code from is for similar solution and not for your case.

So if you want to display the checkout filed inline you need only the following: 

 add_filter('woocommerce_checkout_fields', 'custom_checkout_billing_fields', 20, 1);
 function custom_checkout_billing_fields($fields)
 {
$domain = 'woocommerce';
// Remove billing address 2
unset($fields['billing']['billing_address_2']);

// 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_address_1']['class'] = array('form-row-first'); //  50%
$fields['billing']['billing_postcode']['class'] = array('form-row-last'); //  50%
$fields['billing']['billing_company']['class'] = array('form-row-wide'); // 100%

// Change placeholder this below is just if you wanto to change the place holder  you can remove theme if you don't want to change that
$fields['billing']['billing_phone']['placeholder'] = __('Telefon', $domain);
$fields['billing']['billing_email']['placeholder'] = __('Email', $domain);
$fields['billing']['billing_company']['placeholder'] = __('Firmanavn', $domain);

return $fields;
}

in above code only five filed which we have change the classes if you want the rest let me know or you can add them by yourself by looking for each filed name and change the class in the way you want

Remember there is block of code in this function that change the placeholder if you don't want them you can simple delete them

Upvotes: 1

Related Questions