WooCommerce: шоткоды — примеры использования

WooCommerce: шоткоды — примеры использования

WooCommerce поставляется с шоткодами, которые можно использовать для вставки контента внутри постов и страниц.
Источник: WooCommerce.

Статья также дополнена другими примерами из практики студии.

Как использовать шоткоды

пример вставки шоткода на странице

Шоткоды можно вставлять в страницы, посты и описания товаров.

Страницы

[woocommerce_cart] – страница корзины
[woocommerce_checkout] – страницу оформления заказа
[woocommerce_my_account] – личный кабинет
[woocommerce_order_tracking] – страница отслеживания заказа

Товары

[products] — шоткод выводит товары. С помощью атрибутов можно выводить товары по идентификатору ID, артикулу SKU, категориям, характеристикам и меткам. Можно разбивать список товаров на страницы и настраивать сортировку.

Список атрибутов [products]

  • limit — количество товаров. По умолчанию используется значение -1, которое выводит все товары.
  • columns — количество столбцов. По умолчанию 4.
  • paginate — разбиение на страницы. Используется в сочетании с limit. По умолчанию установлено значение "false". Используйте paginate="true" для разбиения на страницы.
  • orderby — сортирует товары:
    • title — по названию товара. Значение по умолчанию.
    • id — по идентификатору товара ID.
    • menu_order — по порядковому номеру.
    • popularity — по количеству продаж.
    • rand — случайным, рандомным образом.
    • rating — по отзывам и оценкам.
  • order — указывает, как сортировать список товаров: по возрастанию order="ASC" или по убыванию order="DESC". По умолчанию используется значение ASC — по возрастанию. Используется в сочетании с orderby.
  • skus — артикулы. Несколько значений разделяйте запятыми.
  • ids — индентификаторы — ID товара. Несколько значений разделяйте запятыми.
  • category — названия категорий. Несколько значений разделяйте запятыми. Указывается слаг категории, например category="accessories".
  • tag — названия меток.
  • attribute — атрибуты товаров, то есть характеристики. Например attribute="color". Используется в сочетании с terms.
  • terms — значение атрибутов товаров, например terms="red".
  • terms_operator — условие вывода атрибутов.
  • tag_operator — условия вывода меток.
  • cat_operator — условия вывода категорий.
  • terms_operator, tag_operator и cat_operator принимают одно из трёх значений:
    • IN — содержит. Установлено по умолчанию.
    • NOT IN — не содержит.
    • AND — содержит И то И это.
  • class — класс CSS.
  • on_sale — товары со скидкой.
  • best_selling — самые продаваемые товары.
  • top_rated — товары с отзывами и оценками.
  • visibility — видимость товара:
    • visible — видны в каталоге и в поиске. Значение по умолчанию.
    • catalog — видны в каталоге, но скрыты в поиске.
    • search — видны только в поиске, но скрыты в каталоге.
    • hidden — скрытые.
    • featured — помеченые, как избранные.

Примеры использования [products]

Товары со скидкой

шоткод выводит 4 товара со скидкой в 4 столбца, отсортированных по популярности.

Шоткод выводит 4 товара со скидкой в 4 столбца, отсортированных по популярности.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"]

Также добавлен собственный ccs-класс "quick-sale", чтобы выделить товары с помощью серого фона и отступов.

.quick-sale {
    background-color: #ccc;
    padding: 5%;
    }

Рекомендуемые товары

шоткод выводит 6 рекомендуемых ★ товаров в 3 столбца.

Шоткод выводит 6 рекомендуемых ★ товаров в 3 столбца. По умолчанию используется сортировка по названию (от А до Я), хоть это и не указано явно.

[products limit="4" columns="2" visibility="featured"]

Самые продаваемые товары

шоткод выводит 3 самых часто покупаемых товара.

[products limit="3" columns="3" best_selling="true"]

Шоткод выводит 3 самых часто покупаемых товара. По-умолчанию товары выводятся в 3 столбца, хоть это и не указано явно.

Новинки

шоткод выводит 3 самых часто покупаемых товара.

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

Шоткод выводит последние добавленные товары — 4 в одном ряду. Для этого мы будем использовать идентификатор ID (который генерируется при создании страницы товара), а также команды order и orderby.

Товары отдельных категорий

шоткод выводит 4 товара, которые принадлежат обоим категориям.

[products limit="4" columns="4" category="hoodies, tshirts" cat_operator="AND"]

Шоткод выводит 4 товара, которые принадлежат и к футболкам и к толстовкам. Принадлежность к обоим категориям проверяет оператор cat_operator="AND".

Список товаров в панели управления.

Если нужно вывести товары, которые не относятся к этим категориями, нужно изменить только значение аргумента cat_operator на NOT IN.

[products limit="4" columns="4" category="hoodies, tshirts" cat_operator="NOT IN"]

шоткод выводит товары, которые отвечают условию «не содержит».

Товары с определёнными характеристиками

шоткод выводит 4 товара, у которых совпадает указанная характеристика.

Шоткод выводит товары красного цвета, отсортированных по дате: сначала новые, потом старые.

[products columns="3" attribute="color" terms="red" orderby="date"]

Если нужно вывести все товары, за исключением красного цвета — добавим оператор terms_operator со значением NOT IN.

[products columns="3" attribute="color" terms="red" orderby="date" terms_operator="NOT IN"]

шоткод выводит товары, за исключением определённой характиристики

Товары с меткой, тегом

шоткод выводит все товары с меткой «Худи»

Шоткод выводит все товары с меткой «Худи»

[products tag="худи"]

Сортировка по пользовательским полям

С помощью шоткодов выше можно сортировать только по ID, наименованию товара, дате добавления, порядковому номеру, популярности, рейтингу или в случайном порядке.

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

Категории

Для вывода категорий используется два шоткода:
[product_category] — выводит товары
[product_categories] — выводит категории

Список атрибутов категорий

  • ids — выводит категории с указанными ID, используется в [product_categories].
  • category — выводит категории по ID, наименованию или слагу (ярлыку) используется в [product_categories].
  • limit — количество товаров. По умолчанию используется значение -1, которое выводит все товары.
  • columns — количество столбцов. По умолчанию 4.
  • hide_empty — по умолчанию используется значение 1, которое скрывает пустые категории. Установите значение 0, чтобы показать пустые категории.
  • parent — выводит подкатегории по ID родительской категории.

Примеры использования [product_category]

Шоткод выводит только категории верхнего уровня

Шоткод выводит только категории верхнего уровня.

[product_categories parent="0"]

Страница товара

Шоткод выводит страницу одного товара по ID или артикулу.

[product_page id="26"]
[product_page sku="001"]

Шоткод выводит сопутствующие товары.

Шоткод выводит сопутствующие товары.

[related_products limit="2" columns="2"]

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

add_to_cart — шоткод добавляет товар в корзину по ID.

Шоткод выводит кнопку добавления товара в корзину

Кнопка «Добавить в корзину»

Шоткод выводит кнопку добавления товара в корзину в таблице

Шоткод выводит кнопку добавления товара в корзину. При нажатии на кнопку товар с ID=25 добавится в корзину в количестве 3 штук.

[add_to_cart ID="25" style="border:0; padding: 0; text-align:right;" show_price="0" quantity="3"]

style="border:0; padding: 0; text-align:right;" — скрывает рамку, убирает внешний отступ у кнопки и выравнивает её по правому краю.

show_price="0" — атрибут показывает или скрывает цену. По умолчанию зачение 1 показывает цену.

quantity="3" — количество товара.

Пример таблицы:

Шорткод [add_to_cart_url ID="25"] выводит на экран ссылку для добавления товара в корзину ?add-to-cart=25.

Уведомления

[shop_messages] выводит уведомления WooCommerce (например, "товар добавлен в корзину") на страницах, не связанных с WooCommerce. Используется в [add_to_cart].

Хоть этот шоткод и указан в документации WooCommerce — мне не удалось проверить его работу. Шоткод [shop_messages] у меня не работает.