Как поставить цену и кнопку «добавить в корзину» друг под другом с помощью css. Использование шорткода [add_to_cart id = 'id-no']

Question

Я добавляю кнопку «Добавить в корзину» на случайную страницу в моем магазине woocommerce, используя шорткод на внутренней стороне [add_to_cart id='product-no' class='' style='']

Текст в моем столбце центрируется, поэтому цена и кнопка покупки друг под другом выглядят лучше.

Как получить разрыв строки (или «очистить») между ценой и кнопкой на передней панели?

$ 39 Добавить в корзину

Помощь очень ценится, спасибо.

Answer 1

Судя по тому, что я могу сказать, у вас есть два элемента [Price] и [Button] рядом друг с другом:

[Price] [Button]

Вы можете попробовать добавить тег </br>:

[Price] </br> [Button]

Если добавление </br> не помещает его в новую строку, вы можете попробовать CSS.

Изменить ширину [Цена] или [Кнопка]:

.ELEMENT {
    width: 100%;
}

Или используйте Flex:

<div class="flex-column">
    [Price] [Button]
</div>

.flex-column {
    display: flex;
    flex-direction: column;
}

Или измените атрибут отображения элемента [Price] или [Button] в CSS:

.ELEMENT {
    display: block;
}