Шорткоды в WooCommerce

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

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

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

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

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

Как вы знаете, 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] — для вывода рекомендуемых товаров

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

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

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

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

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

[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] для того, чтобы вывести все категории товаров на сайте, даже пустые. Так как я не добавлял миниатюр к самим категориям, то получилось у меня вот так:

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

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], но сортировка происходит по пользовательскому рейтингу.

[related_products] — выводит сопутствующие товары для текущего товара в цикле

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

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

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

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

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

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

Пример:

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

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

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

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