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

Шорткоды WooCommerce

20 марта 18
Reading Time: 3 minutes
Комментариев нет
1 Star2 Stars3 Stars4 Stars5 Stars (1 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 (0)

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

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

Создайте свой личный демо-магазин ImageCMS
Подпишитесь, чтобы получать новости

Be the first to know about Premmerce development and project news

Вы успешно подписались на наши новости. Спасибо большое!