Як використовувати WooCommerce для створення інтернет-магазину


Запуск інтернет-магазину з WooCommerce та WordPressУ цьому підручнику ми навчимо вас налаштувати Інтернет-магазин WooCommerce + WordPress, де ви можете перераховувати та продавати фізичні продукти.


WooCommerce – це безкоштовний плагін, простий і простий. У реченні WooCommerce – найкращий спосіб перетворити веб-сайт WordPress у повністю функціональний магазин електронної комерції.

  • Це безкоштовно та з відкритим кодом – так само, як WordPress.
  • Це найпопулярніша електронна комерція плагін для WordPress там.
  • Ти можеш налаштуйте його та налаштуйте його самостійно.
  • The налаштування швидке. Зазвичай, це лише питання години.
  • Він працює з будь-яким дизайном / темою на даний момент ви перебуваєте на своєму сайті WordPress – не потрібно виривати ваш сучасний дизайн веб-сайту.

Ми можемо продовжити перелік вище, але натомість скажемо, що WooCommerce просто дає вам усе, що вам може знадобитися для побудови якісного магазину електронної комерції з WordPress.

Contents

Що ви можете продати за допомогою WordPress + WooCommerce?

  • цифрові продукти (наприклад, програмне забезпечення, завантаження, електронні книги),
  • фізичні продукти,
  • послуги,
  • бронювання (наприклад, для зустрічей або іншого, що можна забронювати),
  • передплати,
  • продукти інших людей – як філія,
  • налаштування (наприклад, додаткові налаштування вгорі списків ваших продуктів) тощо.

Іншими словами – ви можете заробляти гроші на своєму веб-сайті.

Ми навіть ризикуємо сказати, що WooCommerce дозволяє вам продавати що завгодно який може присвоїти йому цінник. Крім цього, будь-хто може ним користуватися (якщо вам вже вдалося запустити сайт WordPress, ви також зможете керувати WooCommerce).

Як побудувати Інтернет-магазин за допомогою WordPress та WooCommerce

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

КРОК 1. Отримайте доменне ім’я та веб-хостинг

Щоб створити інтернет-магазин чи будь-який інший веб-сайт, вам знадобляться дві речі:

  • Доменне ім’я – це унікальна адреса вашого магазину в Інтернеті. Щось на зразок YOURSTORE.com
  • Веб хостинг це в основному віддалений комп’ютер, який зберігає ваш веб-сайт, а потім обслуговує його, хто хоче його відвідати. (більш детальне пояснення)

Повне розкриття: Ми заробляємо комісію щоразу, коли купуєте Bluehost. Це допомагає нам запускати Веб-сайт як бізнес. Дякую за твою підтримку.

Є сотні різних хостингових / доменних постачальників, ми зазвичай отримуємо обидва від Bluehost.com. Вони пропонують доступний веб-хостинг (включаючи безкоштовне доменне ім’я на рік) та надійність. Вони також є одним з небагатьох рекомендованих WordPress.org (офіційних) хостинг-провайдерів. Вартість? Починаючи з $ 2,75 / місяць.

Для початку вам просто потрібно зайти на Bluehost.com, і натисніть кнопку «розпочати роботу».

Підпишіться на Bluehost

Це перенесе вас на сторінку, де ви можете вибрати план хостингу для свого магазину. Ви можете почати з найдешевшого варіанту з позначкою “базовий”:

bluehost select
Якщо ви користуєтесь нашими реферальними посиланнями, ви можете отримати Bluehost за $ 2,75 / місяць.

Наступний крок – це вибір доменного імені для вашого нового інтернет-магазину.

домен bluehost

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

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

Чудово! Ви щойно отримали собі доменне ім’я та хостинг-план, щоб разом з ним.

КРОК 2. Встановіть WordPress (БЕЗКОШТОВНО)

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

Це може здатися важким, але насправді це не так. Все, що вам потрібно зробити – це зайти на панель користувачів Bluehost (Bluehost надішле вам посилання в електронному листі підтвердження) – зазвичай це доступно на my.bluehost.com.

Потрапивши туди, прокручуйте вниз, доки не з’явиться піктограма з написом «Встановити WordPress»:

виберіть wordpress

Клацніть на ній і дотримуйтесь інструкцій на екрані. Вас пройдуть поетапно через увесь процес, нічого страшного!

Якщо вам потрібна додаткова інформація про вибір домену та встановлення чистої копії WordPress, будь ласка, перейдіть до цього посібника (прокрутіть до кроків 2).

У цей момент у вас повинен бути встановлений порожній веб-сайт WordPress.

  • Ви можете побачити це, перейшовши до свого основного доменного імені (напр., YOURSTORE.com)
  • Ви можете увійти на панель адміністратора, перейшовши на YOURSTORE.com/wp-admin

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

КРОК 3. Встановіть плагін WooCommerce (БЕЗКОШТОВНО)

Як і у всіх плагінах WordPress, розваги починаються з навігації до вашого Інформаційна панель WordPress / Плагіни / Додати нове. Потрапивши туди, введіть у сферу пошуку «вуокомерцію». Ви побачите WooCommerce в якості першого результату пошуку:

встановити woocommerce

Просто натисніть кнопку «Встановити зараз» поруч із плагіном.

Через пару секунд текст на кнопці зміниться на “Активувати”. Ідіть і натисніть на нього.

активізувати кооперацію

На цьому етапі ви побачите майстра запуску / налаштування на екрані WooCommerce. Ця річ робить процес uber-легким і бере вас за руку через все. Для початку натисніть “Поїдьмо!”

майстер з питань комерції 1

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

Інтернет-магазини – це зокрема вид веб-сайту, і вони потрібні зокрема сторінки для нормальної роботи. Першим кроком майстра WooCommerce є створення цих сторінок для вас:

  • “Магазин” – саме тут будуть відображатися ваші продукти.
  • “Кошик” – це кошик для покупок, де ваші клієнти можуть налаштувати своє замовлення, перш ніж приступати до оформлення замовлення.
  • “Перевіряти” – саме тут клієнти обирають спосіб доставки / доставки і платять за все, що вони купили.
  • “Мій рахунок” – певна сторінка профілю для зареєстрованих клієнтів (вони зможуть переглядати там свої попередні замовлення та керувати іншими деталями).

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

Налаштуйте локальний ресурс

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

майстер з питань комерції 2

Після завершення натисніть «Продовжити».

Розуміти податок з продажу

Податок – це найменш захоплююча частина керування магазином електронної комерції, але ми, на жаль, не можемо нехтувати..

Вам буде приємно побачити, що WooCommerce допомагає і вам у цій частині.

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

доставка майстра з питань комерції

Далі, податок! У WooCommerce є дуже акуратний податковий модуль. Найкраще в ньому полягає в тому, що він допомагає визначити ставки податку залежно від місця вашого магазину (ви встановили це на попередньому кроці).

Якщо ви збираєтесь нараховувати податок з продажу (у більшості випадків ви є), просто поставте прапорець у головному податковому полі. Як тільки ви це зробите, з’явиться новий набір ящиків, який повідомить вас, що буде далі.

переключення податків на комерційну діяльність

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

Натисніть «Продовжити».

Виберіть спосіб оплати (рекомендується PayPal)

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

Ось що можна вибрати:

платежі майстра з питань комерції

Два найпопулярніші варіанти оплати – у самій вершині – PayPal та Stripe – настійно рекомендується інтегрувати свій сайт із обома. Просто натисніть на відповідні прапорці.

Ви також можете вибрати інші способи оплати, які, здається, мають сенс. Пізніше на панелі налаштувань WooCommerce з’явиться ще більше варіантів.

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

Знову натисніть «Продовжити», коли закінчите.

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

Наступний крок – додавання продуктів:

КРОК 4. Додайте свій перший продукт

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

Щоб почати працювати з продуктами, тоді перейдіть до панелі приладів Продукти / Додати товар:

додати продукт

Що ви збираєтеся побачити – це класичний екран редагування вмісту WordPress:

додати товар до комерційної торгівлі

  1. Назва продукту.
  2. Головний Опис продукту. Це велике поле дозволяє ввести стільки інформації про товар, скільки ви бажаєте. Оскільки це WordPress, ви можете розміщувати там не тільки простий текст, але й зображення, стовпці, заголовки, навіть відео та інші медіа. В основному, все, що вважає за потрібне!
  3. Центральний розділ даних про товар. Тут ви визначаєте тип доданого продукту та фізичний, а завантажувані або а віртуальний продукт (послуги також вважаються віртуальними продуктами). У рамках цього центрального розділу ви також отримуєте вкладки для різних параметрів продукту:
    1. Загальні. Тут ви можете встановити ціни та податки.
    2. Інвентар. WooCommerce дозволяє керувати рівнями акцій.
    3. Доставка. Встановіть вагу, габарити та вартість доставки.
    4. Пов’язані продукти. Чудово підходить для налаштування розпродажів, перехресних продажів тощо (подумайте, “Клієнти, які купували це також купив що.”)
    5. Атрибути. Встановлення спеціальних атрибутів продукту Наприклад, якщо ви продаєте сорочки, тут можна встановити альтернативні кольори.
    6. Розширений. Додаткові налаштування. Не суттєво.
  4. Короткий опис. Це текст, який відображається на сторінці продукту під назвою. Найкраще працює як короткий підсумок того, що таке продукт.
  5. Категорії товарів. Групуйте подібні продукти разом. Наприклад, “шапки”. Він працює так само, як і стандартні категорії WordPress.
  6. Теги товарів. Додатковий спосіб допомогти вам організувати свою базу даних продуктів. Він працює так само, як і стандартні теги WordPress.
  7. Зображення продукту. Основний образ продукту.
  8. Галерея товарів. Додаткові зображення товарів, щоб показати їх приголомшливість.

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

Додайте підказки до продуктів для woocommerce

Після завершення налаштування всього вище, натисніть на велику кнопку Опублікувати – ваш перший продукт щойно доданий!

Після додавання в базу даних декількох товарів, розділ продуктів на інформаційній панелі повинен виглядати приблизно так:

товари з питань торгівлі

КРОК 5. Виберіть тему для свого Інтернет-магазину (БЕЗКОШТОВНО)

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

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

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

WooCommerce проти вашої поточної теми

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

Крім того, ви можете використовувати спеціальні теми, оптимізовані WooCommerce. Ці теми оснащені заздалегідь заданими стилями, завдяки яким усі елементи WooCommerce виглядають чудово.

Ось наша рекомендація:

вибір теми

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

вітрина магазину

Крім того, ви можете відвідати Розділ електронної комерції на ThemeForest – найбільший каталог преміальних тем WordPress в Інтернеті.

тематичний ліс

Незалежно від того, чи вирішили ви дотримуватися вашої поточної теми або хочете щось нове та оптимізоване WooCommerce, що вам потрібно зробити далі – переконатися, що окремі сторінки магазину виглядають добре. Зробимо це зараз:

Правила дизайну магазину електронної комерції

Давайте поговоримо про кілька важливих аспектів, перш ніж ми потрапимо в азотну крупу.

В основному – що робить дизайн магазину електронної комерції хорошим (читайте: вигідно)? Ось найважливіші параметри:

  • Дизайн має бути чітким і ні в якому разі не плутати. Розгублений відвідувач нічого не купить.
  • Блок центрального вмісту потрібно привернути увагу відвідувачів відразу після відвідування сайту. Цей центральний блок – це місце, де будуть відображатися товари.
  • Регульовані бічні панелі. Вам потрібно мати можливість вибрати кількість бічних панелей, а також відключити бічну панель для деяких сторінок (докладніше про це пізніше).
  • Чуйний та оптимізований для мобільних пристроїв. Дослідження вказують [2] що близько 80% людей в Інтернеті мають смартфон. Згідно з іншим дослідженням [3], 61% ваших відвідувачів мобільного зв’язку негайно виїжджатимуть до ваших конкурентів, якщо вони матимуть перешкод для перегляду мобільних пристроїв. Іншими словами – вирішальне значення має забезпечити оптимізацію веб-сайту для мобільних пристроїв.
  • Хороша навігаційна структура. Ви хочете зрозумілі меню, які легко зрозуміти – щоб ваші відвідувачі могли знайти сторінку, яку вони шукають.

Маючи на увазі вищесказане, ось що ви можете зробити з окремими сторінками магазину:

Сторінка вашого магазину

Тут знаходиться основний перелік ваших товарів. Якщо ви перейшли до майстра налаштування WooCommerce, цю сторінку можна знайти за адресою YOURDOMAIN.com/shop

Це стандартна сторінка WordPress – ви можете редагувати її через Інформаційна панель WordPress / Сторінки.

Те, що варто зробити:

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

повна ширина

Основна ознака сторінки “Магазин” полягає в тому, що під стандартним вмістом у ньому є спеціальна частина, де відображаються списки ваших товарів. Ось як це виглядає на темі Storefront:

сторінка магазину woocommerce

Як бачите, приємні образи товарів – це головне, це перше, що вам слід правильно підійти! Іншими словами – ви, ймовірно, повинні працювати над зображеннями свого продукту більше, ніж над чим-небудь іншим.

WooCommerce також дозволяє відображати свої продукти альтернативними способами на цій сторінці. Коли ви йдете до інформаційну панель WordPress / WooCommerce / Налаштування / Продукти а потім Дисплей розділ:

Дисплей товарів для вузької комерції

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

Індивідуальні сторінки продуктів

Для того, щоб побачити їх, натисніть будь-який список товарів на сторінці магазину.

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

Ось наш приклад із темою Storefront (без додаткових налаштувань):

Перелік товарів для торговельної торгівлі

Магазинний візок

Ще одна важлива сторінка, яку можна скорегувати Інформаційна панель / Сторінки.

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

кошик woocommerce

Перевіряти

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

Ми насправді не рекомендуємо робити будь-які перетворення на цій сторінці, крім однієї:

Сторінка оформлення замовлення абсолютно повинна бути на повну ширину. Єдиним прийнятним виходом сторінки для покупця має бути завершення замовлення, а не відволікатися на речі, наявні на бічній панелі.

Це можна зробити через Інформаційна панель / Сторінки (просто повторіть процес, який ви пройшли зі сторінки магазину).

Крім цього, чудовий вигляд сторінки Checkout відмінний:

оформлення замовлення на торгову мережу

На цьому етапі ви в основному працюєте з коригуванням дизайну магазину, тепер давайте розглянемо можливості розширення функціональності магазину..

КРОК 6. Розширення WooCommerce – як?

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

Перелічимо декілька найкорисніших:

Розширення WooCommerce

Почнемо з розширень – офіційних доповнень, затверджених командою WooCommerce.

Щоб побачити, що доступно, ви можете перейти до ця сторінка.

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

Деякі з гідніших згадок:

  • Платіжні шлюзи. Ці розширення дозволяють приймати більше способів оплати понад стандартний PayPal. Загалом, чим більше способів оплати ви можете дозволити собі (ці шлюзи часто платять), тим краще.
  • Розширення доставки. Це стане в нагоді, якщо ви хочете автоматично інтегрувати свій магазин з офіційними тарифами доставки від таких компаній, як UPS або FedEx.
  • Розширення бухгалтерського обліку. Інтегруйте свій магазин WooCommerce з інструментом обліку на ваш вибір.
  • WooCommerce бронювання. Дозвольте клієнтам бронювати зустрічі на послуги, не виходячи з вашого сайту.
  • Підписки на WooCommerce. Нехай клієнти підписуються на ваші товари чи послуги та сплачують щотижневу, щомісячну або щорічну плату.
  • Номер ПДВ ЄС. Для тих, хто працює в межах ЄС.
  • TaxJar. Покладіть податок з продажу на автопілот.

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

Плагіни, які заряджають ваш магазин електронної комерції

Відклавши розширення в сторону, ви також можете використовувати інші плагіни WordPress для подальшого поповнення магазину. Ось що ви повинні отримати:

    • Йоаст SEO. Поліпшити SEO всього веб-сайту.
    • Плагін Yoast WooCommerce SEO. Покращіть оптимізацію оптимізації своїх продуктів та інших областей магазину електронної комерції.
    • WooCommerce багатомовна. Запустіть повністю багатомовний сайт WooCommerce.
    • Контактна форма 7. Нехай відвідувачі вашого сайту безпосередньо контактують з вами.
    • UpdraftPlus. Створіть резервну копію всього вмісту свого веб-сайту, включаючи продукти та інші дані магазину.
    • Кнопки соціальної частки від GetSocial. Нехай ваші покупці діляться вашими продуктами зі своїми друзями та родиною через соціальні медіа.
    • MonsterInsights. Інтегруйте свій сайт з Google Analytics.
    • iThemes Security. Передустановки безпеки для вашого веб-сайту.
    • W3 Загальний кеш. Пришвидшіть веб-сайт за допомогою кешування.

Створення Інтернет-магазину в двох словах

Як бачимо, ступінь складності, коли мова йде про створення власного магазину електронної комерції за допомогою WordPress, не висока, але все ж знадобиться певний час, щоб пройти всі вищезазначені етапи – ймовірно, день-два.

Це все ще неймовірно, якщо врахувати, що, скажімо, п’ять років тому вам потрібно було б найняти розробника і заплатити їм на північ від 5000 доларів, щоб створити щось подібне. Тепер ви можете все зробити самостійно!

У будь-якому випадку, щоб допомогти вам пройти всі необхідні завдання, ось контрольний список “Вирізати та зберігати”:

Перед тим як ти почнеш

  • Отримайте доменне ім’я, підпишіться на веб-хостинг, запустіть робочу установку WordPress.
  • Переконайтесь, що ваш новий порожній сайт WordPress працює належним чином (жодних очевидних помилок не з’являється тощо).

Встановлення WooCommerce

  • Встановіть та активуйте головний плагін WooCommerce.
  • Пройдіть майстра налаштування WooCommerce, звернувши пильну увагу на:
    • Отримання чотирьох створених необхідних сторінок (Магазин, кошик, замовлення, мій рахунок).
    • Налаштування локального магазину.
    • Налаштування податку з продажу та доставки.
    • Вибір початкових способів оплати.

Продукція

  • Додайте в магазин більшість (або всі) своїх товарів чи категорій товарів.

Дизайн

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

Розширення

  • Встановіть шлюзи платежів, які ви хочете використовувати.
  • Розглянемо деякі розширення доставки.
  • Розглянемо розширення бухгалтерського обліку.
  • Перегляньте інші розширення і безкоштовна категорія.

Плагіни

Подумайте про встановлення всіх плагінів, які будуть заряджати ваш магазин електронної комерції:

  • Йоаст SEO
  • Yoast WooCommerce SEO
  • WooCommerce багатомовна
  • Контактна форма 7
  • UpdraftPlus
  • Кнопки соціальної частки від GetSocial
  • MonsterInsights
  • iThemes Security
  • W3 Загальний кеш.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me