无法在 Woocommerce 结帐页面上创建两列

Question

我一直在尝试通过下面的 PHP 和 CSS 在我的结帐页面上创建 form-row-first 和 form-row-last 布局。然而city、postcode 和state 字段不会移动并保持默认的form-row-wide。请注意，我确实想在 billing_address_1 字段中保留 form-row-wide 类。

如何删除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_fieldsfilter。通过更改语句，我能够实现所需的布局。

参考：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');