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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 5,00 из 5)
Загрузка...
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 родительской категории.
  • orderby — по умолчанию сортирует по «имени». Можно сортировать по «id», «slug» или «menu_order». Для ручной сортировки укажите orderby="include".
  • order — сортировка по возрастанию ASC или по убыванию DESC. По умолчанию ASC. Используется вместе с orderby.

Примеры использования [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] у меня не работает.

Поделиться
Отправить
Вотсапнуть