Woocommerce: как сделать встроенный блок woocommerce_form_field

Есть команда woocommerce для добавления настраиваемого поля, но кажется, что добавить блочный элемент:

        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>';

Я попытался обернуть его тегом абзаца, но он все равно занимает новую строку:

Woocommerce: как сделать встроенный блок woocommerce_form_field

Кто-нибудь знает, как я могу заставить поле сидеть рядом с его абзацем?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
694
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что woocommerce добавляет display:block; к меткам полей оформления заказа с классом form-row. Также поле выбора внутри класса form-row применяется на всю ширину.

Вы можете добавить следующий 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');

Спасибо, приятель, кажется, мой сервер кэширует мой CSS, поэтому я не могу ничего там обновить (я отключил свой плагин кэширования), поэтому мне все равно придется найти другой способ, спасибо!

sir-haver 26.07.2019 07:55

Вы можете использовать хук wp_footer и добавить стиль в php. Посмотреть обновление

melvin 26.07.2019 07:55

Да, спасибо, приятель, мне пришлось удалить метку из css и отметить ее как важную. Большое спасибо!

sir-haver 26.07.2019 08:09

Другие вопросы по теме