Інтеграція Beaver Builder WooCommerce 2024 – Як використовувати Beaver Builder для створення сторінок продуктів і магазинів WooCommerce?

Створити інтернет-магазин може бути цікаво. Мати чудову вітрину сприяє успіху вашого бізнесу. Однак, якщо ви хочете спроектувати магазин, який добре працює, вам може бути важко.

Сайт електронної комерції, який буде приємним і вам, і вашим клієнтам, можна створити за допомогою конструктора сторінок WooCommerce. Давайте подивимось на WooCommerce підключати. Наш наступний крок — продемонструвати, як легко створити свій інтернет-магазин за допомогою Beaver Builder. Давай, почнемо!

будівельник бобра

Короткий вступ до WooCommerce

З WooCommerce ви можете додати функції електронної комерції на свій сайт WordPress, щоб ви могли продавати свої продукти онлайн:

Крім того, ви потрапите в хорошу компанію, оскільки прогнозується, що до 28 року частка ринку WooCommerce складе близько 2020 відсотків.

WooCommerce — це рішення з відкритим кодом, яке можна налаштовувати, як і WordPress. За допомогою нього ви можете налаштувати платіжні шлюзи та різні варіанти доставки та негайно почати роботу зі своєю імперією електронної комерції.

Використовуючи WooCommerce, ви також можете створювати, редагувати та керувати своїми продуктами:

Використання додаткових плагінів WooCommerce дає вам доступ до багатьох інших функцій.  

Створення сторінок магазинів і продуктів WooCommerce за допомогою Beaver Builder (за 4 простих кроки)

Однак перш ніж ви зможете ознайомитися з функціями WooCommerce, вам спочатку потрібен веб-сайт для запуску. Почніть із встановлення й активації плагінів WordPress WooCommerce, Beaver Builder і Beaver Themer. Тепер ви готові створювати сторінки продуктів і магазинів.

Крок 1. Створіть свій магазин, додавши продукти

Створіть списки своїх продуктів як перший крок до створення свого магазину. Використовуючи WooCommerce, ви можете продавати фізичні товари, цифрові товари та предмети з варіаціями (як-от розмір і колір).

Якщо ви новачок у WooCommerce, ви можете встановити зразок набору продуктів, наданий WooCommerce, щоб зрозуміти, як система працює з різними типами товарів. Тут пояснюється кілька функцій продукту WooCommerce, включаючи варіації та варіанти продажу.

Ви дізнаєтеся, як створити базовий продукт, якщо хочете почати з нуля. Незалежно від того, що ви плануєте продавати, інші розділи цієї публікації принесуть вам користь.

Створіть новий продукт на інформаційній панелі WordPress. Виберіть Продукти > Додати новий у меню ліворуч. Заповніть наступні поля для товару, який ви хочете додати до свого магазину:

Ви можете встановити більшість важливих параметрів для свого товару, прокрутивши вниз до панелі даних про продукт, включаючи ціни, податки та доставку. У WooCommerce у вас є можливість включити податки та параметри доставки для продуктів, які можна змінити на індивідуальній основі.

Вирішіть, чи ваш продукт доступний для завантаження чи віртуальний, у загальних налаштуваннях. Зніміть прапорці, якщо продукт фізичний:

Ви можете почати, а також керувати запасами. Підключення продуктів дає вам можливість здійснювати перехресні та додаткові продажі.

Ви також можете додати другий, більш короткий опис свого товару в поле «Короткий опис продукту» під панеллю «Дані про продукт». Списки вітрин зазвичай містять цю інформацію.

Ви побачите категорії продуктів і теги праворуч на екрані. Ось кілька корисних організаторів:

Ваш список продукту має містити одне або два зображення. Доступні такі варіанти: окремі зображення або групи зображень:

Ви можете завантажити фотографію зі свого пристрою або додати зображення з медіатеки. Таким же чином ви можете додавати зображення в галереї продуктів. Щоб змінити порядок зображень, їх можна просто перетягнути.

Крок 2: Створіть нові сторінки продукту

Щоб відобразити свої продукти, ви можете створити сторінки продуктів. Відеоінструкція Beaver Themer містить покрокові інструкції щодо налаштування сторінок окремих продуктів WooCommerce. 

Beaver Themer — це потужний інструмент для розширення Beaver Builder у конструктор сторінок WooCommerce. За допомогою цього доповнення можна застосувати шаблони до всього сайту.  

 Клацніть Макети теми > Додати новий у Beaver Builder:

Додавання макета themer із налаштуваннями продукту, щоб допомогти йому працювати як конструктор сторінок WooCommerce.

Ваш макет повинен мати назву. Перш ніж натиснути кнопку «Додати макет Themer», потрібно вибрати макет і ввести його.

Переконайтеся, що новий дизайн застосовано до кожної сторінки продукту, коли ви переходите до наступної сторінки. У другому полі виберіть «Усі продукти» в розділі «Розташування», а потім виберіть «Продукт».

Правильні налаштування макета Themer для використання Beaver Themer як конструктора сторінок WooCommerce.

Ви можете редагувати свій макет за допомогою Beaver Builder після збереження своєї роботи. Починаючи з верхнього правого кута, клацніть синій знак плюса. Після того, як ви клацнули Шаблони, клацніть Створити:

Розташування шаблону продукту WooCommerce у Beaver Thermer.

Замініть наявний макет, вибравши Продукт > Замінити існуючий макет. Кілька корисних параметрів за замовчуванням уже встановлено, що перетворює ваш шаблон на сторінку продукту:

Стандартний шаблон продукту Beaver Builder

Додавати або видаляти модулі WooCommerce з основного макета можна, коли він у вас є. Доступ до модулів WooCommerce можна отримати через Модулі > Модулі теми > WooCommerce. Окрім рейтингів продуктів, описів, дорожчих продажів і багатьох інших, у вас буде багато варіантів:

Використання модулів WooCommerce

Під час редагування макета ви можете переключитися на перегляд іншого продукту за допомогою функції Preview As: у Beaver Builder:

Попередній перегляд різних продуктів у Beaver Builder

За допомогою цієї функції ви можете перевірити, як кожен із ваших продуктів виглядає під час перегляду. Опублікуйте сторінку продукту, коли ви будете задоволені дизайном і модулями, які вона включає. Ваші сторінки з окремими продуктами тепер будуть оформлені в новому форматі.

Крок 3: Створіть сторінку магазину WooCommerce

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

Макет магазину WooCommerce за замовчуванням

Для розробки сторінки магазину кращим вибором стане Beaver Themer. Почніть із переходу в WooCommerce > Налаштування, клацніть вкладку продукту та переконайтеся, що сторінка магазину вказує на магазин або будь-яку іншу спеціальну сторінку, яку ви створили. Він відображає ваші продукти як сторінку архіву, якщо ви її вкажете.

Виберіть Themer Layouts > Add New у Beaver Builder > Theme Builder, а потім натисніть Add New. Виберіть опцію «Макет теми» в розділі «Текст» на наступному екрані:

Створення макета сторінки магазину

На наступному екрані ви зможете вибрати розташування архіву продукту. Товари вашого магазину відображатимуться на сторінці магазину та сторінках категорій продуктів. При необхідності ви можете його змінити.

Налаштування сторінки архіву товару

Натиснувши «Запустити Beaver Builder», ви зможете налаштувати свій макет. Якщо натиснути знак «плюс» у верхній частині екрана, а потім вибрати «Шаблони», з’явиться наступна сторінка:

Використання шаблону Beaver Builder

Нову сторінку магазину можна легко створити за допомогою шаблону «Продукція». Використовуючи всі інструменти, які ми розглянули до цього моменту, ви можете вносити зміни в шаблон після його створення. 

Переконайтеся, що макет вашого магазину відповідає налаштуванням стилю модуля Posts, налаштувавши їх, щоб вони відповідали. 

У верхній частині екрана натисніть «Готово» > «Опублікувати», коли зміни буде збережено в модулі. 

Останнє, що вам потрібно зробити, це переконатися, що будь-яка сторінка, яку ви визначили як сторінку магазину, відображається в навігаційному меню вашого сайту. В іншому випадку ви можете додати його в розділі «Вигляд» > «Меню» на інформаційній панелі WordPress.

Крок 4. Додатково налаштуйте сторінку свого магазину за допомогою макетів WooCommerce

Модуль WooCommerce також є чудовою функцією Beaver Builder, яка робить його чудовим конструктором сторінок WooCommerce. Це дає змогу додавати частини функцій WooCommerce до будь-якої структури Beaver Builder на вашому сайті. У цьому модулі доступні такі параметри:

  • Один або кілька продуктів: 
  • Ви можете відображати вибрані продукти на основі ідентифікаторів продуктів або категорій або ви можете показувати продукти, які є на розпродажі, останні продукти, продукти з найвищим рейтингом або будь-що інше, що ви хочете.
  • Кошик: відображає вміст кошика для покупок WooCommerce.
  • Оформлення замовлення: відображає сторінку оформлення замовлення у звичайному вигляді.
  • Відстеження замовлень: вносить інформацію про замовлення в цю форму.
  • Мій обліковий запис: ця сторінка містить інформацію, яку зазвичай можна знайти на сторінці "Мій обліковий запис", наприклад інформацію про обліковий запис, попередні замовлення та деталі адреси
Макети WooCommerce у Beaver Builder.

Швидкі посилання

Висновок

Створення онлайн-магазину, який ефективно представлятиме ваш бренд, є складною справою. Однак процес можна полегшити за допомогою Beaver Builder, плагіна для WooCommerce.

Як бачите, ми окреслили чотири важливі кроки для створення вашої вітрини за допомогою WooCommerce і Beaver Builder:

  1. Створіть магазин, додавши товари.
  2. Створіть нову сторінку продукту.
  3. Створіть нову сторінку магазину WooCommerce.
  4. За допомогою макетів WooCommerce ви можете додатково налаштувати свій сайт електронної комерції.

Чи хочете ви щось знати про використання Beaver Builder для створення сторінок продуктів і магазинів? Будь ласка, поділіться своїми думками нижче в розділі коментарів!

Айшвар Баббер

Айшвар Баббер — пристрасна блогерка та цифровий маркетолог. Він любить говорити та вести блог про останні технології та гаджети, що мотивує його бігати GizmoBase. Наразі він практикує свій досвід у сфері цифрового маркетингу, пошукової пошукової системи та оптимізації маркетингу як штатний маркетолог у різних проектах. Він є активним інвестором AffiliateBay і режисер в ImageStation.

Залишити коментар