Главная / Блог / Руководства / Шорткоды WooCommerce

Шорткоды WooCommerce

20 марта 18
Reading Time: 6 minutes
14 комментариев
1 Star2 Stars3 Stars4 Stars5 Stars (6 votes)
Шорткоды WooCommerce

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

Видео руководство

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

Шорткоды страниц

  • [woocommerce_cart] – показывает страницу корзины;
  • [woocommerce_checkout]– показывает страницу оформления заказа;
  • [woocommerce_my_account] – показывает страницу “Мой аккаунт”;
  • [woocommerce_order_tracking] – показывает форму отслеживания заказа.

Данные страницы как правило генерируются автоматически, как мы описали в нашем руководстве по WooCommerce.

Корзина

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

Параметры: отсутствуют

[woocommerce_cart]

Оформления заказа

Шорткод оформления заказа, используемый на странице оформления заказа, отображает процесс оформления заказа.

Параметры: отсутствуют

[woocommerce_checkout]

Мой аккаунт

Шорткод страницы “Мой аккаунт” показывает раздел “Мой аккаунт”, где клиент может просматривать предыдущие заказы и обновлять свою информацию. Вы можете указать количество заказов, которые будут отображаться. По умолчанию установлено значение 15 (введите 1, чтобы отображать все заказы).

Параметры:

array(

‘current_user’ => »

)

[woocommerce_my_account]

Параметр для ‘current_user’ автоматически устанавливается с помощью get_user_by( ‘id’, get_current_user_id() ).

Форма отслеживания заказа

Позволяет клиенту узнать статус заказа, введя детали заказа.

Параметры: никаких

[woocommerce_order_tracking]

Товары

Шорткод [products] позволяет вам отображать товары по ID, артикулу, категориям, атрибутам, обеспечивает постраничную навигацию, случайную сортировку и метки товаров. Просмотрите приведенные ниже примеры.

Доступные атрибуты товаров

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

Отображаемые атрибуты товаров

  • limit – количество отображаемых товаров. По умолчанию отображается 12 товаров, если ввести значение “1” — будут отображаться все товары для выбранных категорий.
  • columns – количество отображаемых столбцов. По умолчанию — 4.
  • orderby – сортирует товары, отображаемые за введенным параметром. Один или несколько параметров можно передать, добавив оба слага с пробелом между ними. Доступные параметры:
    • date – дата, когда товар был опубликован;
    • id – ID товара;
    • menu_order – меню заказа, если установлено (меньшие числа отображаются первыми);
    • popularity – количество покупок;
    • rand – случайное упорядочивание товаров при загрузке страницы (может не работать с сайтами, использующими кеширование, поскольку оно может сохранять определенный порядок);
    • rating – средний рейтинг товара;
    • title – название товара. По этому значению происходит сортировка по умолчанию.
  • skus – разделенный запятыми список артикулов товаров.
  • category – разделенный запятыми список слагов категорий.
  • order – устанавливает, будет ли порядок размещения товаров возрастающий (ASC) или нисходящий (DESC). По умолчанию используется ASC.
  • class – добавляет класс упаковщика HTML, так что вы можете изменить конкретный вывод с пользовательской CSS.
  • on_sale – находит товары со скидками. Не используется в сочетании с best_selling или top_rated.
  • best_selling – находит самые продаваемые товары. Не используется в сочетании с on_sale или top_rated.
  • top_rated – находит самые популярные товары. Не используется в сочетании с on_sale или best_selling.

Контентные атрибуты товаров

  • attribute – находит товары, используя указанный слаг атрибута..
  • terms – список значений атрибута, разделенных запятыми, которые будут использоваться с атрибутом.
  • terms_operator – оператор для сравнения значений атрибута. Доступные варианты:
    • AND – будет отображать товары со всеми выбранными атрибутами.
    • IN – будет отображать товары с выбранным атрибутом. Это значение по умолчанию.
    • NOT IN – будет отображать товары, которые не имеют выбранных атрибутов.
  • visibility – будет отображать товары на основе выбранной видимости. Доступные варианты:
    • visible – товары видны на страницах “товары” и “результы поиска”. Это вариант по умолчанию visibility.
    • catalog – товары видны только на странице “товары”, но не на странице “результы поиска”.
    • search – товары видны на странице “результы поиска”, но не на странице “товары”.
    • hidden – товары, которые скрыты от страниц “товары” и “результы поиска”, доступны только по прямой ссилке (URL).
    • featured – товары, которые помечены как “Это рекомендуемый товар”.
  • category – находит товары, используя указанный ярлык категории.
  • cat_operator – оператор для сравнения значений категории. Доступные варианты:
    • AND – будет отображать товары со всех выбранных категорий.
    • IN – будет отображать товары с выбранной категории. Это значение по умолчанию cat_operator.
    • NOT IN – будет отображать товары, которых нет в выбранной категории.
  • ids – будет отображать товары на основе списка ID постов, разделенных запятыми.
  • skus – будет отображать товары на основе списка артикулов, разделенных запятыми.

* Если товар не отображается, убедитесь, что он не помечен как “Скрытый” в “Видимость в каталоге”.

Чтобы найти ID товара, перейдите в “Товары”, наведите указатель мыши на товар, и появится ID, как показано ниже.

WooCommerce-Product-ID

Специальные атрибуты товара

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

  • best_selling – будет отображать ваши самые продаваемые товары. Должно быть установлено «true».
  • on_sale – будет отображать товары со скидками. Должно быть установлено «true».

Шорткоды категории товаров

Эти два шорткоды будут отображать ваши категории товаров на любой странице.

  • [product_category] – будет отображать товары в заданной категории товаров.
  • [product_categories] – будет отображать все ваши категории товаров.

Примеры по работе с шорткодами

В следующих сценариях мы будем использовать пример магазина одежды.

Сценарий 1 — Выбранные наугад товары со скидкой

Я хочу отобразить четыре товара со скидкой, выбранных наугад.

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

Этот шорткод устанавливает четыре товара с четырьмя столбцами (которые будут в одном ряду), показывающий самые популярные товары со скидками. Он также добавляет CSS class quick-sale, который можно изменить в своей теме.

WooCommerce Shortcode - Sale Products

Сценарий 2 — Рекомендуемые товары

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

[products limit=»4″ columns=»2″ visibility=»featured» ]

Этот шорткод говорит, что до четырех единиц товаров будут загружаться в два столбца и что они должны быть рекомендуемыми. Также он использует значения по умолчанию, такие как сортировка по заголовкам (от А до Я).

WooCommerce Shortcode - Featured Products

Сценарий 3 — Самые продаваемые товары

Я хочу отобразить три моих самых продаваемых товара в одном ряду.

[products limit=»3″ columns=»3″ best_selling=»true» ]

WooCommerce Shortcode - Best Selling Products

Сценарий 4 — Новые товары

Сначала я хочу отображать новые товары — четыре товара в одном ряду. Для этого мы будем использовать ID (который формируется при создании страницы товара) вместе с командой “order” и “orderby”. Поскольку вы не можете видеть ID постов из фронтэнда, ID накладываются на изображения.

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

WooCommerce Shortcodes - Newest

Сценарий 5 -Конкретные категории

Я только хочу отобразить толстовки и рубашки, но не аксессуары. Я буду использовать два ряда с четырьмя столбцами.

[products limit=»8″ columns=»4″ category=»hoodies, tshirts» cat_operator=»AND»]

WooCommerce Shortcode - Products by Category

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

[products limit=»8″ columns=»4″ category=»hoodies, tshirts» cat_operator=»NOT IN»]

Обратите внимание, хотя предел установлен на 8, показаны только четыре товара, поскольку нашлось только 4 товара, которые соответствуют этим критериям.

WooCommerce Shortcode - Products by Category

Сценарий 6 — Отображение атрибутов

Каждый из элементов одежды имеет атрибут, либо “весна / лето” или “осень / зима” в зависимости от соответствующего сезона, с аксессуарами, имеющими оба, так как их можно носить круглый год. В этом примере я хочу три товара в ряду, отображающиму все товары, соответствующие сезонам “Весна / Лето”. Слаг атрибута — сезон, а атрибуты — теплый и холодный. Я также хочу, чтобы они были отсортированы от новейших товаров до самых старых.

[products columns=»3″ attribute=»season» terms=»warm» orderby=»date»]

WooCommerce Shortcode - Products by Attribute

В качестве альтернативы, если бы я хотел бы отображать товары, подходящие только для холодной погоды, я мог бы добавить NOT IN до terms_operator:

[products columns=»3″ attribute=»season» terms=»warm» terms_operator=»NOT IN»]

WooCommerce Shortcode - Products by Attribute

Обратите внимание, что, используя NOT IN, я исключаю товары, которые находятся в “Весна / Лето” и Осень/ Зима”. Если бы я хотел показать всю подходящую для холодной погоды одежду, включая общие аксессуары, я бы изменил значение от “теплый” до “холодный”.

Сортировка товаров по произвольным полям

Используя шорткод “Товары”, вы можете выбрать упорядочивать ли товары по заранее определенным значениям выше. Вы также можете отсортировать товары по индивидуальным мета-полям, используя код ниже (в данном примере мы упорядочиваем товары по цене):

add_filter( ‘woocommerce_shortcode_products_query’, ‘woocommerce_shortcode_products_orderby’ );

function woocommerce_shortcode_products_orderby( $args ) {

$standard_array = array(‘menu_order’,’title’,’date’,’rand’,’id’);

if( isset( $args[‘orderby’] ) && !in_array( $args[‘orderby’], $standard_array ) ) {

$args[‘meta_key’] = $args[‘orderby’];

$args[‘orderby’] = ‘meta_value_num’;

}

return $args;

}

Вы должны поместить этот фрагмент в functions.php в вашей папке темы, а затем кастомизировать путем редактирования meta_key.

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

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

Отображение страницы отдельного товара с полной информацией о нем по ID или артикулу.

[product_page id=»99″]

[product_page sku=»FOO»]

Сопутствующие товары

Перечисление сопутствующих товаров.

Параметры:

array(

‘limit’ => ’12’,

‘columns’ => ‘4’,

‘orderby’ => ‘title’

)

[related_products limit=»12″]

Аргумент ‘limit’

Примечание: аргумент шорткода ‘limit’ устанавливает, сколько товаров отображается на странице. Он не будет добавлять постраничную навигацию к шорткоду.

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

Отображение цены и кнопки “Добавить в корзину” отдельного товара по ID.

Параметры:

array(

‘id’ => ’99’,

‘style’ => ‘border:4px solid #ccc; padding: 12px;’,

‘sku’ => ‘FOO’

‘style’ => ‘TRUE’

‘class’ => ‘CSS-CLASS’

)

[add_to_cart id=»99″]

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

Отображение URL на кнопке “Добавить в корзину” отдельного товара по ID.

Параметры:

array(

‘id’ => ’99’,

‘sku’ => ‘FOO’

)

[add_to_cart_url id=»99″]

Отображение уведомлений WooCommerce на страницах, которые не связаны с WooCommerce

[shop_messages] позволяет показывать уведомления WooCommerce (например, “Товар добавлен в корзину”) на страницах которые не связаны с WooCommerce. Он — полезен, когда вы используете другие шорткоды, например [add_to_cart], и хотели бы, чтобы клиенты получали извещения о своих действиях.

Поиск и устранение неисправностей в шорткодах

Если вы правильно вставили ваши шорткоды и отображение выглядит некорректно, убедитесь, что вы не вставили шорткод между тегами <pre>. Это распространенная проблема. Чтобы удалить эти теги, отредактируйте страницу и кликните на вкладку “Текст”:

Remove Pre Tags from Shortcode

Comments (14)
  • Андрей:

    [product_categories number="0" parent="0"] — отображает категории, а как сделать чтоб эти категории были не по алфавиту а по чередованию как установлено в категориях ?

    1. Евгений:

      Добрый день.
      Если нужно выводить только определенные категории и в нужном порядке, необходимо изменить код, например — ​[premmerce_catalog title=»Категории магазина» template=»carousel» columns=»5″ ids=»70, 69″] ,где 70 и 69 id нужных категорий. Определить можно так — http://prntscr.com/ldkgtm

      1. Андрей:

        Спасибо за быстрый ответ, но по непонятным причинам у меня не получается реализовать данный шорткод.
        Единственное что получается это вывести одну категорию через [product_categories ids=»,69″ ] и если убрать запятую перед категорией то отображаться не будет, и если через запятую добавлять другие их не видно.

        1. Евгений:

          Это — однозначно рабочий вариант.
          Допускаю, какой-то из сторонних плагинов/скриптов вносит свои коррективы.

          1. Андрей:

            Также заметил на странице с контактами стоит шорткод [contact-form-7 id="19" title="Contacts page form" class="form--bg"] который не работает, а отображается как текст.

          2. Евгений:

            шорткод [contact-form-7 id="19" title="Contacts page form" class="form--bg"] требует наличия активного плагина Contact Form

          3. Андрей:

            Может это быть из за бесплатной версии шаблона saleszone ?

  • Кирилл:

    Здравствуйте. А можно в произвольном месте сайта как-то сослаться на цену товара?
    Например на странице описания товара?

  • Макс:

    Здравствуйте.
    [product_categories] – будет отображать все ваши категории товаров.
    Как можно вывести категории, без подкатегорий?

    1. Макс:

      Разобрался
      [product_categories number="0" parent="0"]

  • Дмитрий:

    Подскажите пожалуйста шорткод добавить товар в корзину по id и чтоб можно было сразу выбрать количества товаров которое добавить в корзину

    1. Евгений:

      [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 (отображать).

  • Сергей:

    Добрый день!
    Спасибо за статью, подскажите как вывести при помощи шорт кодов на страницу товары с двумя разными атрибутами, например attribute=»season» terms=»warm» и attribute=»cvet» terms=»belyi»

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Хочу выразить большую благодарность коллективу компании "ImageCMS" а именно Ивану и Марии! Во время выбора компании проводил переговоры с 7 различными организациями, Иван единственный кто смог адекватно объяснить и подсказать всю необходимую информацию для принятия решения. В итоге результат более чем на 100% соответствует ожиданиям, а во много их даже превосходит!
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!