Самый подробный мануал по шорткодам WooCommerce

WooCommerce — ведущий плагин для онлайн-торговли на WordPress, позволяющий миллионам компаний превратить свои сайты в надежные интернет-магазины. Однако многие люди не знают о его шорткодах.

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

Давайте узнаем, как эти крошечные фрагменты кода могут существенно повлиять на сайт интернет-магазина.

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

Шорткоды были введены в WordPress 2.5 еще в 2008 году. Они представляют собой небольшие фрагменты кода, заключенные в квадратные скобки, например: [shortcode]. Они служат в качестве заполнителей, которые указывают ВордПресс на выполнение нужной функции или динамическое отображение определенного контента.

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

Начало работы с шорткодами WooCommerce

Чтобы использовать шорткоды ВуКомерс на своем сайте ВордПресс, убедитесь, что расширение WC установлено и активировано.

Для этого войдите в дашборд WordPress, перейдите в раздел «Плагины» > «Добавить новый» и найдите «WooCommerce». Затем нажмите «Установить сейчас» на WC и активируйте его.

Далее вы можете следовать указаниям мастера настройки ВуКомерс, чтобы отрегулировать основные параметры, такие как данные магазина, способы оплаты и варианты доставки.

Основной синтаксис шорткодов

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

[shortcode attribute1="value1" attribute2="value2"]

Например, шорткод [products limit=”4″ columns=”2″] выводит четыре товара в двухколоночном макете.

Как добавлять шорткоды в посты, страницы и виджеты

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

В этом руководстве я буду использовать Гутенберг:

Допустим, вы хотите отобразить сетку последних товаров на главной. Используя редактор блоков, введите шорткод: [products limit=”3″ columns=”3″] и обновите или опубликуйте свою страницу.

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

Основные шорткоды WooCommerce

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

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

Шорткоды для отображения товаров

На сайте [products] является одним из самых универсальных шорткодов ВуКомерс. Он позволяет отображать список товаров на основе различных критериев.

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

• limit — количество отображаемых товаров. По умолчанию -1 (показывать все).
• columns — количество колонок. По умолчанию 4.
• orderby — упорядочить товары по определенным критериям, таким как дата, название, цена, популярность и т. д.
• order — порядок продуктов. Может быть ASC (по возрастанию) или DESC (по убыванию).
• category — название категории товара.
• tag — метка товара.
• paginate — включить пагинацию. Может быть true или false. По умолчанию — false.

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

[products limit="8" columns="4" orderby="date" order="DESC"]

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

[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]

Также есть возможность отобразить продукты из определенной категории. Атрибут category позволяет это сделать. Шорткод ниже отображает 6 товаров из категории «аксессуары» в трехколоночном макете:

[products category="accessories" limit="6" columns="3"]

Отображаются 5 товаров, потому что в настоящее время в категории их только 5. 7 будут доступны, когда в нее добавят еще 2, но из-за ограничения будет отображаться только 6.

На сайте [product] можно также использовать для отображения одного товара на основе его ID или SKU, добавив атрибут id или sku. Например, шорткод ниже показывает продукт с идентификатором 22.

[product id="22"]

Если хотите отобразить несколько продуктов выборочно, то используйте атрибуты ids и skus.

[products columns="3" ids="22,35,26"]

Этот шорткод показывает товары с идентификаторами 22, 35 и 26.

Еще один шорткод, который может вам понадобиться, — это [product_page]. Он похож на [product], но показывает весь раздел товара, включая вкладки, сопутствующие продукты и отзывы. Например, отобразим полную страницу с идентификатором 22.

[product_page id="22"]

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

У вас также есть доступ к атрибуту cat_operator, который позволяет управлять фильтрацией продуктов по категориям. Для него доступны следующие варианты:

• AND — отображать товары в выбранных категориях.
• IN — показывать продукты, принадлежащие любому выбранному разделу (значение по умолчанию).
• NOT IN — отображение товаров, не относящихся к таким категориям.

Например, если хотите показывать продукты в разделах «одежда» и «аксессуары», то используйте оператор AND:

[products category="clothing, accessories" cat_operator="AND"]

Вы также можете исключить их из определенной категории с помощью оператора NOT IN. Например, если желаете отобразить все варианты, кроме товаров из раздела «Одежда».

[products category="clothing" cat_operator="NOT IN"]

Шорткоды корзины и оформления заказа

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

Например, в ВуКомерс есть вариант [woocommerce_cart]. Он может отображать корзину, включая все товары, количество и общую цену.

Этот шорткод должен быть размещен на странице, обозначенной как корзина.

Аналогично, [woocommerce_checkout] отображает раздел оформления заказа. Там пользователи могут ввести свои данные для выставления счета и доставки и сделать покупку.

Этот шорткод должен быть размещен на странице, обозначенной как оформление заказа.

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

Также ВуКомерс предлагает шорткод [woocommerce_order_tracking]. Он поможет отобразить форму, в которую пользователи могут ввести идентификатор и электронную почту, чтобы отслеживать заказы.

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

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

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

• number — количество категорий для отображения.
• columns — число колонок.
• orderby — упорядочить категории по определенным критериям.
• order — порядок разделов. Он может быть ASC или DESC.
• hide_empty — скрывать пустые категории. Может быть 1 (true) или 0 (false).

Например, если хотите отобразить категории товаров в сетке, то можете использовать следующий шорткод:

[product_categories number="12" columns="4" orderby="name" order="ASC"]

Он отображает 12 разделов продуктов в макете из 4 колонок, отсортированных по названию в порядке возрастания.

Если добавите миниатюры, они будут отображаться здесь, улучшая внешний вид вашего сайта. Можете вставить их, перейдя в «Товары» > «Категории», и отредактировав определенный раздел. Затем прокрутите страницу до поля «Миниатюра», чтобы загрузить изображение.

Аналогично, если хотите отобразить продукты из определенной категории, можете использовать шорткод [product_category]. Он принимает атрибут per_page, который задает количество товаров, показываемых на странице. Он также работает с category для указания названия категории продуктов и columns для числа колонок.

Например, этот шорткод отображает 8 товаров из раздела «Одежда» в четырехколоночном макете.

[product_category category="clothing" per_page="8" columns="4"]

Расширенные шорткоды WooCommerce

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

Кастомизация отображения товаров

На сайте [products] очень гибкий шорткод и позволяет использовать различные комбинации атрибутов для фильтрации и отображения товаров.

Вот еще несколько элементов, которые можно применять:

• on_sale — отображать ли товары на распродаже (true или false).
• best_selling — показывать ли самые продаваемые продукты. Может быть true или false.
• top_rated — отображать ли товары с самым высоким рейтингом. Также может быть true или false.

С помощью этого параметра можно отображать товары, находящиеся в продаже.

[products on_sale="true" limit="8" columns="4"]

У вас также есть возможность показывать самые продаваемые товары в категории, используя шорткод ниже:

[products category="accessories" best_selling="true" limit="6" columns="3"]

Он отображает 6 наиболее покупаемых продуктов из раздела «Аксессуары» в 3-колоночном макете.

Шорткоды для конкретных случаев использования

Шорткоды WooCommerce можно кастомизировать под конкретные нужды, предоставляя динамическое содержимое на основе различных критериев. Например, [recent_products] применяется для демонстрации недавно добавленных товаров в интернет-магазине ВуКомерс.

[recent_products limit="5" columns="5"]

Он отображает 5 последних добавленных продуктов в пятиколоночном макете.

Аналогично, шорткод [featured_products] можно использовать для отображения товаров, отмеченных как популярные в вашем интернет-магазине WooCommerce.

[featured_products limit="6" columns="3"]

Он показывает 6 товаров в макете из 3 колонок.

Вы можете отметить продукт как особенный. Нужно перейти на страницу товара и пометить его звездой, как показано на изображении ниже.

Предположим, вы проводите распродажи для некоторых товаров. Можете использовать шорткод [sale_products], чтобы отобразить варианты, находящиеся в продаже.

[sale_products limit="8" columns="3"]

Чтобы установить цену распродажи для своих товаров, перейдите в раздел «Продукты» > «Все продукты» и нажмите на тот, который хотите предложить со скидкой. Затем прокрутите страницу вниз до «Данные о продукте».

Если введете любое значение в поле WooCommerce Sale price ($), это будет цена, которую посетители увидят на главной странице интернет-магазина. Оно отменяет значение «Обычная цена ($)». Если не устраиваете распродажу, оставьте это поле пустым, чтобы случайно не уценить продукты.

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

[best_selling_products limit="10" columns="4"]

Шорткод [top_rated_products] также даст возможность отображать продукты с наиболее высоким рейтингом в вашем онлайн-магазине WooCommerce.

[top_rated_products limit="4" columns="2"]

Заключение

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

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