Remove standard css classes of checkout field wrappers in Woocommerce

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/52060292/remove-standard-css-classes-of-checkout-field-wrappers-in-woocommerce

标签

php

wordpress

woocommerce

bootstrap-4

checkout