Шорткоды WooCommerce: полное руководство для начинающих

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

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

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

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

Шорткоды WooCommerce — это простое, но надежное решение для кастомизации интернет-магазина. Проще говоря, это небольшие, многократно используемые фрагменты кода, которые заключаются в квадратные скобки — например, [this_is_a_shortcode]. Эти команды дают WordPress указание выполнить определенное действие или отобразить динамический контент прямо в том месте, где вы их вставите.

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

• Демонстрация товаров в любом месте, а не только на стандартной странице магазина, с помощью [products], [featured_products] или [sale_products].
• Доступ к полной корзине и всей ее функциональности с помощью [woocommerce_cart].
• Размещение процесса оформления заказа на любой странице с помощью [woocommerce_checkout].
• Возможность для пользователей просматривать свои заказы и управлять данными через [woocommerce_my_account].
• Отображение кнопки “добавить в корзину” для одного товара с помощью [add_to_cart] — и не только.

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

Как на самом деле работают шорткоды WooCommerce?

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

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

Как видите, шорткоды WooCommerce можно настраивать с помощью атрибутов или параметров. Это дополнительные инструкции внутри скобок шорткода, которые изменяют его поведение. Например, в шорткоде [products] вы можете использовать атрибут limit="4", чтобы отобразить только четыре товара, или columns="2", чтобы расположить их в две колонки.

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

Основные шорткоды WooCommerce для эффективного управления интернет-магазином

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

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

Шорткоды для ключевых страниц WooCommerce

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

• Страница корзины: [woocommerce_cart]

Шорткод [woocommerce_cart], который часто называют woocommerce cart page shortcode или просто woocommerce cart shortcode, отображает содержимое корзины покупателя, включая добавленные товары, их количество, цены и, что особенно важно, кнопку “Перейти к оформлению” (Proceed to Checkout).

Это ключевой элемент вашей воронки продаж, поэтому убедитесь, что все работает корректно.

Как использовать: Просто вставьте [woocommerce_cart] в назначенную страницу корзины.

• Страница оформления заказа: [woocommerce_checkout]

Когда покупатели готовы совершить покупку, в дело вступает код оформления заказа — [woocommerce_checkout]. Он формирует полноценную страницу оформления, где клиенты вводят платежные и адресные данные, выбирают способ доставки и предпочитаемый метод оплаты. Именно здесь завершается продажа.

Как использовать: Добавьте [woocommerce_checkout] на страницу, которую вы назначили в качестве страницы оформления заказа.

• Страница “Мой аккаунт”: [woocommerce_my_account]

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

Как использовать: Добавьте [woocommerce_my_account] на страницу, которую вы хотите использовать как “Мой аккаунт”.

• Отслеживание заказа: [woocommerce_order_tracking]

Шорткод [woocommerce_order_tracking] позволяет покупателям проверять статус своих заказов, вводя номер заказа и адрес электронной почты — без необходимости входа в аккаунт.

Как использовать: Разместите [woocommerce_order_tracking] на отдельной странице отслеживания заказов, например “Отследить заказ”. Также можно добавить его на страницу “Мой аккаунт”.

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

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

• Общее отображение товаров: [products]

Шорткод [products] — пожалуй, самый часто используемый среди товарных шорткодов WooCommerce. Это основной инструмент для вывода товаров в различных форматах с помощью атрибутов. Список параметров для этого шорткода довольно обширный, включая следующие:

• ids или skus — отображение конкретных товаров.
• limit — количество товаров для отображения (например, limit="6").
• columns — количество колонок в сетке (например, columns="3").
• orderby — сортировка товаров (например: date, title, popularity, rating, rand). Часто используются orderby="date" или orderby="popularity".
• order — порядок сортировки (ASC — по возрастанию, DESC — по убыванию).
• category — отображение товаров из определенных категорий (по slug).
• tag — отображение товаров с определенными тегами.
• on_sale="true" — показать только товары по акции.
• best_selling="true" — вывести самые продаваемые товары.
• top_rated="true" — отобразить товары с наивысшим рейтингом.
• visibility — управление видимостью товара (visible, catalog, search, hidden).

Примеры:

[products limit="4" columns="4" category="apparel" orderby="date" order="DESC"] — отображает 4 новейших товара из категории "apparel" в 4 колонках.

[products ids="25, 30, 42" columns="3" orderby="title"] — выводит три конкретных товара, отсортированных по названию.

• Определенные типы товаров:

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

• • [featured_products limit="3" columns="3"] — быстро показывает ваши избранные товары.
  • [sale_products per_page="6" columns="2"] — отображает 6 товаров со скидкой в 2 колонках.
  • [best_selling_products limit="5" columns="5"] — подчеркивает 5 самых продаваемых товаров.
  • [top_rated_products per_page="4" columns="4"] — демонстрирует 4 самых высоко оцененных товара.
  • [recent_products limit="8" columns="4"] — удобно для раздела “Новинки”.
  • [related_products limit="3" columns="3"] — обычно используется на странице отдельного товара, отображая сопутствующие товары.

• Категории и теги товаров:

• [product_category category="your-category-slug" per_page="6" columns="3"] — отображает товары из одной заданной категории.
• [product_categories number="0" parent="0"] — выводит список всех категорий верхнего уровня. Отлично подходит для отдельной страницы “Покупки по категориям” или боковой панели.
• Чтобы отобразить товары по тегу, обычно используют атрибут tag в основном шорткоде [products], например: [products tag="summer-specials" columns="4"].

Шорткоды WooCommerce, ориентированные на действия

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

• Кнопка/ссылка добавления в корзину: [add_to_cart] и [add_to_cart_url]

Шорткод [add_to_cart] в WooCommerce полезен для создания возможностей прямой покупки за пределами стандартных страниц магазина или продукта.

[add_to_cart id="99"] — отобразит кнопку “Добавить в корзину” для товара с ID 99. Можно добавить атрибуты, такие как show_price="true" или style=";".

[add_to_cart_url id="99"] — не отображает кнопку, а выводит ссылку, которая добавляет товар с ID 99 в корзину. Полезно для кастомных кнопок или ссылок.

Как использовать: вставляйте эти шорткоды в блоги с обзорами товаров, на кастомные лендинги с акциями или даже в email-рассылки (используя URL-ссылку).

• Сообщения магазина: [shop_messages]

Этот шорткод используется для отображения системных сообщений WooCommerce (например: “Товар добавлен в корзину”, “Купон успешно применен” и т.д.) на страницах, которые не являются стандартными страницами WooCommerce. Используется при создании магазинов с высокой степенью персонализации.

5 советов по использованию шорткодов WooCommerce

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

Вставляйте шорткоды корректно. Независимо от того, используете ли вы WordPress Classic Editor или же более новый редактор блоков Gutenberg, вставлять шорткоды WooCommerce довольно нетрудно. В Classic Editor шорткод просто вставляется в текстовую область. В Gutenberg лучше использовать специальный блок “Shortcode” — это гарантирует, что система правильно его распознает и обработает.

Следите за синтаксисом атрибутов. Сила многих шорткодов WooCommerce заключается именно в атрибутах (например, limit="5", category="apparel"). Будьте особенно внимательны к синтаксису. Всегда заключайте значения атрибутов в прямые кавычки ("), а не в фигурные (“ ”), которые иногда незаметно появляются при копировании текста. Также обязательно проверяйте, что вы используете допустимые значения для каждого атрибута, как указано в официальной документации WooCommerce.

Будьте осторожны при использовании нескольких шорткодов на одной странице. Часто можно использовать несколько шорткодов на одной странице. Однако, если что-то работает не так, как ожидалось (например, шорткод отображается как обычный текст или ломается верстка), сначала проверьте наличие опечаток. Убедитесь, что плагин WooCommerce активен. Если проблема не исчезает, временно отключите другие плагины, чтобы проверить возможные конфликты.

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

В ecommerce даже задержка в одну секунду может повлиять на конверсии, снижая их до 7%. Для сложных макетов или узкоспециализированного функционала более эффективным решением могут стать особые конструкторы страниц или даже индивидуальная разработка.

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

Выше базового уровня: улучшите опыт работы с WooCommerce с помощью eSputnik

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

eSputnik — это платформа управления клиентскими данными (CDP), созданная для того, чтобы помочь владельцам интернет-магазинов максимально эффективно использовать данные о клиентах и увеличивать продажи. Теперь вы можете интегрировать eSputnik в свой магазин без лишних усилий с помощью нашего бесплатного плагина для WooCommerce. Установите плагин, синхронизируйте данные магазина с нашей системой — и начните использовать мощные новые возможности, включая:

Рекомендации товаров на базе ИИ: Когда встроенной опции “Сопутствующие товары” недостаточно, на помощь приходят товарные рекомендации от eSputnik на основе искусственного интеллекта. Система анализирует поведение клиентов, историю покупок и даже скрытые закономерности, чтобы показать наиболее релевантные товары — увеличивая возможности для кросс-продаж и апселлинга.

Точечный таргетинг с сегментацией клиентов: Поймите свою аудиторию на более глубоком уровне. Благодаря надежным функциям сегментации клиентов вы можете создавать узконаправленные кампании, которые напрямую отвечают индивидуальным потребностям и предпочтениям клиентов. С eSputnik вы можете использовать демографическую, географическую, RFM-, параметрическую и другие виды сегментации для любых сценариев. А если не уверены, какой вариант выбрать — наша мощная предиктивная сегментация может оказаться именно тем, что вам нужно.

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

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

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

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

Special Request Inline