css - Woocommerce:如何制作 woocommerce_form_field 内联 block

Question

有一个woocommerce命令可以添加自定义字段，但是好像是添加 block 元素:

        echo '<p> Medium Size - 70 PHP';

                woocommerce_form_field( 'mediumBagCount', array(
        'type'          => 'select',
        'class'         => array( 'wps-drop' ),
        'label'         => __( 'Packge Type' ),
        'options'       => array(
            '0'     => __( '0', 'wps' ),
            '1'     => __( '1', 'wps' ),
            '2'     => __( '2', 'wps' ),
        )
 ),
                           $checkout->get_value( 'mediumBagCount' ));
    echo '</p>';

我试图将它包装在一个段落标签中，但它仍然需要一个新行:

有谁知道如何强制该字段位于其段落旁边？

Answer 1

那是因为 woocommerce 添加了 display:block; 到类为 form-row 的结帐字段标签。类 form-row 中的选择字段也应用了全 Angular 。

您可以将以下 css 添加到您的主题自定义 css 或编写一个函数并将其挂接到 wp_footer。

.wps-drop.form-row label{
    display: inline-block;
}

.wps-drop.form-row select{
    width: auto;
}

或者你可以使用

function custom_style(){
    ?>
    <style type="text/css">
.wps-drop.form-row label{
    display: inline-block;
}

.wps-drop.form-row select{
    width: auto;
}
    </style>
    <?php
}
add_action('wp_footer', 'custom_style');