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:
- Phone
- Address line 2
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;
}
}