Remove standard css classes of checkout field wrappers in Woocommerce

Admin 1
Viewed 2903

I'm building an eCommerce website based on Wordpress and Woocommerce. So far everything is going great, but on the last page of the chec-out (billing and shipping), the standard classes of Woocommerce are interfering with the markup of Bootstrap 4.

Every field in the billing form is wrapped by a

tag with at least the class form-row (i.e.):

class="form-row form-row-first"

This causes the forms to '"fall" of of the standard BS grid.

Anyone knows how to remove these wrapper classes?

Thanks a bunch,

Cheers, Nicky

checkout bootstrap-4 woocommerce wordpress php
2 Answers

To clean the class="form-row form-row-first" from the <p> tag fields container, the following code will do the job on checkout fields:

add_filter('woocommerce_form_field_country', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_state', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_textarea', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_checkbox', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_password', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_text', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_email', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_tel', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_number', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_select', 'clean_checkout_fields_class_attribute_values', 20, 4);
add_filter('woocommerce_form_field_radio', 'clean_checkout_fields_class_attribute_values', 20, 4);
function clean_checkout_fields_class_attribute_values( $field, $key, $args, $value ){
    if( is_checkout() ){
        // remove "form-row"
        $field = str_replace( array('<p class="form-row ', '<p class="form-row'), array('<p class="', '<p class="'), $field);
    }

    return $field;
}

add_filter('woocommerce_checkout_fields', 'custom_checkout_fields_class_attribute_value', 20, 1);
function custom_checkout_fields_class_attribute_value( $fields ){
    foreach( $fields as $fields_group_key => $group_fields_values ){
        foreach( $group_fields_values as $field_key => $field ){
            // Remove other classes (or set yours)
            $fields[$fields_group_key][$field_key]['class'] = array(); 
        }
    }

    return $fields;
}

Code goes in function.php file of the active child theme (or active theme). Tested and works.

user_37307540

Why not use css. Simple css can fix this issue.

.woocommerce .form-row {
    margin-left: 0;
    margin-right: 0;
}
user_26119550
Related