可以't在Wooccommerce结账页面上创建两列

Question

我一直在尝试通过下面的PHP和CSS在结账页面上创建form-row-first和form-row-last布局。然而，city、postcode和state字段不移动，而是保留为默认的form-row-wide。注意，我确实希望将form-row-wide类保留在billing_address_1字段上。

如何删除form-row-wide以创建我想要的输出

网站：https://oliveandgrain.com.au/checkout

add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );
function addBootstrapToCheckoutFields($fields) {
foreach ($fields as &$fieldset) {
foreach ($fieldset as &$field) {
// if you want to add the form-group class around the label and the input
$field['label_class'][] = 'formLabel textLeft'; 
}enter code here
}
return $fields;
}
function add_classes( $fields ) {
$fields['billing']['billing_first_name']['class'] = array('form-row', 'form-row', 'form-row-first');
$fields['billing']['billing_last_name']['class'] = array('form-row', 'form-row', 'form-row-last');
$fields['billing']['billing_phone']['class'] = array('form-row', 'form-row', 'form-row-first');
$fields['billing']['billing_email']['class'] = array('form-row', 'form-row', 'form-row-last');
$fields['billing']['billing_address_1']['class'] = array('form-row', 'form-row', 'form-row-wide');
$fields['billing']['billing_company']['class'] = array('form-row', 'form-row', 'form-row-first');
$fields['billing']['billing_city']['class'] = array('form-row', 'form-row', 'form-row-last');
$fields['billing']['billing_postcode']['class'] = array('form-row', 'form-row', 'form-row-first');
$fields['billing']['billing_state']['class'] = array('form-row', 'form-row', 'form-row-last');
$fields['billing']['billing_country']['class'] = array('form-row', 'form-row', 'form-row-last');
return $fields;
}
add_action( 'woocommerce_checkout_fields', 'add_classes');

function reorder_billing( $checkout_fields ) {
//Billing
$checkout_fields['billing']['billing_first_name']['priority'] = 10;
$checkout_fields['billing']['billing_last_name']['priority'] = 20;
$checkout_fields['billing']['billing_phone']['priority'] = 30;
$checkout_fields['billing']['billing_email']['priority'] = 40;
$checkout_fields['billing']['billing_address_1']['priority'] = 50;
$checkout_fields['billing']['billing_company']['priority'] = 60;
$checkout_fields['billing']['billing_city']['priority'] = 70;
$checkout_fields['billing']['billing_postcode']['priority'] = 80;
$checkout_fields['billing']['billing_state']['priority'] = 90;
$checkout_fields['billing']['billing_country']['priority'] = 100;

return $checkout_fields;
} add_filter( 'woocommerce_checkout_fields', 'reorder_billing');

function custom_override_default_locale_fields( $fields ) {
$fields['postcode']['priority'] = 90;
$fields['state']['priority'] = 100;
return $fields;
} add_filter( 'woocommerce_default_address_fields', 'custom_override_default_locale_fields' );

.woocommerce .woocommerce-checkout .col2-set .col-1 {
float: none;
width: 100%;
}
.woocommerce form .form-row {
margin-right: 4%;
float: left;
width: 48%;
}
.woocommerce form .form-row-last {
margin-right: 0;
}
@media (max-width: 980px) {
.checkout .form-row {
float: none !important;
width: 100% !important;
}
}

Answer 1

文档指出，在特定情况下，地址字段需要传递给woocommerce_default_address_fields过滤器。通过更改语句，我能够实现我需要的布局。

参考编号：https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

function add_classes( $fields ) {
$fields['billing']['billing_phone']['class'] = array('form-row', 'form-row', 'form-row-first');
$fields['billing']['billing_email']['class'] = array('form-row', 'form-row', 'form-row-last');

return $fields;
} add_filter( 'woocommerce_checkout_fields', 'add_classes');

function add_classes_two( $address_fields ) {
$address_fields['first_name']['class'] = array('form-row', 'form-row', 'form-row-first');
$address_fields['last_name']['class'] = array('form-row', 'form-row', 'form-row-last');
$address_fields['city']['class'] = array('form-row', 'form-row', 'form-row-first');
$address_fields['postcode']['class'] = array('form-row', 'form-row', 'form-row-last');
$address_fields['state']['class'] = array('form-row', 'form-row', 'form-row-first');
$address_fields['country']['class'] = array('form-row', 'form-row', 'form-row-last');
return $address_fields;
} add_filter( 'woocommerce_default_address_fields', 'add_classes_two');