WooCommerce - провідний плагін електронної комерції для WordPress, що дозволяє мільйонам компаній перетворювати свої веб-сайти на надійні інтернет-магазини. Однак багато людей не знають про його короткі коди/шорткоди.
У цьому посібнику пояснюється все, що потрібно знати про шорткоди WooCommerce: від основних шорткодів, які відображають товари та керують кошиками, до розширених налаштувань для індивідуального досвіду користувача.
Давайте розглянемо, як ці маленькі фрагменти коду можуть суттєво вплинути на веб-сайт електронної комерції.
Що таке шорткод?
Шорткоди були введені в WordPress 2.5 ще у 2008 році. Це невеликі фрагменти коду, укладені у квадратні дужки, наприклад: [shortcode]. Вони діють як заповнювачі, які повідомляють WordPress про необхідність виконання певної функції або динамічно відобразити певний контент.
Наприклад, замість того, щоб вручну кодувати складну сітку товарів, можете використовувати шорткод для її миттєвого створення та відображення на сайті. Це заощаджує час і знижує ймовірність помилок, спрощуючи підтримку та оновлення сайту.
З роками шорткоди розвивалися, стаючи більш потужними та універсальними. WooCommerce використовує цю функцію, пропонуючи низку шорткодів, спеціально розроблених для функціональності електронної комерції.
Початок роботи із шорткодами WooCommerce
Для цього увійдіть в панель керування WordPress, перейдіть до розділу «Плагіни» > «Додати новий» і знайдіть «WooCommerce». Потім натисніть "Встановити зараз" для плагіна WooCommerce та активуйте його.
Тепер можна скористатися майстром налаштування WooCommerce, щоб налаштувати основні параметри, такі як відомості про магазин, способи оплати та варіанти доставки.
Під час встановлення плагіна WooCommerce сайт WordPress автоматично оновлюється сторінками «Кошик», «Оформлення замовлення» та «Мій обліковий запис». Однак, ви можете зробити більше різних дій зі своїми продуктами, і це те, що ми розглянемо за допомогою шорткодів.
Базовий синтаксис коротких кодів
Короткі коди WooCommerce часто включають додаткові атрибути для їх виведення. Ось базова структура:
[shortcode attribute1="value1" attribute2="value2"]Наприклад, шорткод [products limit="4" columns="2"]відображає чотири товари у двоколоночному форматі.
Як додавати шорткоди в записи, сторінки та віджети
Короткі коди можна додавати практично до будь-якого місця WordPress. Можна додати їх до запису або на сторінку, просто набравши або вставивши їх у будь-який текстовий редактор WordPress або блок коротких кодів, якщо ви використовуєте Gutenberg або будь-який конструктор сторінок.
Для цього керівництва скористаємося Гутенбергом:
- Перейдіть до розділу «Записи» або «Сторінки» на панелі керування WordPress.
- Відкрийте публікацію/сторінку, куди потрібно додати шорткод.
- Натисніть на значок + , щоб додати новий блок.
Дії додавання шорткоду з блоками Gutenberg в WordPress.
- Знайдіть та виберіть блок шорткоду.
- Вставте код у блок.
Наприклад, припустимо, що потрібно відобразити сітку останніх товарів на домашній сторінці. Використовуючи редактор блоків, введіть шорткод: [products limit="3" columns="3"]и Оновити або Опублікувати сторінку.
Відображення сітки товарів за допомогою шорткоду у редакторі блоків WordPress.
Це дозволить створити сітку з трьома продуктами, які відображаються в одному стовпці, що стане динамічним та привабливим способом продемонструвати останні пропозиції.
Ви також можете додавати шорткоди до віджетів, перейшовши до розділу Зовнішній вигляд > Віджети. Додайте текстовий віджет у потрібну область віджетів (бічна панель, нижній колонтитул тощо). Введіть шорткод у текстове поле всередині віджета та збережіть віджет.
Основні шорткоди WooCommerce
WooCommerce надає безліч коротких кодів, які дозволяють відображати товари, керувати кошиком покупок та покращувати процес оформлення замовлення.
Давайте розглянемо найважливіші шорткоди WooCommerce, їх атрибути та докладні приклади, які допоможуть ефективно використати їх у своєму магазині.
Дивіться також:
Як використовувати шорткод WordPress у класичному редакторі.
Шорти відображення товару
[products]— один із найуніверсальніших шорткодів WooCommerce. Він дозволяє відображати список продуктів на основі різних критеріїв.
Він має безліч властивостей, що дозволяють демонструвати продукцію так, як вам зручно:
limit— Кількість товарів, що відображаються. За замовчуванням-1(Відображати все).columns- Кількість стовпців. За замовчуванням4.orderby— Замовляйте товари за певними критеріями, такими якdate,title,price,popularityі т.д.order- Порядок продуктів. Може бутиASC(зростаючим) абоDESC(Зменшуючим).category- Ярлик категорії товарів.tag- Назва тега продукту.paginate- Включає пагінацію. Може бутиtrueабоfalse. За замовчуваннямfalse.
Наприклад, необхідно відобразити останні вісім товарів у макеті з чотирьох стовпців, відсортованих за датою їх додавання в порядку зменшення. Можете використовувати наступний шорткод:
[products limit="8" columns="4" orderby="date" order="DESC"]
Відображення восьми останніх товарів у чотириколоночному форматі.
Якщо ви також хочете включити розбиття на сторінки, щоб користувач міг отримати доступ до інших продуктів при відображенні ліміту, використовуйте атрибут paginate.
[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]Також можна відобразити товари із певної категорії. Це дозволяє зробити атрибут category. Короткий код нижче відображає шість товарів з категорії «аксесуари» у триколоночному макеті:
[products category="accessories" limit="6" columns="3"]
Відображення шести товарів з певної категорії у триколоночному макеті.
Оскільки у категорії зараз лише п'ять товарів, то вони 5 і відображаються. Сім будуть доступні, коли до цієї категорії додадуть ще два, але через ліміт з'являться лише шість.
[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(помилковий).
Наприклад, щоб відобразити категорії товарів у сітці, можна використовувати наступний код:
[product_categories number="12" columns="4" orderby="name" order="ASC"]
Відображайте категорії у сітці із чотирьох стовпців.
Він відображає 12 категорій товарів у сітці із чотирьох стовпців, відсортованих за назвою у порядку зростання.
Якщо ви додасте мініатюри, вони з'являться тут замість іконки та покращать зовнішній вигляд сайту. Ви можете додати мініатюри, перейшовши до Продукти > Категорії > відредагувавши певну категорію, а потім прокрутіть до поля Мініатюра, щоб завантажити зображення.
Аналогічно, якщо ви бажаєте відобразити продукти з певної категорії, використовуйте [product_category]. Він приймає атрибут per_pageщо вказує кількість товарів для відображення на сторінці. Він також приймає category для вказівки посилання на категорію та columns для кількості шпальт.
Наприклад, цей шорткод відображає вісім товарів з категорії «Одяг» у чотириколоночному макеті:
[product_category category="clothing" per_page="8" columns="4"].
Показано вісім товарів із категорії «Одяг».
Розширені шорткод WooCommerce
Крім базових коротких кодів відображення продукту, 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"]Цей шорткод відображає шість товарів, що найбільше продаються з категорії «аксесуари» в триколоночному форматі.
Шорткод для особливих випадків використання
Короткі коди WooCommerce можна адаптувати під конкретні випадки використання, надаючи динамічний контент на основі різних критеріїв. Наприклад, [recent_products] можна використовувати для відображення нещодавно доданих продуктів.
[recent_products limit="5" columns="5"]Він відображає п'ять останніх доданих продуктів у форматі п'яти колонок.
аналогічним чином [featured_products] використовується для відображення товарів, зазначених як рекомендовані. Цей шорткод відображає шість вибраних продуктів у триколоночному форматі:
[featured_products limit="6" columns="3"]
Відобразіть шість вибраних продуктів у триколоночному форматі.
Можна відзначити продукти як вибрані/рекомендовані, перейшовши на сторінку продуктів і позначивши їх зірочкою, як показано нижче.
Як відзначити товар як рекомендований.
Припустимо, ви проводите розпродаж деяких конкретних продуктів. Тоді використовуйте [sale_products]для відображення товарів, що в даний час продаються:
[sale_products limit="8" columns="3"]Щоб встановити ціну продажу для конкретних товарів, перейдіть до розділу Продукти > Всі продукти та натисніть на товар, який пропонуєте зі знижкою. Потім перейдіть до розділу Інформація про продукт.
Відображення до восьми товарів, які зараз продаються.
Якщо ви введете будь-яке значення у полі WooCommerce Ціна продажу ($)Це буде ціна, яку відвідувачі побачать на передній панелі магазину. Це поле перевизначає значення Звичайна ціна ($). Якщо ви не проводите розпродажу, залиште це поле порожнім, щоб випадково не зробити знижку на товари.
Якщо у вас є плагін, який допомагає налаштовувати найпопулярніші товари, то можете використовувати [best_selling_products]для відображення товарів, що найбільше продаються:
[best_selling_products limit="10" columns="4"]Шорткод [top_rated_products] також може відображати найрейтинговіші товари:
[top_rated_products limit="4" columns="2"].Шорткод WooCommerce - це потужні інструменти, які покращують функціональність інтернет-магазину. Освоєння цих коротких кодів дозволяє настроювати відображення товарів, управляти кошиком покупок та оптимізувати процес оформлення замовлення.
Радимо поекспериментувати з різними комбінаціями шорткодів, щоб знайти ідеальне налаштування для вашого магазину. За допомогою цих інструментів можна створити динамічний та привабливий сайт WooCommerce, який відповідатиме потребам ваших клієнтів.
Джерело: kinsta.com
Коментарі до запису: 0