Є думка, що CMS WordPress не підходить для інтернет-магазинів. Тим не менше майже третина всіх існуючих інтернет-магазинів працює на даному движку. Це можливо завдяки WooCommerce: найпопулярнішою в світі платформи для онлайн-торгівлі. Докладне керівництво навчить вас працювати з цією платформою і допоможе створити перший інтернет-магазин.
Чому варто вибрати WooCommerce
WooCommerce — безкоштовний плагін для WordPress. Він розширює функціональність сайтів на самій популярної CMS в світі: перетворює їх у повноцінні інтернет-магазини. WooCommerce повторює головна перевага WordPress. Працювати з движком і плагіном для електронної торгівлі можна без знань і досвіду в веб-розробці.
Станом на середину літа 2017 року, кількість активних установок плагіна перевищує 3 млн. За даними аналітичної платформи BuiltWith, WooCommerce — найпопулярніша платформа для онлайн-торгівлі в світі.
Зверніть увагу на важливий нюанс. Якщо враховувати всі існуючі інтернет-магазини, частка WooCommerce перевищує 40 %. Якщо звузити охоплення до 1 млн 100 тис. найпопулярніших торгових майданчиків, популярність платформи знижується. А серед 10 тис. найбільших магазинів частка WooCommerce скорочується до 11 %.
Про що говорить статистика? WooCommerce залишається поза конкуренцією при виборі платформи для невеликих і середніх магазинів. Великі онлайн-торговці теж часто використовують цю платформу, але багато хто користується альтернативними рішеннями.
Ще один нюанс: в Рунеті WooCommerce пасе задніх. Тут явний лідер — OpenCart.
Варто чи ні використовувати WooCommerce для створення інтернет-магазину? Ось переваги інструменту:
- По простоті налаштувань і управління WordPress і WooCommerce рівних немає. Для створення магазину не потрібні навички розробника. З Joomla!, OpenCart та Drupal працювати складніше, хоч з цими CMS теж можна впоратися без спеціальних знань.
- Надійність і безвідмовність. Сайти на WordPress працюють як годинник. З іншими движками іноді доводиться повозитися, щоб щось запрацювало. Наприклад, інтеграція модуля мікророзмітки на Joomla! тривала двоє доби, а на WordPress ця задача вирішується за 5 хвилин.
- Безкоштовний інструмент незалежно від виручки, кількості товарів та інших характеристик. За багато альтернативні рішення, наприклад, модуль «Эквид» або Magento Enterprise Edition, доведеться платити.
- Розвинена інфраструктура. Для WordPress створені тисячі безкоштовних плагінів і тим, які вирішують конкретні практичні завдання. При роботі з іншими CMS за аналогічні рішення доведеться платити або звертатися до розробників в індивідуальному порядку.
- Широка функціональність. WooCommerce забезпечує доступ до базових функцій, які необхідні інтернет-магазину. А з допомогою безплатних і платних плагінів функціональність платформи можна розширити, а сайт адаптувати до потреб конкретного проекту.
У WooCommerce є недоліки. Головне — вам доведеться лізти під капот. Такий же недолік є у всіх CMS і ecommerce-модулів. А позбавлені його конструктори інтернет-магазинів, наприклад, Shopify. Якщо ви не хочете розбиратися з технічними питаннями або тонкощами налаштування, задачу можна делегувати профільним фахівцям.
Створений за допомогою стандартних інструментів магазин на WooCommerce виглядає шаблонно. У кастомізацію доведеться вкладати час або фінансові ресурси. Такий же недолік є у всіх без винятку сайтів, які працюють на комерційних CMS або движках з відкритим кодом. Проблему вирішують самописні движки, але це дуже небезпечний вибір.
WooCommerce працює тільки з WordPress. Це може бути недоліком для онлайн-торговців, які воліють інші CMS.
Переваги і недоліки найпростіше оцінювати на практиці. Якщо її недостатньо, можна подивитися на приклади інтернет-магазинів, які працюють на WooCommerce. Якщо зовнішній вигляд і функціональність представлених на вітрині торгових майданчиків вас влаштовує, приступайте до роботи.
Перші кроки: вибір хостингу, установка CMS, вибір дизайн шаблону
Якщо ви створюєте інтернет-магазин з нуля, вибирайте віртуальний хостинг. Масштабів «Зв’язкового» і високої відвідуваності ви досягнете не відразу, тому VDS або виділений сервер знадобиться не відразу.
Зверніть увагу на обсяг доступного дискового простору. Якщо на вітрині буде виставлено кілька десятків товарів, питання не має критичного значення. А ось якщо рахунок товарів йде на сотні або тисячі, вибирайте хостинг-план з великим об’ємом дискового простору. 10 ГБ на першому етапі вистачить із запасом.
Щоб працювати зі зв’язкою WordPress і WooCommerce, краще вибрати Linux-хостинг. Він повинен підтримувати MySQL і PHP. Тарифний план повинен включати доступ до панелі керування сервером і до FTP.
Багато хостинг-провайдери при реєстрації домену та купівлі хостингу надають безкоштовний SSL-сертифікат. Скористайтеся цією пропозицією, щоб забезпечити доступ до сайту по безпечного протоколу https.
Інструкції з інсталяції CMS WordPress є в керівництві для новачків. Але вона вам не знадобиться, якщо в панелі управління хостингом є автоустановщик скриптів Softaculos. Він допоможе встановити WordPress буквально в два кліка.
Перед автоматичною установкою CMS зверніть увагу на важливі деталі:
- Замініть автоматично згенерований пароль до бази даних.
- Замість стандартного Admin введіть ім’я адміністратора.
- Придумайте пароль для входу в адміністративну консоль.
- Встановіть плагін Loginizer для захисту від брутфорсинга.
- Увімкніть оновлення CMS, тем і плагінів.
Після зміни налаштувань запустіть установку.
Скористайтеся керівництвом для новачків, щоб налаштувати сайт. Також вам знадобляться рекомендації для просунутих користувачів та інструкції щодо усунення типових помилок.
При виборі теми орієнтуйтеся на свої переваги та особливості проекту. Враховуйте важливий нюанс: дизайн-шаблон повинен бути сумісним з WooCommerce. Теоретично плагін повинен працювати з усіма темами для WordPress. Але на практиці деякі шаблони працюють з ecommerce-платформою некоректно.
Гарантовано добре працює дефолтна тема WooCommerce Storefront, а також її дочірні теми.
В офіційному каталозі тим WordPress є шаблони, розробники яких декларують сумісність з WooCommerce. Ці ж теми можна знайти через адміністративну панель сайту в розділі «Зовнішній вигляд – Теми».
Також відповідні дизайн-шаблони можна знайти у схвалених спільнотою розробників WordPress комерційних тим.
Як встановити і налаштувати WooCommerce
Плагін WooCommerce можна знайти в офіційному каталозі WordPress. Найзручніше встановити його через адмінку в меню «Плагіни – Додати новий». А якщо ви вибрали дефолтну тему Storefront від розробників WooCommerce, на панелі управління з’явиться пропозиція встановити плагін.
Після установки і активації плагіна система запропонує вказати основні налаштування. На першому етапі майстер установки створить базові сторінки: «Магазин», «Кошик», «Оформлення замовлення», «Мій акаунт».
На наступному етапі виберіть країну валюту. У випадаючому меню виберіть позицію позначення валюти. Для Рунета підійде варіант «Справа з пропуском».
Не використовуйте роздільник тисяч. У російськомовному сегменті інтернету ставити крапки або коми для поділу тисяч числівників не прийнято. Швидше за все вам не знадобиться десятковий роздільник, так як вартість товарів зручніше вказувати з округленням до рубля. Тому відповідне поле і поле «Кількість знаків після цілого» залиште порожнім.
Оберіть опцію «Так, я буду включати податки у вартість замовлення». У цьому випадку відвідувачі інтернет-магазину будуть бачити остаточні ціни товарів. До налаштувань податків ви повернетеся пізніше.
Далі майстер установки запропонує вказати одиниці вимірювання ваги і довжини. Якщо ви працюєте в Рунеті, доведеться вибирати між кілограмами і грамами, а також між сантиметрами і метрами. Тут все просто: якщо ви продаєте чай в роздріб, вага зручніше вказувати в грамах. Оптовим продавцям краще вибрати кілограми. Довжину агроволокна в рулоні зручніше вказувати в метрах, а габарити полиць для книг або квітів простіше оцінювати в сантиметрах.
У налаштуваннях платежів вкажіть оплату готівкою при доставці. Адаптовані до російського ринку системи онлайн-розрахунків ви підключите пізніше.
Ви вибрали базові налаштування інтернет-магазину.
Як додати товар у магазин на платформі WooCommerce
Додати кілька товарів в магазин краще відразу після базових налаштувань платформи. Це забезпечить наочність при роботі з тонкими настройками і функціональністю майданчики.
Товари в магазині під управлінням WordPress і WooCommerce організовані в категорії. Подивитися існуючі або створити нові рубрики можна в меню «Товари – Категорії».
Щоб створити нову категорію, вкажіть назву, додайте короткий опис і мініатюру. При необхідності вкажіть ярлик. Якщо категорія дочірня, з допомогою випадаючого меню виберіть батьківську рубрику. У меню «Тип» виберіть потрібний варіант.
Зверніть увагу, при установці WooCommerce система створює тестові категорії. Відредагуйте їх, щоб не додавати нові.
Додати товар можна в меню «Товари – Додати новий». Виберіть категорію, вкажіть назву продукту, додайте опис.
Виберіть тип товару, вкажіть стандартну ціну. Якщо плануєте розпродаж, введіть відповідні дані.
Додайте потрібні дані на вкладці «Запаси»: вкажіть артикул, при необхідності увімкніть автоматичне керування запасами. У цьому випадку на сайті буде відображатися кількість доступних товарів. Також ви можете включити оформлення передзамовлень.
На вкладці доставка вкажіть вага і габарити продукту. На вкладці «Супутні» можна вказувати товари для апсейла і крос-сейла. На вкладці «Атрибути» вкажіть додаткові відомості про товар, наприклад, кольору або розміри. При необхідності вкажіть додаткові відомості.
Додайте мініатюру товару та короткий опис. Ці дані будуть відображатися на головній або на сторінках категорій. При необхідності створіть галерею фото товару.
Опублікуйте товар. Перевірте, як відображається превью продукту на вітрині магазину.
Переконайтеся, що на сторінці товару вказані коректні дані.
Додайте кілька товарів і приступайте до тонких налаштувань магазину.
Як налаштувати головну сторінку меню
Можливі два варіанти налаштування головної сторінки. Якщо ви створюєте інтернет-магазин на існуючому сайті, вітрину можна розмістити на одній з внутрішніх сторінок. В цьому випадку головною залишиться сторінка записів або довільна статична сторінка.
Якщо сайт працює тільки як інтернет-магазин, логічно зробити вітрину головною сторінкою. У меню адмінки «Налаштування – Читання» вкажіть, що в якості головної буде відображатися статична сторінка. У випадаючому меню виберіть потрібний варіант.
Призначте створену автоматично Sample Page сторінкою записів. Надалі її можна буде редагувати і використовувати як блогу.
Створити або відредагувати меню можна в розділі «Зовнішній вигляд – Меню». Вкажіть назву, в розділі «Показати місцезнаходження» відзначте прапорцем опції «Головне» і «Мобільний меню». Додайте в меню потрібні сторінки.
При необхідності можна додати в меню довільні посилання, рубрики публікацій і кінцеві точки WooCommerce.
Додайте в меню посилання на основні або найпопулярніші категорії товарів. Для цього скопіюйте URL категорії і вкажіть його в розділі «Довільні посилання».
При необхідності створіть додаткове меню. Для цього перейдіть на вкладку «Управління областями». Скористайтеся посиланням «Використовувати нове меню».
Додайте в додаткове меню сторінки. Наприклад, це можуть бути эндпоинты WooCommerce.
Як працювати з розширеними налаштуваннями WooCommerce
Після установки WooCommerce майстер налаштування допоміг вам вказати основні параметри магазину. Тепер приділіть увагу розширених налаштувань.
Як налаштувати податки в WooCommerce
Перед налаштуванням податків необхідно вибрати форму оподаткування. При необхідності проконсультуйтеся з експертами: бухгалтером або податковим інспектором.
Згідно з пунктом 6 статті 168 Податкового кодексу РФ ціни товарів і послуг в магазинах необхідно вказувати з урахуванням податків. При цьому суму або ставку податку вказувати не потрібно. Наприклад, якщо товар продається за 1180 рублів, в кінцеву вартість вже включено ПДВ у сумі 180 рублів за ставкою 18 %.
Якщо ваш магазин працює на спрощеній системі оподаткування, ви орієнтуєтеся на внутрішній ринок, а в якості реєстраційної форми використовується ТОВ або ІП, використовуйте наступні налаштування податків:
- Відзначте прапором опцію «Так, я буду вказувати ціни з урахуванням податків».
- Для розрахунку податків використовуйте адресу магазину.
- Вкажіть нульову ставку податку на доставку.
- Якщо ви продаєте продукти, для яких діє спеціальна або нульова ставка ПДВ, вкажіть додаткові податкові класи.
- Показуйте ціни в магазині з урахуванням податків.
- Поле «Суфікс цін» залиште порожнім.
- У пункті «Показати підсумковий податок» виберіть варіант «Як один підсумок».
Збережіть зміни і перевірте, як відображається ціна товарів.
Як настроїти параметри доставки
У меню «WooCommerce – Налаштування» виберіть вкладку «Доставка». Натисніть кнопку «Додати зону доставки».
Вкажіть назву зони і виберіть географічний регіон. Додайте методи доставки. Доступні методи «Самовивіз», «Безкоштовна доставка» і «Єдина ставка». Останній метод дозволяє встановити єдину вартість доставки для обраного регіону.
Щоб відредагувати метод доставки, натисніть посилання «Редагувати» біля відповідної посилання в списку. У діалоговому вікні можна змінити назву методу, податковий статус і вартість послуги.
Як налаштувати платежі для магазину на WooCommerce
Відразу після установки за допомогою майстра налаштування ви включили один спосіб розрахунків: готівкою при доставці. Тепер підключіть до сайту універсальну платіжну систему, яка підтримує декілька популярних способів прийому платежів від клієнтів.
Наприклад, підключіть до сайту сервіс Wallet One. Для цього зареєструйтесь в системі, надайте провайдера платежів необхідні дані і встановіть безкоштовний плагін для WordPress від «Єдиної каси». Після установки і активації плагіна налаштуйте способи платежів у меню «WooCommerce – Налаштування».
Виберіть валюту, введіть ідентифікатор каси, спосіб формування ЕЦП і ключ ЕЦП магазину. Вкажіть дозволені платіжні системи. При необхідності змініть інші налаштування.
«Єдина каса» підтримує платежі з банківських карт, які через системи інтернет-банкінгу та електронних грошей, банківські перекази, мобільні платежі та інші способи розрахунків.
Замість Wallet One можна підключити інші платіжні сервіси, наприклад, «Яндекс.Каса», PayOnline.
При необхідності змініть настроювання облікових записів та електронних адрес. На вкладці Email вкажіть електронні ящики, на які будуть приходити повідомлення про оформлених та оплачених замовлень. На вкладці API залиште включеним REST API. Після вказівки розширених налаштувань приділіть увагу технічним характеристикам і функціональності магазину.
Як поліпшити технічні характеристики і розширити функціональність магазину на WooCommerce
На даному етапі підключіть додатковий SEO-модуль, створіть ідеальну структуру URL, налаштуйте прискорені мобільні сторінки і специфічну для ecommerce-сайтів мікророзмітку.
Як оптимізувати магазин на WooCommerce
Сайти на WordPress і WooCommerce за замовчуванням SEO-оптимізації. Якщо ви налаштовували сайт інструкції для новачків, то вже встановили базовий плагін All in One SEO Pack. Він дозволяє тонко оптимізувати ресурс до вимог пошукових систем.
Встановіть і активуйте надбудову для базового модуля: модуль WooCommerce All in One SEO Pack. Цей інструмент дозволяє контролювати метадані сторінок товарів. Він додає блок All in One SEO Pack на сторінку редагування продукту.
Зверніть увагу, поле Keywords краще залишати порожнім. Пошукові системи не враховують його утримання при ранжируванні, тому не витрачайте час на марну роботу.
Приділіть увагу URL. На етапі базової налаштування сайту ви включили ЧПУ. Але при використанні WooCommerce за замовчуванням посилання на продукти містять префікс product. Це зайва інформація, за якою URL виходить занадто довгим.
Проблему можна вирішити за допомогою платного плагіна Perfect SEO URL. Ця надбудова робить посилання на товари в магазинах на WooCommerce ідеальними. Приклади можна побачити на демонстраційному сайті плагіна.
Якщо ви не хочете витрачати 119 доларів на плагін Perfect SEO URL, скачайте та встановіть модуль Permalink Manager Lite. В консолі виберіть меню «Інструменти – Permalink Manager». Відкрийте вкладку Permastructures. У рядку «Товари» вкажіть бажану структуру URL. Щоб в посиланні відображалося лише назва категорій і назва товарів, використовуйте конструкцію %product_cat%.
Додайте на сайт новий товар. Перевірте, як відображається посилання.
Зверніть увагу, зміни структури URL автоматично не застосовуються до опублікованих раніше товарів. Посилання на них доведеться редагувати вручну. Для цього на сторінці налаштувань плагіна виберіть вкладку URI Editor. В розділі товари внесіть необхідні зміни.
Перевірте відображення змінених вручну посилань.
Як налаштувати мікророзмітку і протокол Open Graph
Якщо ви підключили рекомендований в керівництві для новачків плагін All in One SEO Pack, підключення протоколу Open Graph не займе багато часу. У налаштуваннях SEO-комбайна увімкніть модуль «Соціальні мета». Цього достатньо, щоб при публікації посилань на товар в соціальних мережах відображався привабливий сніппет.
На сторінці модуля змініть настроювання Open Graph для Facebook. Виберіть тип даних «Сайт», увімкніть Facebook Meta для записів «Товари».
Вкажіть тип даних Product для сторінок товарів.
Запропоновані установки забезпечують візуально привабливий сніппет для посилань на сторінки товарів.
При необхідності змініть настроювання відображення Twitter Cards.
Дефолтний шаблон для магазинів на WooCommerce підтримує тип мікророзмітки Product Schema.org для сторінок товарів. Проте реалізована в темі микроразметка не проходить валідацію.
З-за помилок в микроразметке пошукові системи можуть не показувати розширені сніппети на сторінках пошукової видачі. Це знижує CTR посилань і зменшує пошуковий трафік магазину.
Виправити ситуацію можна за допомогою платного плагіна Schema WooCommerce Plugin by Schema App. Ця надбудова виправляє помилки і додає розмітку відсутні дані, які необхідні для формування розширеного фрагменту в SERP. Вартість плагіна для одного сайту становить 47 доларів.
Коректну мікророзмітку також можна додати за допомогою безкоштовних інструментів, наприклад, All In One Schema.org Rich Snippets. Після установки і активації плагіна необхідно включити підтримку розмітки на сторінках продуктів.
Після цього на сторінці редагування товарів з’явиться додаткове поле, в якому можна вказати дані для розширених фрагментів.
Створена з допомогою All In One Schema.org Rich Snippets розмітка проходить валідацію. Проблема в тому, що в коді сторінки залишається і стара розмітка з помилками.
Крім того, All In One Schema.org Rich Snippets реалізує розмітку не через JSON-LD. Тому інформація видно не тільки пошуковим роботам, але й людям. Блок з семантичними даними фактично дублює інформацію на сторінці.
Як створити AMP для магазину на WooCommerce
За даними Google, конверсія мобільних користувачів прямо залежить від швидкості завантаження і простоти використання сторінок ecommerce-сайтів на маленьких екранах. Тому найбільша пошукова система в світі рекомендує власникам інтернет-магазинів використовувати AMP.
Щоб реалізувати прискорені мобільні сторінки, встановіть і активуйте базовий плагін AMP і дві надбудови: AMP for WP AMP WooCommerce. На сайті з’являться прискорені версії статичних сторінок, записів і товарів.
Приділіть увагу налаштувань AMP. Вони доступні у відповідному меню адміністративної панелі. Докладну інструкцію дивіться в посібнику з прискореним мобільним сторінкам.
Зверніть увагу на ряд важливих опцій в контексті налаштування AMP для інтернет-магазину. Увімкніть кнопку «Подзвонити зараз». Вона допоможе власникам мобільних гаджетів негайно зв’язуватися з відділом продажів. Вказати номер телефону і вибрати зовнішній вигляд кнопки можна в розділі Design налаштувань AMP.
Підключіть платну функцію Call to Action. Ця надбудова для плагіна AMP for WP додає на прискорені сторінки конверсійні форми з закликом до дії. Вартість надбудови становить 30 доларів.
У розділі Notifications при необхідності підключіть повідомлення. Їх часто використовують, щоб повідомити відвідувачам про використання на сайті cookie.
Перевірте, як прискорені сторінки відображаються на екранах мобільних.
Використовуйте додаткові можливості WooCommerce
Ваш магазин практично готовий до роботи. Приділіть увагу додатковим можливостям платформи, щоб зробити сайт привабливим для користувачів.
Скористайтеся кастомайзером, щоб налаштувати зовнішній вигляд магазину. У меню «вигляд – Налаштувати» можна змінювати заголовок і опис сайту, встановлювати фонове зображення в шапку, змінювати кольори посилань, заголовків і тексту. Також можна вибрати зовнішній вигляд кнопок, положення сайдбара, налаштувати меню і віджети, додати користувальницькі CSS.
У розділі меню «вигляд – Storefront» можна розширити функціональність базової теми WooCommerce. Ви можете вибрати безкоштовні та платні надбудови. Наприклад, можна безкоштовно підключити прикріплену кнопку «Купити» і додаткову іконку кошика.
Також з меню «вигляд – Storefont» можна вибрати і встановити дочірню тему.
Зверніть увагу на кілька корисних рішень:
- Плагін Facebook for WooCommerce допоможе керувати рекламними кампаніями в популярній соцмережі. Також з допомогою надбудови легко зробити магазин на сторінці бренду в «Фейсбуці».
- Плагін WooCommerce Multilingual допоможе зробити сайт багатомовним.
- Якщо обрана тема не має вбудованого слайдера, допоможе плагін WooCommerce Poduct Slider.
- Якщо тема не підтримує збільшення фотографій при наведенні курсору миші, спробуйте YITH WooCommerce Zoom Magnіfіer.
- Плагін YITH WooCommerce Wishlist додає на сайт функцію «Список бажань».
- З допомогою Super Socializer можна додати можливість реєстрації через акаунти в соціальних мережах.
- Платний плагін WooCommerce 360º Image дозволяє демонструвати клієнтам 3D-фото товарів.
- З допомогою WooCommerce Recover Abandoned Cart можна повертати на сайт відвідувачів, які додали товар у корзину, але не оформили замовлення. Плагін платний.
- Платне рішення WooCommerce Quick Export Plugin допоможе миттєво експортувати дані про клієнтів і угодах у файл. Це потрібно, якщо ви переносите ресурс на новий хостинг.
Інші інструменти для підвищення ефективності WooCommerce шукайте в офіційному каталозі плагінів WordPress.
Керувати замовленнями і відслідковувати статистику можна в розділах «Замовлення» і «Звіти» меню WooCommerce. В розділі «Купони» можна створити і опублікувати акційні пропозиції для підвищення продажів.
Зв’язці WordPress і WooCommerce немає рівних
Завдяки самої популярної CMS і найпопулярнішою ecommerce-платформі ви можете швидко створити повноцінний інтернет-магазин. Для цього не потрібні знання у веб-розробці. На перших етапах ваші витрати будуть мінімальними, так як движок, шаблони та базові плагіни доступні безкоштовно.
Налаштовувати магазин і управляти їм дуже просто. Ви зможете самостійно підвищити SEO-дружність сайту і додатково адаптувати його до мобільного трафіку. Завдяки розвиненій інфраструктурі WordPress вам доступні практично необмежені можливості кастомізації і розширення функціональності магазину на WooCommerce.
Зв’язка WordPress і WooCommerce допоможе вам зосередитися на розширенні асортименту товару і збільшення продажів. А якщо з’являться питання по налаштувань сайту, пишіть в коментарях.