Повний посібник із блоків WooCommerce

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

Щоб використовувати ці нові блоки, потрібно встановити плагін WordPress WooCommerce Blocks. Цей плагін є майданчиком для тестування експериментальних функцій, які можуть бути додані до ядра WooCommerce.

У цьому практичному посібнику ми розглянемо функції блоків WooCommerce та способи їх налаштування. 

Що таке блок WooCommerce?

WooCommerce Blocks — це набір блоків, інтегрованих із редактором блоків WordPress (Gutenberg) , які дозволяють легко додавати різноманітні функції та можливості WooCommerce на ваші сторінки й записи. Без написання коду ці блоки дають змогу демонструвати товари, категорії товарів, фільтри пошуку, кошики, оформлення замовлення тощо.

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

Крім того, вони безперешкодно інтегруються з редактором блоків WordPress, дозволяючи вам створювати власні сторінки товарів, макети категорій і досвід покупок за допомогою знайомого інтерфейсу перетягування.ext here ...

Список функцій блоку WooCommerce

Після розуміння того, що таке блок WooCommerce, далі ми розглянемо кожну надану функцію по черзі:

• Усі товари: Відображає всі товари магазину у вигляді сітки.
• Активні фільтри товарів: Відображає активні фільтри товарів у вигляді списку або чіпів (схожих на кнопки).
• Усі відгуки: Показує всі відгуки про товари.
• Найбільш продаваний товар: Відображає товари, що найбільше продаються, у вигляді сітки.
• Оформлення замовлення: Відображає форму, яка дозволяє клієнтам завершити свої замовлення.
• Кошик: Відображає кошик для покупок.
• Рекомендована категорія: Виділяє певні категорії товарів разом із кнопками заклику до дії.
• Рекомендований товар: Відображає вибрані рекомендовані товари.
• Фільтр за ціною: Відображає діапазон цін, за яким клієнти можуть фільтрувати товари. Ви також можете увімкнути редагований діапазон цін, натиснувши кнопку або текст тут.
• Фільтр за наявністю: Дозволяє фільтрувати товари за статусом наявності на складі. Ця функція надає можливість відображати товари в наявності, відсутні на складі або ті, що замовляються повторно.
• Фільтр за рейтингом: Дозволяє клієнтам фільтрувати товари за рейтингом.
• Фільтр за атрибутом: Фільтрує товари за розміром або кольором.
• Вручну відібрані товари: Відображає вручну відібрані товари у вигляді сітки, дозволяючи вам вибрати, які саме товари показувати.
• Міні-кошик: Забезпечує короткий огляд кошика покупок.
• Найновіші товари: Показує найновіші товари, розташовані у форматі сітки. Їх можна налаштувати, додаючи/видаляючи такі елементи, як назва, ціна, рейтинг і кнопка купівлі.
• Товар зі знижкою: Відображає товари, які наразі продаються зі знижкою, у вигляді сітки, і його можна налаштувати, додаючи або видаляючи такі елементи, як назва, ціна, рейтинг і кнопка купівлі.
• Пошук товарів: Додає панель пошуку, щоб полегшити клієнтам пошук товарів.
• Товар за тегом: Відображає товари з певними тегами/мітками у вигляді сітки.
• Товар за атрибутом: Відображає товари з певними атрибутами (колір, розмір тощо) у вигляді сітки.
• Товар за категорією: Відображає товари за категоріями у вигляді сітки.
• Відгуки за товарами: Відображає відгуки, згруповані за товарами.
• Відгуки за категорією: Відображає відгуки про товари з певних категорій.
• Окремий товар: Відображає детальний перегляд окремого товару.
• Товари з найвищим рейтингом: Показує товари з найвищими рейтингами у вигляді сітки.

Як використовувати блок сітки товарів у WooCommerce

Окрім вивчення функцій, доступних у блоках WooCommerce, спробуймо використати або додати сітку товарів у WooCommerce. Переконайтеся, що на вашому сайті встановлено плагін блоків WooCommerce. Ось як його додати:

1. Відкрийте сторінку або запис , де ви хочете відобразити сітку товарів, потім введіть заголовок «Товар».

2. У лівій навігації, натисніть кнопку (+), прокрутіть униз до розділу WooCommerce і виберіть «сітку продуктів».

3. Далі, щоб налаштувати блок, перейдіть до правої панелі.

У цій панелі ви можете налаштувати кілька речей, зокрема:

• Налаштування макета: Ви можете налаштувати кількість рядків і стовпців, що відображаються в сітці товарів. Наприклад, встановіть обидва значення на 2 для збалансованого вигляду.
• Налаштування вмісту: Ви можете відобразити спадне меню для сортування товарів. Ця функція дозволяє клієнтам сортувати товари відповідно до їхніх уподобань. Ви можете вимкнути її, якщо вона не потрібна.
• Розширене оформлення: Ви можете додати CSS-класи, щоб налаштувати зовнішній вигляд.

Як додати рекомендовані товари на свою сторінку

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

Щоб додати блок «Рекомендований продукт», виконайте такі кроки:

1. Відкрийте сторінку або запис, куди хочете його додати. Наприклад, якщо ви розміщуєте його над сіткою товарів, створіть місце в цій області та натисніть кнопку «+», яка з’явиться.

2. Натисніть кнопку «+» на панелі інструментів блоку, щоб відкрити список блоків, потім знайдіть і виберіть «Рекомендований товар».

3. Виберіть продукти, які хочете виділити, потім натисніть «Готово».
4. Щоб налаштувати зовнішній вигляд блоку, натисніть «Налаштування». На панелі налаштувань ви можете змінити кілька параметрів, зокрема:

• Показати або приховати опис товару та ціну.
• Налаштуйте відображення медіа (зображення та відео).
• Додайте альтернативний текст для зображень товарів.
• Виберіть колір накладення блоку.
• Налаштуйте прозорість блоку.

5. Після налаштування ви можете опублікувати або оновити сторінку, щоб побачити відображення блоку рекомендованого товару.

Як додати блоки фільтрів у WooCommerce

Блок фільтра WooCommerce дає змогу покупцям легко знаходити товари, що відповідають їхнім критеріям пошуку. Надаючи параметри фільтрування, покупці можуть швидко звузити результати пошуку до товарів, які їх цікавлять.

Щоб додати блок фільтрів, виконайте такі кроки:

1. Відкрийте сторінку або запис, де ви хочете розмістити блок фільтра.
2. Визначте бажане місце для розміщення блоку фільтра.
3. На панелі інструментів редактора блоків натисніть кнопку «+» і знайдіть параметри фільтрів WooCommerce, як-от фільтр за ціною, фільтр за наявністю, фільтр за атрибутами та фільтр за рейтингом.

Тепер розгляньмо кожен доступний тип фільтра. 

Додавання фільтра за ціною

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

Додавання фільтра за атрибутом

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

Додавання фільтра за наявністю

Блок фільтра товарів за статусом наявності дозволяє користувачам відображати товари залежно від їхнього статусу наявності. Вони можуть відображати доступні товари (в наявності), відсутні на складі (немає в наявності) або на замовлення. Ви також можете налаштувати його для відображення кількості товарів, вибрати рівень заголовка та додати кнопки. Цей блок можна використовувати з іншими блоками WooCommerce, такими як «Усі товари». На жаль, цей блок не надає попереднього перегляду під час додавання на сторінку.

Блоки кошика та оформлення замовлення

Блок кошика додає відображення кошика на вашу сторінку. Ви можете додати калькулятор вартості доставки, вибрати посилання для кнопки оформлення замовлення та налаштувати відображення в темному режимі. Цей блок також надає сповіщення про те, що ви можете встановити сторінку як стандартну сторінку кошика в налаштуваннях WooCommerce. Також додано посилання для надання відгуку.

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

Як налаштувати сторінку магазину на WooCommerce

Після вивчення того, як використовувати різні блоки WooCommerce, ви можете об’єднати кілька з них, щоб створити зручну для користувача сторінку власного магазину. Щоб створити цей конкретний макет сторінки магазину, виконайте такі кроки.

1. Створіть нову сторінку та назвіть її «Магазин».

2. Додайте блок пошуку товарів.

3. Додайте блок «Список категорій товарів»

Потім встановіть стиль відображення у спадному меню.

4. Додайте блок фільтра ціни.
5. Додайте блок рекомендованих товарів і виберіть товари, які хочете виділити. Налаштуйте за потреби.

6. Додайте Усі продукти блок.

Установіть кількість стовпців і рядків рівною 2 та вимкніть опцію випадаючого списку сортування.

7. Нарешті, опублікуйте сторінку, щоб побачити остаточний макет створеної вами сторінки магазину.

Створіть свій інтернет-магазин за допомогою блоків WooCommerce і продавайте свої товари

Після успішного створення власної сторінки магазину за допомогою WooCommerce Blocks ви можете почати продавати свої фізичні та цифрові товари. Особливо для цифрових товарів важливо додати плагін для завантаження файлів, як-от WP File Download Addon.

Цей плагін дозволяє продавати цифрові товари для завантаження у WooCommerce. WP File Download Addon спрощує керування файлами та категоріями файлів для цифрових товарів WooCommerce. Ви можете швидко створити багато цифрових товарів для завантаження, пов’язаних з одним або кількома файлами.

Крім того, цей плагін інтегрується з Dropbox, Google Drive, Microsoft OneDriveта функцією Social Locker . Ви можете надавати файли з цих хмарних сервісів як цифрові завантаження WooCommerce з дуже обмеженим доступом через хмарні API-конектори.

З допомогою WP File Download продавати цифрові продукти у вашому інтернет-магазині WooCommerce стало простіше та ефективніше. Після створення магазину за допомогою WooCommerce Blocks цей плагін чудово доповнює продаж вашого цифрового контенту.

Висновок

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

Після створення вашого інтернет-магазину наступним кроком є продаж фізичних і цифрових товарів. Ви можете використати плагін WP File Download Addon, щоб продавати цифрові товари з WooCommerce, як-от електронні книги, програмне забезпечення або мультимедійний контент.

WP File Download Addon доступний від $49 на рік, і ним користуються понад 60 000 учасників. То чого ж ви чекаєте? Приєднуйтеся до нас для кращих продажів цифрових продуктів!