WooCommerce更新后结账字段列异常，求指定布局的PHP/CSS解决方案

嘿，我帮你搞定这个WooCommerce更新后结账字段布局乱掉的问题！下面给你两种靠谱的实现方式，你可以根据自己的技术习惯来选：

方案一：通过PHP修改字段结构（更稳定，适合长期维护） #

这种方式直接修改WooCommerce结账字段的原生属性，比CSS调整更不容易受主题或后续更新影响。你可以把下面的代码添加到子主题的functions.php文件里，或者用自定义代码插件（比如Code Snippets）来添加：

add_filter( 'woocommerce_checkout_fields', 'customize_checkout_fields_layout' );
function customize_checkout_fields_layout( $fields ) {
    // 调整姓名字段：Firstname和Lastname并排
    $fields['billing']['billing_first_name']['class'] = array('form-row-first');
    $fields['billing']['billing_last_name']['class'] = array('form-row-last');
    
    // 调整地址1字段：100%全宽
    $fields['billing']['billing_address_1']['class'] = array('form-row-wide');
    
    // 调整州/省字段：100%全宽
    $fields['billing']['billing_state']['class'] = array('form-row-wide');
    
    // 调整邮编和城市字段：并排显示
    $fields['billing']['billing_postcode']['class'] = array('form-row-first');
    $fields['billing']['billing_city']['class'] = array('form-row-last');
    
    // 调整电话和邮箱字段：并排显示（按需启用）
    $fields['billing']['billing_phone']['class'] = array('form-row-first');
    $fields['billing']['billing_email']['class'] = array('form-row-last');
    
    // 如果需要调整配送字段，取消下方注释并修改
    // $fields['shipping']['shipping_first_name']['class'] = array('form-row-first');
    // $fields['shipping']['shipping_last_name']['class'] = array('form-row-last');
    
    return $fields;
}

小提醒： #

• 优先用子主题添加代码，避免主题更新时丢失修改。
• 只需要调整账单字段就保留billing_开头的部分，需要配送字段就启用shipping_相关代码。

方案二：通过CSS快速调整样式（适合临时或快速修复） #

如果不想修改PHP代码，直接用CSS也能实现布局调整。把下面的代码添加到主题的自定义CSS区域（外观→自定义→额外CSS）：

/* 姓名字段并排 */
.woocommerce-checkout .form-row.billing_first_name,
.woocommerce-checkout .form-row.billing_last_name {
    width: 48%;
    float: left;
    margin-right: 4%;
}
.woocommerce-checkout .form-row.billing_last_name {
    margin-right: 0;
}

/* 地址1和州字段全宽 */
.woocommerce-checkout .form-row.billing_address_1,
.woocommerce-checkout .form-row.billing_state {
    width: 100%;
    float: none;
    margin-right: 0;
}

/* 邮编和城市字段并排 */
.woocommerce-checkout .form-row.billing_postcode,
.woocommerce-checkout .form-row.billing_city {
    width: 48%;
    float: left;
    margin-right: 4%;
}
.woocommerce-checkout .form-row.billing_city {
    margin-right: 0;
}

/* 电话和邮箱字段并排（按需启用） */
.woocommerce-checkout .form-row.billing_phone,
.woocommerce-checkout .form-row.billing_email {
    width: 48%;
    float: left;
    margin-right: 4%;
}
.woocommerce-checkout .form-row.billing_email {
    margin-right: 0;
}

/* 清除浮动避免布局错乱 */
.woocommerce-checkout .form-row:after {
    content: "";
    display: table;
    clear: both;
}

小提醒： #

• 如果主题有自定义结账样式，可能需要调整选择器优先级（比如加上主题专属类名，尽量少用!important）。
• 记得测试移动端响应式效果，必要时添加媒体查询适配小屏幕。

不管选哪种方案，保存修改后刷新结账页面测试就行，要是遇到样式冲突，用浏览器开发者工具（F12）检查元素类名，针对性调整就好。

内容的提问来源于stack exchange，提问作者eMikkelsen