Шорткоды в WooCommerce

В комплекте с 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"]

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

Миша

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

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

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

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

  • Mohammad 12 января 2020 #

    Спасибо вам большое, очень помог.
    Я хочу вывести похожие товары но без заголовок "Похожие товары".
    Попробовал это но не помог:
    [related_products per_page="5" columns="5" orderby="rand" title=""]

    • Миша 12 января 2020 #

      Не хочу вас разочаровывать, но возможно вам лучше попробовать подкорректировать шаблон single-product/related.php. Ну или фильтр gettext...

      • Mohammad 12 января 2020 #

        Да сработало. Спасибо вам. Удалил этот с шаблона и всё:

        <h2><?php esc_html_e( 'Related products', 'woocommerce' ); ?></h2>
  • Андрей 7 апреля 2020 #

    При добавлении в запись шорткода [product_page id="23"] продукт появляется, но есть проблема, что в отображаемом товаре имя продукта в обернуто, и сама запись (заголовок поста) тоже в , в каком то файле можно имя продукта хотя бы в h2 завернуть?

  • Андрей 7 апреля 2020 #

    При добавлении в запись шорткода [product_page id="23"] продукт появляется, но есть проблема, что в отображаемом товаре имя продукта в h1 обернуто, и сама запись (заголовок поста) тоже в h1, в каком то файле можно имя продукта хотя бы в h2 завернуть?

    • Миша 9 апреля 2020 #

      Вероятно, что в файле content-single-product.php, но там одни хуки, поэтому можно попробовать хукнуть woocommerce_template_single_title. Сам не пробовал, это мои предположения.

  • Егор 9 апреля 2020 #

    Привет [best_selling_products] выводится как попало. Продаж не было, а шорткод выводит список продуктов. Если не заданы параметры, то выводит все продукты. Какая логика этого шорткода?

  • Максим 13 апреля 2020 #

    Здравствуй Миша. Сейчас под товаром выводятся последние добавленные товары в количестве 10 шт. с помощью [recent_products per_page="10"]

    Хочу вывести товары из одной категории. Как я понял из статьи необходимо вставить параметр category.

    Как его правильно вставить, чтобы работало. На странице товара выводились товары из этой же категории?
    Спасибо за ответ!

    • Миша 13 апреля 2020 #

      Добрый день, Максим.

      А [recent_products category="mycategory" per_page="10"] не пробовали?

      • Максим 13 апреля 2020 #

        Вставил. Вовсе перестали показываться товары ((
        Может "mycategory" как то по другому у меня называется или выводится

      • Миша 13 апреля 2020 #

        А как вставили?

        • Максим 13 апреля 2020 #

          Вот скрин http://joxi.ru/D2PBGnhqEjeMr3

        • Миша 13 апреля 2020 #

          Значит ярлык вашей категории "mycategory"? 🤔

          • Максим 13 апреля 2020 #

            Ага, понял )
            Смотрите, Михаил. Если я поставлю какую-то один ярлык категории, то на всех страница товара будет отображаться одно и тоже.

            Хочет, что бы "recent_products category" подтягивал ту категорию в которой находится товар.
            Товар в фунгицидах - подтянулись товары из категории фунгициды, товар из гербицидов - подтянулись товары из категории фунгицид, из той же категории что и товар. Вот как.

          • Миша 13 апреля 2020 #

            Ну вот и разобрались 🙃

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

            • Максим 14 апреля 2020 #

              Да, это шорткод [related_products] более подходящий, большое спасибо!
              Только вот в категории Фунгициды он мне подтягивает продукты из инсектицидов, гербицидов и тд. http://joxi.ru/LmG3GWswjRlEml

              Как его ограничить только на категории Фунгициды. И может добавить какие то еще параметры например одинаковые метки?

              • Максим 14 апреля 2020 #

                Может потому, что у меня у товара 3 категории. И только 3 уровень является основной для него http://joxi.ru/nAyXo1sgRXal2Z

            • Миша 14 апреля 2020 #

              Можете попробовать метками.

              • Максим 14 апреля 2020 #

                А как сделать, чтобы подтягивалась не определенная одна метка, а метки которые содержаться в товаре.
                [метки содержащиеся в товаре = "2" или хотя бы "1"] - тут будут выводиться товары которые содержать 2 схожие метки или хотя бы одну.
                Такие вот нужны параметры ))

                • Миша 14 апреля 2020 #

                  Понятно ))

                  • Максим 14 апреля 2020 #

                    Понятно то понятно ))
                    Как это реализовать не понятно?!
                    Ладно, спасибо Миш большое!

                  • Миша 14 апреля 2020 #

                    Да пожалуйста, взаимно!

                    По крайней мере мы раскрыли в комментариях тему шорткода похожих записей, если кто-то столкнётся с трудностями, как это всё работает, сможет найти ответ в комментах.

                    Если бы я это делал, я бы сначала прочекал функцию вывода стандартного шорткода, возможно её можно было бы как-то захукать, чтобы она брала по нужному тегу/категории. Если бы это было сделать невозможно или бессмысленно, то создал бы свой собственный шорткод, который выводил бы как мне надо 🤷‍♂️

                    • Максим 14 апреля 2020 #

                      Миша, вывел в общем все категориями с лимитом 3-2 шт и с рандомный.
                      Получилось норм. Пока данного решения хватит ) спасибо! Мозги чуть прокачал.

                      <?php echo do_shortcode('[products category="stimulyatory" products limit = "3" orderby="rand"]');?>
                      <?php echo do_shortcode('[products category="amino-kompleksy" products limit = "2" orderby="rand"]');?>
                      <?php echo do_shortcode('[products category="mineralnye-udobreniya" products limit = "3" orderby="rand"]');?>
                      <?php echo do_shortcode('[products category="organomineralnye-udobreniya" products limit = "2" orderby="rand"]');?>
                      <?php echo do_shortcode('[products category="adyuvanty" products limit = "2" orderby="rand"]');?>
                    • Миша 14 апреля 2020 #

                      🔥💪

  • Виталий 21 апреля 2020 #

    Здравствуйте! Подскажите пж как вывести на странице товара (шаблон) вариации товара (цвет, размер). Дело в том что в теме woodmart есть режим каталога, в этом режиме убираться все корзины. Все норм но с корзиной так же пропадают и варианты цвета и размера на странице просмотра товара. Может как то шорткодом вывести ?

    • Миша 21 апреля 2020 #

      Здравствуйте,

      шорткодом вряд ли получится

      • Виталий 21 апреля 2020 #

        Может кодом подскажите?

      • Миша 21 апреля 2020 #

        У меня его нет, если бы был, конечно поделился бы

  • Татьяна 30 апреля 2020 #

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

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

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