在Woocommerce中删除签出字段包装器的标准CSS类 [英] Remove standard css classes of checkout field wrappers in Woocommerce

问题描述

我正在建立一个基于Wordpress和Woocommerce的电子商务网站.到目前为止，一切都很顺利，但是在收费的最后一页(开票和运输)上，Woocommerce的标准类正在干扰Bootstrap 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.

计费表中的每个字段都由

标记包裹，该标记至少具有class-row类(即):

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"

这将导致表单掉落"标准BS网格.

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

有人知道如何删除这些包装器类吗?

Anyone knows how to remove these wrapper classes?

感谢一堆，

干杯， 尼基

推荐答案

要从<p>标签字段容器中清除class="form-row form-row-first"，下面的代码将对结帐字段执行操作:

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

代码进入活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.

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

这篇关于在Woocommerce中删除签出字段包装器的标准CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！