Шорткоды в WooCommerce

WooCommerce  /  37 комментариев

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

  • Если вы попали на этот пост случайно и пока что не до конца представляете, что такое шорткоды, то вам сначала читать этот пост.
  • В самой документации WooCommerce упоминается — если вдруг вы используете шорткод и что-то вроде как с ним не так, то проверьте, не обернули ли вы его в тег <pre> (возможно для этого вам понадобится сначала переключиться на вкладку HTML).

Также рекомендую мой видеокурс по созданию интернет-магазина на WooCommerce на основе готовой вёрстки 🚀

Шорткоды с подвохом — [woocommerce_cart], [woocommerce_checkout], [woocommerce_order_tracking], [woocommerce_my_account]

Я их назвал так по очень простой причине — эти шорткоды вроде бы и есть, но вы не можете их использовать 😯 (пока что, возможно в будущем это изменится).

Как вы знаете, WooCommerce создаёт несколько системных страниц и наполняет их как раз этими шорткодами, например:

Шорткод личного кабинета в WooCommerce

Конечно, на официальной документации WooCommerce это звучит лишь как рекоммендация, но то, что я точно знаю — я пробовал юзать [woocommerce_checkout] на каких-то произвольных страницах, и у меня перестали работать платёжные шлюзы. А заглянув в код самого плагина, я понял, что оно и не должно работать.

Так что по этим шорткодам — можете попробовать, но то, что будет работать, не факт.

[recent_products] — выводит типо последние добавленные товары

Например вот такой шорткод [recent_products per_page="4" columns="4"], использованный на стандартной странице WordPress в теме StoreFront вывел следующее:

Последние добавленные товары

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

per_page
Какое количество товаров нужно вывести, по умолчанию: 12.
columns
На сколько колонок их разделить, по умолчанию: 4.
orderby
По какому параметру сортировать. Например по умолчанию сортируется по дате date и именно благодаря этому шорткод и выводит последние товары, но мы можем использовать и другие параметры сортировки, перечисленные здесь.
order
Сортировать по возрастанию ASC или по убыванию DESC (по умолчанию).
category
Параметр принимает ярлыки категорий товаров, при этом, если их больше, чем один, то нужно указывать через запятую. Ярлыки категорий товаров вы можете найти в админке на странице Товары > Категории.
operator
Вот вы в предыдущем параметре указали например две категории товаров, пусть это будет category1 и sportproducts, а теперь вам нужно решить, хотите ли вы, чтобы выводимые товары присутствовали обязательно в обеих категориях AND, в одной из категорий IN (по умолчанию), либо не присутствовали в указанных категориях NOT IN.

Шорткод [featured_products] выводит товары в точно таком же виде, как и предыдущий [recent_products], а также имеет те же самые параметры. Единственный момент — товар должен быть отмечен, как рекомендуемый, для этого можно например нажать на звезду:

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

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

[product] — когда нужно вывести какой-то определённый товар

Например я использовал этот шорткод [product id="122"] и получил вот такой результат:

Шорткод какого-то определённого товара

Если вы всё ещё не в курсе, где берётся ID для постов или товаров, то вам срочно читать этот урок. Вместо ID вы также можете передать параметр sku (артикул), который указывается на странице редактирования товара:

Артикул товара WooCommerce

[products] — Для вывода определённых товаров по их ID или артикулу

Вы можете указать через запятые айдишники или артикулы товаров, например [products ids="413,500"] или [products skus="product1,product2"].

Кроме того, этот шорткод поддерживает параметры columns, orderby и order, как в шорткоде [recent_products].

[add_to_cart] — кнопка добавления товара в корзину

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

Из обязательных параметров — либо ID товара id, либо артикул sku. Пример: [add_to_cart id="511"]. Также поддерживаются следующие параметры:

style
CSS стили, которые будут добавлены ко всему блоку, например [add_to_cart id="511" style="background-color:#eee;margin:10px 0"]
class
CSS класс или несколько классов через пробел, которые будут добавлены ко всему блоку
quantity
Количество товаров, которые нужно добавить в корзину.
show_price
Отображать цену или нет, по умолчанию — true (отображать).

[add_to_cart_url] — Выводит URL относительно текущей страницы сайта, при переходе по которому товар будет добавлен в корзину

Этот шорткод поддерживает только два параметра — либо ID товара id, либо артикул sku. Пример: [add_to_cart_url id="511"].

[product_category] — Выводит товары из определенной рубрики (или рубрик)

По сути полная копия шорткода [recent_products], разница лишь в том, что параметр order принимает значение по умолчанию ASC, а параметр orderby принимает значение по умолчанию menu_order title (сортировать сначала по порядку, а при одинаковых значениях порядка — по заголовку), ну и соответственно category — обязательный параметр. Ну ок! 😁

[product_categories] — Выводит ссылки на сами категории товаров

Например я использовал этот шорткод [product_categories hide_empty=0] для того, чтобы вывести все категории товаров на сайте, даже пустые. Так как я не добавлял миниатюр к самим категориям, то получилось у меня вот так:

Вывод категорий товаров WooCommerce через шорткод

Другие параметры шорткода:

number
Сколько категорий отобразить? По умолчанию: все. Эта штуковина (я про параметр) к слову работает через array_slice().
orderby
Описание параметра смотрим здесь.
order
Сортировка по возрастанию ASC (по умолчанию) или по убыванию DESC.
columns
Во сколько колонок их вывести, по умолчанию: 4.
hide_empty
Нужно ли скрыть те категории, в которых нет товаров, нужно — 1 (по умолчанию), не скрывать — 0.
parent
Укажите ID родительской категории, дочерние которой нужно вывести. Если указать 0, то выводит категории первого уровня.
ids
Тут вы можете перечислить через запятую ID категорий.

[product_page] — по сути выводит всю страницу товара

Выводит карточку товара с изображением, кнопкой добавления в корзину и даже отзывами по ID товара [product_page id="94"] или по артикулу [product_page sku="artikul1"].

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

[sale_products] — выводит все товары, на которые в данный момент действует распродажа

У шорткода точно такие же параметры, как и у [recent_products], по умолчанию товары сортируются по алфавиту, а также немного отличается шаблон вывода товаров:

Шорткод для вывода товаров, на которые действует распродажа

[best_selling_products] — товары, отсортированные по количеству продаж

Шорткод имеет параметры per_page, columns, category и operator, рассмотренные выше. Благодаря последним двум вы можете вывести наиболее продаваемые товары в каких-то определённых категориях.

Сортировка происходит по произвольному полю total_sales.

[top_rated_products] — товары с наивысшим рейтингом

И тут снова полный набор параметров, как у шорткода [recent_products], но сортировка происходит по пользовательскому рейтингу.

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

По умолчанию выводится 4 случайных товара в 4 колонки ( [related_products per_page="4" columns="4" orderby="rand"], больше кстати у шорткода нет параметров ), которые указаны в разделе сопутствующие товары в Апсейле:

Шорткод с сопутствующими товарами WooCommerce

Если ничего не указано, то шорткод ничего не выведет.

[product_attribute] — позволяет вывести все товары с определенным значением какой-либо атрибута

То, что у нас есть параметры per_page, columns, category и operator, про которые я уже неоднократно упоминал выше, вы уже наверное догадались — повторю, что они подробно описаны в шорткоде [recent_products].

Также у нас имеется ещё два параметра: attribute — ярлык атрибута, и filter — значение этого атрибута, причем вы можете указывать несколько значений через запятую.

Пример:

[product_attribute attribute="color" filter="red,blue"]

Выводим товары с атрибутом цвета равным красному или синему.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Комментарии — 37

Оставить комментарий

× Отменить ответ

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.