在Woocommerce中移除结账字段包装的标准CSS类

Question

我正在基于WordPress和WooCommerce构建一家电子商务网站。到目前为止，一切都很顺利，但在结账的最后一页（账单和运输），WooCommerce的标准类与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

- user5930504

---

你可以通过编辑这些模板的内部文件来完成一些复杂的操作，或者你可以直接在 css 中覆盖并避免自己头痛。 - Serg Chernata

Answer 1

为了清除带有 class="form-row form-row-first" 的表单字段容器中的 <p> 标签，可以使用以下代码来完成结账字段的操作:

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文件中。已经测试并且可行。

- LoicTheAztec

---

太棒了！谢谢！ - user5930504

嗨，我正在尝试通过以下代码获取表单元素中包含的值。 - Rohit Nair

add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' ); function addBootstrapToCheckoutFields($fields) { foreach ($fields as &$fieldset) { foreach ($fieldset as &$field) { foreach ($field['class'] as $text) { echo ($text . ' <br>'); } $field['class'][] = 'form-group'; $field['input_class'][] = 'form-control'; } } return $fields; } - Rohit Nair

这会给我一个使用的所有类的列表，除了“form-row”之外，我会得到form-row-first，last和其他类。你知道这是为什么吗？ - Rohit Nair

您添加的表单字段过滤器仅适用于结账页面中的账单表单，而帐户部分中的账单表单则不受影响。 - Rohit Nair

Answer 2

为什么不使用 CSS 呢？简单的 CSS 就可以解决这个问题。

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

- Jahirul Islam Mamun