Шорткоды WooCommerce: полное руководство на 2021 год

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

Шорткоды WooCommerce: все, что вам нужно знать

Если вы работаете с WordPress, вы, вероятно, знакомы с WooCommerce. В настоящее время 93,7% всех веб-сайтов электронной коммерции WordPress используют известный плагин WooCommerce. Эта полностью настраиваемая платформа с открытым исходным кодом, разработанная WooThemes, начиналась как любой другой аддон, но вскоре получила миллионы загрузок, что привлекло внимание форума WordPress. На сегодняшний день его уже скачали 70 миллионов раз, и он стал ведущим плагином электронной коммерции, поддерживающим в общей сложности 28% интернет-магазинов.

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

Итак, чтобы помочь вам максимально использовать короткие коды, в этом руководстве мы рассмотрим:

• Краткое объяснение шорткодов
• Зачем они нужны вашему бизнесу
• Список шорткодов WooCommerce
• Как вы можете использовать их в полной мере

Что такое шорткоды WooCommerce?

Начнем с основ. Шорткоды WooCommerce — это небольшие фрагменты, которые помогают вам реализовать функциональность или отображать контент на вашем сайте электронной коммерции без написания длинного кода. Другими словами, это макросы, которые позволяют динамически взаимодействовать с содержанием вашего сайта .

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

Вкратце, шорткоды WooCommerce полезны по трем причинам:

• Они помогают сэкономить время, потому что вам не нужно писать длинные строки кода, предоставляя вам больше времени для работы над другими вещами.
• Поскольку они не добавляют разметку к содержимому публикации, владельцы магазинов смогут позже отредактировать стиль страницы.
• Больше гибкости. Несмотря на то, что это будет зависеть от параметров, установленных пользователем, они могут применять один и тот же шорткод для разных ситуаций.

Зачем вам нужны шорткоды WooCommerce?

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

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

Это идеально подходит для тех, кто хочет попробовать различные стратегии в своих интернет-магазинах. Например, вместо того, чтобы проводить своих клиентов через стандартный процесс продажи, как в любом другом магазине, вы можете отобразить кнопку «Добавить в корзину» в одном из своих популярных сообщений, чтобы стимулировать конверсии. И самое приятное то, что шорткоды позволяют вам выбирать среди множества кнопок призыва к действию, которые вы размещаете на своем сайте.

Кроме того, шорткоды WooCommerce позволяют добавлять продукты на домашнюю страницу, создавать сетку товаров, которые продаются, чтобы показывать их покупателям, и отображать ваши популярные продукты в любом месте. Возможно даже создание страницы отслеживания заказов! И в этом волшебство коротких кодов, они предоставляют вам бесконечные возможности для настройки вашего магазина .

Какие типы шорткодов WooCommerce существуют?

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

• Шорткоды страниц
• Шорткоды продуктов (это самая надежная категория)
• Шорткоды страницы продукта
• Сопутствующие товары
• Кнопка «Добавить в корзину» или короткие коды URL

Как максимально использовать шорткоды WooCommerce ?

Теперь давайте посмотрим, что может сделать каждый тип шорткода и как максимально использовать их:

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

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

В шорткодах страницы вы найдете:

Корзина

 [ woocommerce_cart ]

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

Проверить

 [ woocommerce_checkout ]

Как только ваши клиенты соберут все продукты/услуги, которые им нужны, они нажмут кнопку «Оформить заказ», и именно тогда вступает в действие короткий код оформления заказа. Он будет отображать всю необходимую информацию, которую покупатель должен увидеть перед оформлением заказа, такую ​​как способ оплаты, платежная информация, информация о доставке и т. д. Это также простой шорткод, который не принимает никаких дополнительных аргументов.

Мой счет

 [ woocommerce_my_account ]

Клиенты должны иметь возможность просматривать и изменять данные своего профиля, такие как имя, адрес электронной почты, пароль, а также данные своего заказа, такие как адрес доставки и платежный адрес. С помощью этого шорткода пользователи смогут просматривать, редактировать и обновлять эти данные. Более того, он содержит аргумент, который будет отображать информацию о текущем покупателе.

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

 [ woocommerce_order_tracking ]

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

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

2. Шорткоды продуктов

Имейте в виду, что для использования коротких кодов продуктов вам потребуется WooCommerce 3.2 и более поздние версии. Эти версии позволяют использовать шорткод продукта для всех видов отображения продукта. Если у вас есть предыдущая версия, проверьте этот документ, потому что вам нужно будет использовать разные короткие коды для каждого типа группировки продуктов.

 [ products ]

2.1 Атрибуты короткого кода продукта

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

Давайте рассмотрим некоторые шорткоды продуктов:

Ограничить количество товара

С помощью атрибута limit вы можете установить ограничение на количество отображаемых продуктов. Например, вы можете ограничить количество отображаемых продуктов до 8 с помощью следующего:

 [ products limit="12" ]

. Обратите внимание, что по умолчанию ограничение равно «-1», что означает, что будут показаны все товары.

Изменить макет продукта

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

а. Столбцы

Если вы хотите установить определенное количество столбцов, вам нужно будет добавить атрибут «столбцы» и указать желаемое количество. Итак, если вы хотите 6 столбцов с разными товарами в каждом из них, вы можете использовать шорткод:

 [ products limit="12" columns="4" ]

б. Разбить на страницы

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

Чтобы использовать его, установите paginate = «true», а затем введите следующий шорткод:

 [ products limit="12" columns="4" paginate="true" ]

в. Сортировать товары с помощью «orderby»

Атрибут orderby открывает широкий спектр возможностей, поскольку позволяет сортировать товары по нескольким критериям, чтобы отображать их по своему усмотрению, добавляя условия. К ним относятся:

• • id: отображать продукты по идентификатору продукта.
  • популярность : с этим атрибутом продукты, которые покупают больше всего, будут показаны первыми.
  • title : сортировать товары по названию. Это порядок по умолчанию для orderby.
  • рейтинг : еще один интересный способ сортировки товаров основан на их среднем рейтинге.
  • date : для сортировки элементов по дате их публикации. По умолчанию самый старый товар отображается первым. Однако вы можете изменить это с помощью атрибута даты.
  • rand : с помощью этого атрибута вы можете изменить порядок продуктов при перезагрузке страницы. Тем не менее, на сайтах, где включено кэширование и товары сохраняются в фиксированном порядке, этот атрибут может не работать.
  • menu_order : это будет работать только тогда, когда вы установили порядок меню, и он будет отображать продукты в соответствии с этим порядком. Сначала будет показано наименьшее число.

Если вы хотите еще больше настроек, вы можете сделать еще один шаг и объединить эти параметры, просто добавив пробел между ними. Например, вы можете попробовать смешать короткие коды, чтобы шесть столбцов продуктов отображались в порядке, основанном на их популярности, например:

 [ products limit="12" columns="4" orderby="popularity" ]

Больше атрибутов продукта

В WooCommerce есть еще несколько атрибутов продукта, которые вы можете использовать, комбинируя их с шорткодом « products» . Вот некоторые из основных:

• • SKU: вы можете отображать свои продукты на основе их SKU (единицы хранения). Если вы хотите добавить несколько SKU, просто разделите их запятыми.
  • on_sale : как следует из названия, этот атрибут будет отображать все товары вашего магазина со скидкой.
  • категория : также рекомендуется показывать товары по категориям. У вас может быть несколько категорий, разделяющих слаги запятыми.
  • best_selling : это хороший вариант, если вы хотите сначала показать свои самые популярные и продаваемые товары.
  • top_rated : следуя той же логике, вы также можете показать свои товары с самым высоким рейтингом.
  • class : этот атрибут помогает вам изменить порядок с помощью пользовательского CSS, добавив класс-оболочку HTML.

Например, если вы хотите отобразить свои самые продаваемые продукты, по четыре в строке, максимум двенадцать товаров, вы можете использовать этот шорткод:

 [ products limit="12" columns="4" best_selling="true" ]

Видимость

Этот атрибут позволяет отображать товары на основе настроек видимости. Вот некоторые из вариантов:

• • • каталог : извлекает товары, видимые только на странице магазина.
    • поиск: показывает товары, которые видны только на странице поиска
    • visible: это комбинация двух предыдущих, так как он извлекает продукты, которые видны на странице магазина и в результатах поиска.
    • скрыто: показывает продукты, к которым можно получить доступ только по прямому URL-адресу.
    • Featured : он будет получать только те продукты, которые отмечены как рекомендуемые.

Например, если вы хотите отобразить рекомендуемые продукты, по четыре в строке, максимум двенадцать элементов, вы можете использовать этот шорткод:

 [ products limit="12" columns="4" visibility="featured" ]

Атрибуты контента

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

• • атрибут: помогает отображать продукты, заключая слаги
  • термины: в нем упоминаются термины атрибутов, разделенные запятыми
  • terms_operator: Это дает вам больше контроля над тем, как показывать атрибуты. Есть три оператора:
    • И : будут показаны продукты со всеми выбранными вами атрибутами.
    • IN : отображает продукты, которые имеют этот выбранный атрибут.
    • NOT IN : будут показаны товары, у которых нет выбранных атрибутов.

Категории

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

• • • категория: Чтобы выбрать категорию, которую вы хотите отобразить
    • cat_operator: Вы можете применять условия для отображения нужных элементов:
      • И: отображаемые продукты должны принадлежать ко всем выбранным категориям
      • В: Отображаемые продукты должны быть хотя бы в одной из выбранных категорий.
      • НЕ ВХОДИТ: отображаемые продукты не обязательно должны принадлежать ни к одной из выбранных категорий.
    • Вы также можете отображать продукты в соответствии со списком идентификаторов сообщений, разделенных запятыми, или списком SKU.
    • Есть еще несколько шорткодов/атрибутов, которые относятся к шорткодам продукта: специальные атрибуты, категория продукта и категория продукта. Логика очень похожа на то, что вы прочитали выше, но если вы хотите посмотреть, вы можете проверить это.
    • Если вы хотите узнать больше о шорткодах, вы можете посетить эту страницу и ознакомиться с 8 сценариями.

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

 [ products limit="12" columns="4" category="hoodies, tshirts" ]

3. Шорткоды страницы продукта

С помощью этого типа шорткода WooCommerce вы можете отображать разные страницы продуктов, используя два атрибута: идентификаторы продуктов и SKU. Код для этого есть.

Важно отметить, что вы даже можете использовать оба следующих шорткода:

 [ product_page ]

или

 [ product_page sku="hoodie" ]

4. Шорткод сопутствующих товаров

Если вы использовали магазины электронной коммерции, такие как Amazon или Alibaba, вы, вероятно, заметили, что когда вы смотрите на продукт, они показывают вам другие связанные элементы. Например, если вы ищете палатку, вам покажут другие похожие палатки и спальные мешки. Это потому, что если вам нужна палатка, вы также, вероятно, заинтересуетесь спальным мешком.

Следовательно, показывать покупателям сопутствующие товары — отличная идея для увеличения продаж. В WooCommerce это возможно с помощью шорткода «Сопутствующие товары». Вы можете точно указать, сколько продуктов вы хотите, чтобы пользователи видели. Например, если вы хотите показать 4 продукта, шорткод должен быть:

 [ related_products limit="4" ]

5. Кнопка « Добавить в корзину»

Кнопка «Добавить в корзину» — еще один отличный способ улучшить качество обслуживания клиентов в вашем магазине и повысить коэффициент конверсии. И самое приятное, что это очень просто.

Допустим, вы хотите отобразить цену продукта и кнопку «Добавить в корзину» в публикации или на странице. Вам нужно использовать шорткод:

 [ add_to_cart sku="hoodie" ]

Шорткоды WooCommerce также позволяют перенаправлять покупателей на другой URL-адрес вместо добавления товара в корзину. Для этого нужно написать

 [ add_to_cart_url ]

для продукта с идентификатором 219.

Список полезных шорткодов для WooCommerce

Наконец, вот список самых полезных шорткодов WooCommerce, которые вы можете использовать на своем сайте.

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

 [ woocommerce_cart ]

• Проверить страницу

 [ woocommerce_checkout ]

• Учетная запись пользователя.

 [ woocommerce_my_account ]

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

 [ woocommerce_order_tracking ]

• Шорткод продуктов.

 [ products ]

• Рекомендуемые продукты.

 [ featured_products ]

• Продажа продуктов.

 [ sale_products ]

• Самые продаваемые товары.

 [ best_selling_products ]

• Последние продукты.

 [ recent_products ]

• Атрибут продукта.

 [ product_attribute ]

• Товары с самым высоким рейтингом.

 [ top_rated_products ]

• Категория продукта: для отображения продуктов в определенной категории.

 [ product_category ]

• Категории товаров: отображаются все категории товаров.

 [ product_categories ]

• Магазин сообщений: для отображения сообщений.

 [ shop_messages ]

• Фильтр товаров: отображает фильтр поиска товаров.

 [ woocommerce_product_filter ]

• Атрибут фильтра.

 [ woocommerce_product_filter_attribute ]

• Категория фильтра товаров.

 [ woocommerce_product_filter_category ]

• Цена фильтра.

 [ woocommerce_product_filter_price ]

• Тег фильтра товаров.

 [ woocommerce_product_filter_tag ]

• Рейтинг фильтров.

 [ woocommerce_product_filter_rating ]

• Распродажа с фильтром товаров: отображает живой фильтр для товаров со скидкой.

 [ woocommerce_product_filter_sale ]

• Сброс фильтра продукта: отображает кнопку для очистки всех активных фильтров.

 [ woocommerce_product_filter_reset ]

Шорткоды WooCommerce: заключение

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

Чтобы узнать больше об альтернативах для настройки вашего интернет-магазина, вы можете ознакомиться с нашими руководствами:

• Функция добавления в корзину программно в WooCommerce
• WooCommerce Ajax добавить в корзину

Что вы думаете о шорткодах WooCommerce? Пожалуйста, дайте нам знать ваши мысли в комментариях ниже.