WooCommerce с шорткодами: Простая интеграция в WordPress

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

Важные шорткоды WooCommerce с первого взгляда

Шорткод

Аргумент

Объяснение, функция

[woocommerce_cart]

Отображает корзину покупок

[woocommerce_checkout]

Отображает страницу оформления заказа

[woocommerce_my_account]

Показывает учетную запись вошедшего пользователя

[products]

Различные аргументы, также могут быть объединены друг с другом

Отображает продукты, которые можно отфильтровать по критериям

[product_category]

ID, название категории

Отображает продукты в выбранной категории

[product_categories]

Перечисляет все категории магазина

[product_page]

ID

Отображает одну страницу товара на основе его ID

[add_to_cart]

ID

Отображает подсказку «Добавить в корзину», используя ID продукта

[woocommerce_order_tracking]

Отслеживание заказов

[woocommerce_my_account]

включая «лимит»

Список заказов

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

По сути, шорткод — это большие участки кода в более короткой форме. Шорткоды программируются как функции и получают уникальное имя. С помощью этих «шорткодов» определенные компоненты или процессы могут быть интегрированы в элементы сайта без особых знаний программирования. Структура шорткодов в WordPress закреплена в CMS. Они записываются в квадратных скобках. Например, чтобы использовать плагин WordPress «Responsive Lightbox & Gallery» для вставки галереи в любое место существующей страницы или поста:

[rl_gallery id="9876"]

Строка «rl_gallery» — это фактический шорткод, а именно заполнитель для инструкции «поместить галерею в эту позицию на странице или в посте». ID» определяет, какая галерея будет вставлена из существующих. Форма [shortcode attribute=»123″ argument=»abc» … ] используется для всех шорткодов.

Другая форма шорткода состоит из строки

[shortcode]…[/shortcode]

Такие короткие формы используются, в частности, для создания многоколоночных макетов, вкладок или кнопок.

В системе магазинов WooCommerce шорткоды используются для выборочного отображения содержимого магазина. Благодаря разнообразию дополнительной информации в отдельных шорткодах можно создать множество специальных изображений для продвижения продажи товаров из магазина. Например, это компоненты на страницах сайта с таким содержанием, как «Клиенты, купившие X, также купили Y и Z», «Самое продаваемое устройство в этой категории» или «На этой распродаже осталось всего 3 дня — успейте купить». Как это реализуется в деталях, будет показано ниже на примере небольшого магазина WooCommerce.

Совет

Пакеты WordPress с гибким плагином электронной коммерции WooCommerce предлагают вам преимущества популярной CMS и магазина из одного источника.

Удобные шорткоды для WooCommerce

Для практического использования WooCommerce после установки плагина уже созданы страницы с такими шорткодами, как «Мой аккаунт», «Корзина» или «Оформление заказа». Если вы откроете страницу «Корзина» в панели управления, визуальный редактор покажет шорткод напрямую. Если посмотреть в текстовом редакторе, то можно увидеть, что этот код заключен в скрытый HTML-код, что указывает на то, что шорткод встроен. Таким образом, шорткод также виден в визуальном редакторе:

<!-- wp:shortcode -->[woocommerce_cart]<!-- /wp:shortcode -->

Показывать определенные товары

Основой любого интернет-магазина являются товары. Так обстоит дело и с WooCommerce, доступным через приборную панель WordPress.

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

[products ids="9581"]
Примечание .

Обратите особое внимание на написание между кавычками в аргументах. В Windows помогает комбинация клавиш ALT+0034, а в macOS — Shift+2. Все остальные открывающие и закрывающие кавычки не будут распознаваться в шорткодах.

Если необходимо отобразить несколько товаров, идентификаторы должны быть объединены в строку и разделены запятыми:

[products ids="9581, 9577, 9352"]

Аргумент «ids» всегда пишется во множественном числе, независимо от того, используется один или несколько ID. Размещение отдельных продуктов все еще является исключением, так как несколько продуктов вместе обычно имеют больше смысла.

Другие аргументы могут быть использованы с шорткодом products:

[products limit="5" columns="2" orderby="date" order="ASC" visibility="visible"]

Отдельные аргументы вызывают:

  • limit: ограничение количества отображаемых продуктов
  • orderby: различные способы сортировки вывода, например, по ID, дате, популярности (если используется в магазине), встречаемости в постах или случайным образом
  • порядок: сортировка по возрастанию или убыванию (ASC/DESC) выбранного аргумента orderby
  • видимость: определяет, будут ли продукты видны в магазине и в результатах поиска
  • paginate: включает постраничную сортировку для обширных предложений товаров. Атрибут активации — «true». Значение «false» является предустановленным.
  • columns: количество колонок на странице товара магазина. Важный атрибут для четкой организации страниц.

Дополнительные аргументы, такие как «атрибут», «условия», «категория» или «тег», помогают выбрать отображение товара с помощью специальных критериев в соответствии с содержанием. Важным аргументом является так называемый SKU (Stock Keeping Unit) — термин, используемый в розничной торговле. Это уникальный код, который присваивается одному товару. Аргумент «sku» также применим к шорткодам товаров WooCommerce. В то же время SKU — это проверенное средство систематического управления всеми товарами.

Шорткод в примере магазина:

[products category="photo-equipment"]

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

Фильтрация товаров по категориям

Для этой задачи используйте [product_category]. Таким образом, категория отображается в совокупности, которая должна быть представлена атрибутами, разделенными запятыми, такими как «ids» или «category».

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

Отдельные страницы WooCommerce с помощью шорткода

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

[product_page id="9350"]

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

Если продукт описан по-другому, функция «Добавить в корзину» (на иллюстрации справа) также может быть интегрирована в нужную страницу или пост WordPress с помощью этого шорткода:

[add_to_cart id="1234"]

Доступ к (красиво заполненной) корзине осуществляется с помощью шорткода [woocommerce_cart]:

Поэтому этот раздел процесса покупки можно использовать в любом месте сайта. То же самое относится и к оформлению заказа, которое интегрируется с помощью шорткода [woocommerce_checkout].

Используя [woocommerce_order_tracking], покупатель может увидеть статус своего заказа после входа в магазин. Для этого покупатель должен ввести данные своего заказа. Этот шорткод не имеет аргументов.

Все заказы отображаются на странице «мой счет» с помощью шорткода [woocommerce_my_account]. Количество отображаемых заказов может быть ограничено. Значение «-1» показывает все заказы.

Примечание

Все шорткоды вроде бы вставлены правильно, а вывод все равно не работает? Частой ошибкой является наличие шорткодов, заключенных в теги <pre>[shortcode]</pre>. Их необходимо удалить с помощью редактора текста/кода. После этого все должно работать.

Как создавать собственные шорткоды?

Чтобы использовать собственные шорткоды в WordPress, необходимо изменить файл functions.php. Именно здесь вы можете определить нужные шорткоды с помощью собственных функций, которые вы запрограммировали сами.

Примечание

В файле functions.php часто сразу появляется сообщение: «Редактируйте этот файл, только если вы точно знаете, что делаете».

Один из вариантов может выглядеть следующим образом. Это было проверено на существующем сайте WordPress без сообщения об ошибке:

<?php
function myshortcode_function(){
return "<h1>Hello, the owner is programming themselves</h1>";
}
add_shortcode('myshortcode', 'myshortcode_function');
>

 

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

Полезные плагины шорткодов — не только для WooCommerce

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

Woo Shortcodes Kit

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

Shortcodes Ultimate

Плагин шорткодов для WooCommerce Shortcode Ultimate позволяет использовать более 50 шорткодов, включая живой предварительный просмотр. Плагин работает с Gutenberg, а также является достаточно отзывчивым. Разработчик обещает, что он будет работать с любой темой. Существует также платная, премиум-версия (без подписки).

Шорткодер

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

[sc name="abcde123…"]

Содержимое может быть HTML, JavaScript или CSS. Дополнительные параметры расширяют возможности этого плагина шорткодов WooCommerce. Редактирование может осуществляться в виде кода, текста или в визуальном режиме, что делает этот плагин многофункциональным.

Совет

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

Оцените статью
cdelat.ru
Добавить комментарий