WooCommerce库存模块新增字段无法换行问题求助

我在WooCommerce的「库存>单独售卖」设置区域，通过woocommerce_product_options_sold_individually钩子添加了一个自定义的最小步长数量字段，代码如下：

add_action( 'woocommerce_product_options_sold_individually', 'custom_product_step_quantity', 99 );
function custom_product_step_quantity() {
    woocommerce_wp_text_input( array(
        'id'                => 'product_step_quantity',
        'value'             => ! empty( get_post_meta( get_the_ID(), 'product_step_quantity', true ) ) ? (int) get_post_meta( get_the_ID(), 'product_step_quantity', true ) : '',
        'label'             => 'Minimum step quantity',
        'desc_tip'          => true,
        'wrapper_class'     => 'custom-step-quantity',
        'description'       => 'The minimum step quantity - multiplier - of the items that can be added to the cart',
        'type'              => 'number',
        'custom_attributes' => array(
            'step' => 1,
            'min'  => 1,
        ),
    ) );
}

但这个新增字段始终和「单独售卖」的设置项挤在同一行，试了各种CSS都没法让它换行，我不太懂CSS，求帮忙解决。

截图显示：新增的「Minimum step quantity」字段与「单独售卖」选项处于同一行，布局拥挤，没有自动换行。

解决方案 #

方法1：更换钩子（推荐）

woocommerce_product_options_sold_individually钩子是在「单独售卖」字段的容器内部触发的，默认会和原字段处于同一行。换成woocommerce_product_options_inventory_product_data钩子，会在整个库存设置区域的末尾添加字段，自动换行：

add_action( 'woocommerce_product_options_inventory_product_data', 'custom_product_step_quantity', 99 );
function custom_product_step_quantity() {
    woocommerce_wp_text_input( array(
        'id'                => 'product_step_quantity',
        'value'             => ! empty( get_post_meta( get_the_ID(), 'product_step_quantity', true ) ) ? (int) get_post_meta( get_the_ID(), 'product_step_quantity', true ) : '',
        'label'             => 'Minimum step quantity',
        'desc_tip'          => true,
        'wrapper_class'     => 'custom-step-quantity',
        'description'       => 'The minimum step quantity - multiplier - of the items that can be added to the cart',
        'type'              => 'number',
        'custom_attributes' => array(
            'step' => 1,
            'min'  => 1,
        ),
    ) );
}

方法2：添加CSS强制换行

如果一定要保留原钩子，可以添加自定义CSS来强制字段换行。将以下代码添加到主题的自定义CSS区域，或通过后台插件添加：

.product_data .inventory_options .custom-step-quantity {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
}

内容的提问来源于stack exchange，提问作者Faye D.