4

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

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • You can do something complicated by editing the internal files of these templates or you can just override in `css` and save yourself the headache. – Serg Chernata Aug 28 '18 at 14:39

2 Answers2

8

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.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • 2
    Awesome! Thanks! –  Aug 29 '18 at 15:39
  • Hey. I'm trying to get the values contained in the form elements by the following code.. – Rohit Nair Sep 16 '18 at 05:58
  • add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' ); function addBootstrapToCheckoutFields($fields) { foreach ($fields as &$fieldset) { foreach ($fieldset as &$field) { foreach ($field['class'] as $text) { echo ($text . '
    '); } $field['class'][] = 'form-group'; $field['input_class'][] = 'form-control'; } } return $fields; }     – Rohit Nair Sep 16 '18 at 05:58
  • This gives me a list of all the used classes expect for "form-row" I get the form-row-first, last and the other classes.. Do you know why this is happening? – Rohit Nair Sep 16 '18 at 05:59
  • The filter you have added for form fields only works for the billing form in the checkout page the billing form in the account section remains unaffected. – Rohit Nair Sep 16 '18 at 06:46
0

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

.woocommerce .form-row {
    margin-left: 0;
    margin-right: 0;
}
Jahirul Islam Mamun
  • 659
  • 8
  • 11