在 Woocommerce 中删除结帐字段包装器的标准 CSS 类答案

【问题标题】：Remove standard css classes of checkout field wrappers in Woocommerce在 Woocommerce 中删除结帐字段包装器的标准 CSS 类
【发布时间】：2019-02-03 05:31:37
【问题描述】：

我正在构建一个基于 Wordpress 和 Woocommerce 的电子商务网站。到目前为止，一切都很顺利，但是在结帐的最后一页（计费和运输），Woocommerce 的标准类干扰了 Bootstrap 4 的标记。

帐单中的每个字段都由一个

标记至少具有类 form-row （即）：

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

这会导致表单从标准 BS 网格“下降”。

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

非常感谢，

干杯，尼基

【问题讨论】：

您可以通过编辑这些模板的内部文件来做一些复杂的事情，或者您可以直接覆盖 css 并省去您的麻烦。

标签： php wordpress woocommerce bootstrap-4 checkout

【解决方案1】：

要从 <p> 标记字段容器中清除 class="form-row form-row-first"，以下代码将在结帐字段上完成这项工作：

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 文件中。经过测试并且可以工作。

【讨论】：

太棒了！谢谢！
嘿。我正在尝试通过以下代码获取表单元素中包含的值..
add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );函数 addBootstrapToCheckoutFields($fields) { foreach ($fields as &$fieldset) { foreach ($fieldset as &$field) { foreach ($field['class'] as $text) { echo ($text . '
'); } $field['class'][] = 'form-group'; $field['input_class'][] = '表单控制'; } } 返回 $fields; }
这给了我一个“form-row”期望的所有使用类的列表，我得到了form-row-first、last和其他类。你知道为什么会这样吗？
您为表单字段添加的过滤器仅适用于结帐页面中的帐单，帐户部分中的帐单不受影响。

【解决方案2】：

为什么不使用 css。简单的 css 可以解决这个问题。

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

【讨论】：