Повний посібник із блоками 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, дозволяючи створювати індивідуальні сторінки продуктів, макети категорій та досвід покупок за допомогою звичного інтерфейсу перетягування.

Перелік функцій блоку 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 Block & Продавайте свій товар

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

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

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

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

Висновок

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

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

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