Шорткоды в woocommerce

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

Отличия и преимущества 

Помимо WordPress существуют такие платформы, как Wix, Joomla, Drupal. Однако Woocommerce – самая популярная и бесплатная. С ней справляются даже непрофессионалы и квалитативно управляют медиаконтентом. 

Основными особенностями и преимуществами Woocommerce являются:

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

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

Возможности шорткодов 

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

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

Что символизируют короткие коды

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

Наглядный пример:

[product id=”10″]

Такой короткий код вставляется на какую-то страницу сайта. Его также можно использовать для записей, кодов шаблонов. В этом случае код оборачивают в php-функцию, которая и будет воспроизводить короткий код.

Как делаются корзины и оформляются заказы на общей веб-странице 

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

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

Вывод двух страниц на одной с помощью шорткодов woocommerce
Добавление на одну страницу два шорткода
Вывод страницы "Корзина" с помощью шорткода woocommerce
Реализация шорткода “Корзина”
Вывод страницы "Оформления заказа" с помощью шорткода woocommerce
Реализация “Страница оформления заказа” совместно со страницей “Корзина”

Внимание! Следует понимать, что после установки платформы, она создает не одну страницу, а стандартно четыре. Первая – Cart, которая используется для визуализации корзин. Вторая под названием Checkout необходима, чтобы делать оформление заказов. Третья или My Account является страницей профиля, т.е. личным кабинетом аккаунта. Четвертая – страница магазина.

На четвертой или Shop находится собственно сам магазин. Поэтому, чтобы объединить страницы, нужно кликнуть по иконке «Изменить», дождаться пока откроется страница с корзиной. Далее добавить код для оформления заказа под базовым с корзиной. После просто обновить страницу, проверить полученные данные на корректность.

Как выводить один или несколько продуктов 

Отображение шорткода на странице
Отображение шорткода на странице

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

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

  • [product id=”10″] – это товарный id, т.е. УИ (уникальный идентификатор) номер, присваиваемый автоматическим методом в тот момент, когда создается определенная позиция;
  • [product sku=”M32″] – это артикул SKU, который можно задавать вручную в то время, когда создается товарная позиция; это делается через кнопку «Артикул», куда при необходимости нужно ввести специальное значение и применить символы короткого кода;
  • [products ids=”1, 2, 3, 4, 5″] – данный код помогает вывести вместе несколько товарный позиций и функционирует по принципам схожим с вышеописанными, когда через запятые вставляются товарные идентификаторы. 

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

Так, значения Price и Date отфильтровывают позиции по стоимости от самых дорогих к самым дешевым и по дате добавления. Самые новые товары всегда будут расположены в начале. Для сортировки согласно идентификаторов используется код ID.

Пошаговая инструкция или как определить SKU/ID товара

Автоматическая установка артикла с помощью плагина
Автоматическая установка артикла с помощью плагина

Для применения указанных кодов нужно зайти в административную область сайта. Чтобы выяснить какой артикул/ идентификатор присвоен тому или иному товару, нужно поступить так:

Установка артикла вручную
Установка артикла вручную
  1. зайти в раздел с товарами; 
  2. навести курсором мышки на какой-то товар, посмотреть id, который отобразится под его наименованием;
  3. понять, какой задан SKU или вручную задать ему значение, можно если навести курсором мышки на наименование товара, а после кликнуть по кнопке «Изменить»;
  4. перейти в поле «Артикул» (прокрутив страницу сайта в самый ее низ) и задать нужное значение.

Чтобы вывести требуемую товарную позицию по ID/ SKU, рекомендуется открыть страницу, где будет осуществляться вывод товара. Следом перейти в раздел «Текст», дополнить его требуемым шорткодом. До того, как нажать на «Обновить», поменять ID/ SKU на личный.

Обратите внимание, что чтобы избежать ошибок, шорткоды woocommerce вводятся именно в разделе с иконкой «Текст». 

Как вывести товар из конкретного раздела 

Вывод товаров по категориям через шорткод
Вывод товаров по категориям через шорткод

Чтобы осуществить такой вариант вывода, разработан необходимый шорткод – [product_category category=”name”]. Данный элемент необходимо указать на конкретной странице, а затем ввести ярлык из требуемого раздела. Для выполнения такой задачи пользователю потребуется перейти в административную часть профиля.

Следом зайти в категорию «Товаров», чтобы выяснить какой именно ярлык присвоен категории. Найти пункт «Категории» и проверить в отображаемом списке из всех разделов, установленных на сайте, где находится столбец под названием «Ярлык». По факту ярлыком называется ни что иное, как наименование категорий, указанных на английском. Это название пользователь задет либо самостоятельно или же ему присваивается имя по умолчанию самой системой.  

Допустим, для вывода товарных позиций из раздела «jackets» требуется указать шорткоды с ярлыком под аналогичным названием. В итоге должно получиться [product_category category=”jackets”]. Данный короткий код также добавляется на любую нужную интернет-страницу. Для сортировки к этому символу используют значение orderby. В результате чего получают код со следующим набором параметров – [product_category category=”jackets” orderby=”date”].

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

Среди прочих полезных выделяется [best_selling_products per_page=”8″ columns=”2″], который позволяет выводить на страницы одни из самых чаще всего продаваемых товаров. При помощи этого шорткода задают число нужных позиций на странице или на одной строчке.  Благодаря чему можно понять, сколько на сайте товарных колонок, а также установить их требуемое число. 

Короткий код [sale_products per_rege=”10″] помогает сделать вывод на страницу те товарные позиции, что продаются на условиях акции, скидки. Нужен для той продукции, у которой в процессе заполнения в карточке проставляется и обычная стоимость, и с учетом скидки. Более того, есть возможность, чтобы задать число товаров, отсортировать их в одной строке.

 
Шорткод [top_rated_products per_rege=”8″] применяют, если хотят сделать вывод продукции с самым высоким рейтингом. Функция дает возможность получить отдельно взятые страницы, блоки и выводить туда конкретные товарные позиции. Для добавления этих полезных коротких кодов стоит воспользоваться инструкций для вышеописанных шорткодов.

Как найти и устранить неисправности

Проверка на ошибки в шорткоде
Проверка на ошибки в шорткоде

Иногда кажется, что шорткод был вставлен верно. При этом товар все-таки не отображен корректно. Если такое происходит, стоит перепроверить, как был отмечен шорткод среди <pre> тегов. Пугаться проблемы не стоит. Т.к. в случае с ее появлением просто нужно удалить прописанные теги, заново откорректировать данные на странице и нажать на раздел «Текст».

Выводы

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

Все функции запускаются и на страницах сайта, и в его записях. Доступны выводы на головной странице одновременно нескольких продуктов или от двух категорий. Также можно рекомендовать в статьях купить какое-то наименование товара. Указывать шорткоды лучше в текстовом редакторе. Чтобы избежать форматирования элементов в коротком коде, стоит перейти в текстовый режим.

Дорогие читатели спасибо, что дочитали эту статью до конца. Бонусом ловите ссылку на документацию от Woocommerce, где вы болле подробно можете ознакомиться со всеми шорткодами и их параметрами: https://woocommerce.com/document/woocommerce-shortcodes/ (откроется в новом окне)

Поделиться в: