Question

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

结算表单中的每个字段都由

标记包装，该标记至少具有class-row类（即）：

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

这将导致表格“掉落”标准BS网格。

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

感谢一堆，

干杯，尼基

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

Answer 2

为什么不使用CSS。简单的CSS可以解决此问题。

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

在Woocommerce中删除结帐字段包装程序的标准CSS类

2 个答案: