WooCommerce – це безкоштовний плагін для управління функціональністю електронної комерції вашого сайту WordPress. Це найбільш популярне у світі рішення з відкритим кодом для створення та управління магазином в Інтернеті, і тому Esl з гордістю інтегрується з ним.
Esl представляє новий вбудований WooCommerce Engine, який дозволяє вам побудувати весь ваш магазин з ним. Включаючи основну сторінку магазину, сторінку одиничного продукту, архіви продуктів, кошик, оформлення замовлення та сторінки облікового запису.
Щоб розробити ці макети, Esl пропонує елементи та типи шаблонів, специфічні для WooCommerce.
Деякі елементи з’являються тільки при редагуванні конкретного типу шаблону.
Елемент Деталі клієнта на оформленні замовлення, наприклад, доступний лише під час редагування шаблону Оформлення замовлення WooCommerce.
Початок роботи
Щоб отримати доступ до WooCommerce Engine в Esl, встановіть і активуйте безкоштовний плагін WooCommerce, доступний в офіційному репозиторії WordPress або через вашу панель управління WordPress у розділі Плагіни → Додати новий.
Після активації ви можете налаштувати магазин, використовуючи майстер налаштування на сайті або зробити це вручну через меню налаштувань WooCommerce.
Зверніть увагу, що під час роботи з майстром налаштувань вам не потрібно вибирати нову тему, оскільки Esl вже є темою і повністю підтримує WooCommerce.
З налаштуваннями завершеною та після додавання деяких продуктів, ви можете почати візуально створювати ваші макети WooCommerce з Esl.
Шаблони WooCommerce
З активованим WooCommerce ви можете візуально створювати і стилізувати наступні шаблони WooCommerce в Esl:
| Тип шаблону | Опис |
| Один продукт | Сторінка окремого продукту. |
| Архів продуктів | Архівні сторінки, такі як катагорії продуктів, теги, атрибути тощо. Встановіть видимість за допомогою умов шаблону. |
| Кошик | Кошик (коли він містить продукти). |
| Порожній кошик | Порожній кошик (коли він не містить жодних продуктів). |
| Оформлення замовлення | Екран оформлення замовлення, де клієнт вводить платіжні та адресні дані і вибирає спосіб оплати. |
| Оплата | Екран оформлення замовлення, де клієнт вводить платіжні дані. |
| Дякуємо | Відображається після успішного завершення оформлення замовлення. |
| Чек замовлення | Відображається при перегляді чека замовлення. |
| Увійти до облікового запису | Відображається при перегляді сторінки Мій обліковий запис без входу в систему. |
| Втратив пароль облікового запису | Відображається при перегляді сторінки Мій обліковий запис для відновлення пароля. |
| Втратив пароль облікового запису (підтвердження) | Відображається після відправлення форми для відновлення пароля. |
| Скинути пароль облікового запису | Відображається після натискання на посилання в електронному листі для скидання пароля. |
| Приладова панель облікового запису | Відображається при перегляді сторінки Мій обліковий запис під час входу в систему. |
| Замовлення облікового запису | Відображається при перегляді вкладки “Замовлення” на сторінці Мій обліковий запис. |
| Перегляд замовлення облікового запису | Відображається при перегляді окремого замовлення. |
| Завантаження облікового запису | Відображається при перегляді вкладки “Завантаження” на сторінці Мій обліковий запис. |
| Адреси облікового запису | Відображається при перегляді вкладки “Адреси” на сторінці Мій обліковий запис. |
| Редагувати адресу облікового запису | Відображається при редагуванні платіжної чи адреси доставки на сторінці Мій обліковий запис. |
| Редагувати обліковий запис | Відображається при редагуванні даних облікового запису на сторінці Мій обліковий запис. |
Мій обліковий запис
Починаючи з Esl 1.9, ви також можете візуально проектувати свою сторінку облікового запису. Включаючи сторінки входу/реєстрації, відновлення та скидання пароля.
Для отримання додаткової інформації, будь ласка, зверніться до нашої спеціалізованої статті Академії про новий механізм облікового запису WooCommerce тут https://academy.eslengine.io/article/woocommerce-account-engine/
Сторінка магазину
Сторінка магазину – це особлива сторінка WooCommerce, яка визначена як архівна сторінка для ваших продуктів.
Щоб створити унікальний макет сторінки магазину, ви можете безпосередньо редагувати сторінку магазину за допомогою Esl.
Або ви можете додати умову шаблону в ваш шаблон WooCommerce - Архів продуктів, щоб цей шаблон використовувався і для сторінки магазину. У такому випадку вам потрібно буде встановити умови шаблону для цільової сторінки магазину окремо, ось так:
Елементи WooCommerce
Esl має на меті забезпечити найбільш гнучкий підхід до візуального дизайну шаблонів WooCommerce без втрати функціональності та хуків, які вже надає WooCommerce і на які спирається багато сторонніх плагінів/розширень WooCommerce.
Серед загальних елементів WooCommerce та елемента продуктів, Esl має спеціальні елементи для конкретних типів шаблонів WooCommerce, таких як кошик або оформлення замовлення.
Всього доступно більше 30 специфічних для WooCommerce елементів для дизайну ваших шаблонів та сторінок WooCommerce за допомогою Esl.
Ось деякі зі специфічних для WooCommerce елементів:
- Додати до кошика
- Назва продукту
- Галерея продукту
- Ціна продукту
- Запас продукту
- Метадані продукту
- Рейтинг продукту
- Відгуки про продукт
- Зміст продукту
- Короткий опис продукту
- Додаткова інформація про продукт
- Вкладки продукту
- Перехресні/допоміжні продажі продукту
- Схожі продукти
Динамічні дані
Інтеграція WooCommerce додає нові мітки динамічних даних для цільового продукту та властивостей замовлення.
{woo_product_price}{woo_product_regular_price}{woo_product_sale_price}{woo_product_regular_price:plain}{woo_product_regular_price:value}{woo_product_cpp_image}{woo_add_to_cart}{woo_product_on_sale}{woo_product_rating}{woo_product_rating:plain}{woo_product_rating:format}{woo_product_sku}{woo_product_excerpt}{woo_product_stock}{woo_product_stock_status}
Ви також можете використовувати базові динамічні теги.
{post_id}{post_title:link}{post_terms_product_cat}{post_terms_product_cat:plain}
Налаштування Esl: WooCommerce
Ви знайдете спеціальну вкладку для інтеграції WooCommerce у вашій панелі керування WordPress під “Esl > Налаштування > WooCommerce”.
- Вимкнути движок WooCommerce – Цей перемикач вимикає інтеграцію Esl з WooCommerce.
- Продуктова позначка “Sale” – Виберіть між не відображенням позначки sale, відображенням позначки “Sale” або відсотком знижки.
- Продуктова позначка “New” – Показуйте позначку “New”, якщо продукт був опублікований менш ніж .. днів тому.
- Вимкнути зум/лайтбокс продуктового галереї – Вимкнути зум або скрипти лайтбоксу в продуктовій галереї.
Стилі теми
Коли WooCommerce активний, ви знайдете наступні групи керувань у панелі стилів теми:
- WooCommerce – Кнопка
- WooCommerce – Повідомлення
Цикл запиту продуктів WooCommerce
Ви можете використовувати ці прапорці у розділі WooCommerce для простого отримання продуктів WooCommerce. Будь ласка, виберіть тип поста “Продукти”; в іншому випадку розділ WooCommerce буде приховано. (@since 1.10)
Перевірте цю статтю для отримання додаткових прикладів.