Шорткоды WooCommerce на примерах

Шорткоды WooCommerce могут быть знакомы не всем. Даже если у вас есть магазин WooCommerce, это может быть функция, с которой вы еще не сталкивались и не осознаете, насколько они могут быть полезны.

Шорткоды WooCommerce — это небольшие фрагменты кода, которые вы можете разместить в любом месте вашего сайта для отображения товаров WooCommerce или призывов к действию, таких как кнопки «Купить сейчас». Существует множество способов их использования, и они должны работать в рамках любой темы с установленной WooCommerce.

Шорткоды WooCommerce — добавить товары на главную страницу

Первое очевидное место, где шорткоды WooCommerce пригодятся, — это ваша домашняя страница. Это идеальное место для отображения динамически обновляемой сетки ваших последних продуктов. После того, как шорткод был добавлен, вам не нужно редактировать его снова. Он будет автоматически отображать самые последние продукты, придавая вашей домашней странице свежий новый вид каждый раз, когда вы добавляете новые товары в свой магазин.

Вот шорткод WooCommerce, который можно использовать на главной странице для отображения последних дополнений:

[products limit="8" columns="4" orderby="date" order="DESC" visibility="visible"]

Просто заходим на нужную страницу, выбираем «Шорткод», как на изображении ниже

И добавляем нужный шорткод

Что означает каждый атрибут:

Limit-количество отображаемых продуктов
Columns-количество колонок.
Orderby – вы можете упорядочить их по дате, id, menu_order, популярности, рейтингу и названию.
Order — это либо в порядке убывания (DESC), либо в порядке возрастания (ASC).
visibility -товары, доступные для просмотра в магазине и результатах поиска.

Этот шорткод WooCommerce приводит к аккуратной сетке из 8 продуктов, разделенных на 4 столбца.

Отображение самых популярных продуктов с помощью шорткодов WooCommerce

Точно так же, как вы можете показать самые последние товары, вы можете показать свои самые продаваемые продукты. Все динамично обновляется и отлично подходит для показа сезонных популярных идей подарков.

Для этого вы можете использовать следующий шорткод WooCommerce:

[products limit="4" columns="4" orderby="popularity" ]

Результат:

Создание сетки товаров, поступающих в продажу

Далее мы создадим совершенно новую страницу и назовем ее «Мужские товары для продажи» – в ней будут перечислены исключительно товары для продажи с категорией для мужчин. Мы хотим, чтобы эта страница автоматически заполнялась каждым товаром по сниженной цене в категории «мужчины» в WooCommerce.

Для этого я использую этот шорткод WooCommerce.

[products limit="100" columns="4" orderby="popularity" on_sale="true" category="men" ]

У меня не так много продуктов в этой категории, поэтому лимита в 100 больше, чем достаточно, и охватывает любые дополнительные товары, добавленные позже. Ключевыми дополнительными переменными являются on_sale= «true» и category= «men», в которых перечислены только предметы продажи в рамках вышеупомянутой категории. Опуская конкретное имя селектора категорий, вы просто отобразите все товары продажи среди каждой категории.

Шорткоды WooCommerce — как отобразить шаблон списка категории

Кроме того, можно не просто отображать продукты с помощью шорт-кодов WooCommerce. Вы также можете показать категории. Если вы хотите создать страницу для перечисления всех категорий ваших продуктов, это очень просто. Просто используйте этот шорткод WooCommerce:

[product_categories]

Он будет отображать все ваши категории, и результат будет выглядеть как скриншот ниже, если вы добавили миниатюру категории к каждой из них.

Но что делать, если вы хотите показать только определенные категории?

Для этого можно использовать другой шорткод. Это та же базовая структура, что и другие шорткоды в WooCommerce. Вы перечисляете идентификаторы категорий, разделенные запятыми.

[product_categories ids= " 95, 102, 126"]

Как узнать, какие идентификаторы есть у моих категорий?

Вам нужно перейти в раздел: Товары> категории > и нажать кнопку в категории. Вы увидите идентификатор в url-адресе Вашего браузера. Например, tag_ID=95, поэтому 95 — это идентификатор категории.

Как включить конкретные продукты в пост блога с помощью шорткода

Один из аспектов, который часто упускается из виду, заключается в том, что WordPress — это в основном превосходная платформа для ведения блогов. Многие магазины электронной коммерции совершают ошибку, не публикуя достаточно часто или даже не имея четко определенной стратегии контента в первую очередь. Это не тема данной статьи, но благодаря шорткодам можно быстро и легко добавить прямые действия покупки к продуктам, упомянутым в блоге.

Возьмем любую статью в качестве примера – скажем, что в ней упоминаются три обязательные куртки, которые нужно купить в этом сезоне.

Первый шаг-найти уникальный идентификатор каждого продукта. Вы можете сделать это, перейдя в раздел Товары и наведя курсор мыши на соответствующий элемент.

Вы можете видеть в приведенном выше примере, что идентификатор этого конкретного продукта равен 677. Сделайте то же самое еще для двух продуктов и запишите идентификаторы для каждого из них.

Теперь просто создадим новый фрагмент кода, основанный на предыдущем примере, но явно ссылающийся на эти три идентификатора продукта.

[products ids="677, 680, 691" columns="3"]

Вы увидите, что три числа разделены запятыми. Они будут отображаться в указанном вами порядке. Я использую столбцы= «3», так как в списке есть три идентификатора. Если бы я показывала четыре элемента, я бы изменила это на столбцы= «4».

Добавление только одного продукта в сообщение блога (включая пользовательский CSS)

Если мы хотим добавить только один продукт в пост, он будет занимать всю ширину контента – что будет выглядеть немного странно. Можно переместить его вправо и позволить тексту обтекать его.

Шорткод WooCommerce, содержащий только один продукт, выглядит так:

[products ids="694" columns="1"]

А теперь несколько пользовательских CSS, которые вы можете добавить во: Внешний вид > настройка > дополнительный CSS или в дочернюю тему. Обратите внимание на наличие медиа-запроса, который означает, что стиль включается на экранах более 768px. Таким образом, на меньших экранах продукт будет иметь полную ширину.

@media only screen and (min-width: 768px) {

   .single-post ul.products.columns-1 {

      max-width: 300px;

      float: right;

      border-left: 1px solid #e2e2e2e2;

      padding-left: 40px;

      margin-left: 50px;

   }

}

Результат:

Использование шорткода WooCommerce add to cart

Если вы не хотите отображать весь продукт, есть способ просто отобразить кнопку «купить».

 [add_to_cart id= " 694"]

Вы снова просто меняете идентификатор для продукта, который хотите отобразить.

Как создать страницу отслеживания заказов с помощью шорткода WooCommerce

Одна страница, которая не добавляется по умолчанию в WooCommerce, — это страница отслеживания заказов. Вам нужно будет создать ее самостоятельно, используя шорткод WooCommerce.

Вы можете сделать это, создав новую страницу под названием «отслеживание заказов» и добавив новый блок шорткода к содержимому:

[woocommerce_order_tracking]

Результат будет выглядеть так:

Что такое шорткод корзины WooCommerce?

Когда вы устанавливаете WooCommerce, вы получаете пару страниц, созданных для вас автоматически. Это страницы «корзина», » чек » и «мой аккаунт». Возможно, вы знаете, что они также используют шорткоды WooCommerce. Это все, что нужно, чтобы построить эти страницы.

Шорткод корзины WooCommerce: