Як зробити веб-сайт магазину електронної комерції за допомогою WordPress

Електронна комерція є гарячою, тому що вона дозволяє неймовірно легко заробляти 6 цифр на місяць, не створюючи цегельний та мінометний бізнес із шалено високими накладними витратами.


Але проблемою для багатьох є дорогі щомісячні плати за більшість платформ електронної комерції, як Shopify. Якщо ви тільки починаєте, вам потрібно більш доступне рішення, щоб ви могли витратити більше на такі речі, як маркетинг та реклама.

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

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


Давайте розпочнемо!

Що вам потрібно:

  • Хостинг. Я рекомендую SiteGround.
  • А Доменне ім’я.
  • Тема WordPress. Для цього підручника ми використовуємо безкоштовну тему Astra.
  • WordPress Page Builder. Для цього ми використовуємо безкоштовний конструктор сторінок Elementor.
  • WooCommerce, найкращий плагін для електронної комерції WordPress.

Крок 1. Купіть веб-хостинг та доменне ім’я.

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

Що таке хостинг та доменне ім’я?

Веб-хостинг – це місце в Інтернеті, де буде жити ваш веб-сайт. Це як фізичний будинок, де можна знайти ваші речі. З іншого боку, доменне ім’я – це адреса вашого веб-сайту. Це як ваша адреса, яку ви даєте людям, щоб вони могли прийти до вас в гості. “Facebook.com”, “Google.com” та “WordPress.com” – всі приклади доменних імен.

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

Siteground, Моя бажана послуга веб-хостингу

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

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

Ось основні функції SiteGround:

  • Безкоштовний SSL сертифікат
  • Швидка підтримка знань
  • Постановочне середовище WordPress
  • Безкоштовна міграція веб-сайтів
  • 30 днів резервного копіювання

SiteGround – вагомий вибір для ваших потреб у веб-хостингу. Вони обслуговують веб-сайти WordPress і пропонують менше ресурсів, ніж їх конкуренти, але більш високу надійність.

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

Після виходу на їх домашню сторінку ви побачите чотири різних типи хостингу:

виберіть план майданчика

Виберіть WordPress хостинг та натисніть Почати. Потім ви побачите три плани ціноутворення:

ціни на хостинг сайту wordpress для хостингу

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

Вибравши план, натисніть Отримайте план. Потім ви перейдете на сторінку, де вам доведеться вибрати домен. Якщо ви вже купили ім’я домену, виберіть “У мене вже є домен”. Але якщо у вас його немає, виберіть “Зареєструвати новий домен”, щоб купити домен прямо на Siteground.

виберіть домен

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

Крок другий. Встановіть WordPress.

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

Siteground фактично поставляється з одним кліком WordPress встановити, що робить всю важку роботу з установки та налаштування WordPress для вас.

Після завершення покупки хостингу ви побачите екран із посиланням “Перейти до зони клієнтів”. Натисніть на це, і ви перейдете на сторінку, де ви зможете налаштувати новий обліковий запис хостингу. Під Налаштуйте свій веб-сайт, виберіть Створіть новий веб-сайт.

Потім ви побачите список програмного забезпечення, яке ви можете встановити. Виберіть WordPress.

встановити wordpress

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

Після цього натисніть Підтвердіть > Повна настройка. А тепер у вас є веб-сайт WordPress в реальному часі.

Щоб почати налаштування свого веб-сайту, вам доведеться увійти в сервер WordPress. Для цього перейдіть на інформаційну панель сайту Siteground і перейдіть на Мої рахунки вкладка. Клацніть на Установка тут ви побачите ім’я домену, яке ви зареєстрували. Поперек це зелений колір Перейдіть на портал адміністратора кнопка. Натисніть на цю кнопку, щоб перейти на сторінку входу в WordPress.

перейти на інформаційну панель адміністратора WordPress

Сторінки входу в WordPress зазвичай мають такі формати: yourdomain.com/wp-admin і yourdomain.com/wp-login. Запам’ятайте URL-адресу сторінки входу, щоб наступного разу, коли ви зможете отримати доступ до неї, ввівши безпосередньо URL-адресу у свій адресний рядок і більше не потрібно входити в Siteground.

Сторінка входу в WordPress виглядає так:

сторінку входу в wordpress

Введіть тут своє ім’я користувача та пароль для першого входу на свій веб-сайт.

Крок 3. Встановіть тему Astra і сайти Astra.

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

Astra – безкоштовна тема WordPress, яка володіє чудовою швидкістю та простотою. З’єднайте його з Astra Sites (безкоштовним плагіном), і кожен може мати прекрасний веб-сайт за допомогою декількох клацань миші. Також доступна версія Pro, яка робить Astra ідеальною темою.

Ось функції, які мені найбільше подобаються в Astra:

  • Одна з найшвидших доступних тем
  • Більше 100 сайтів для початківців (більшість на 100% безкоштовні)
  • Гнучка функція меню Mega
  • Потужний додатковий пакет
  • Широка підтримка WooCommerce

Тема Astra – відмінний вибір для будь-якого проекту веб-дизайну WordPress. Насправді це тема, яку я використовую на цьому веб-сайті та у всіх моїх веб-проектах.

Я маю повну довіру до розробника і був дуже вражений тим, наскільки добре зашифрована тема.

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

Щоб встановити Astra, перейдіть на сторінку Зовнішній вигляд > Тема > Додати новий. Знайдіть Astra, натисніть Встановити, і Активуйте.

встановлення теми astra

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

Після встановлення Astra ви побачите це повідомлення на інформаційній панелі:

Початок роботи сайтів Astra

Клацніть Почати. Це встановить сайти Astra Starter для вас.

Вибір програми для створення вашої сторінки

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

Основні характеристики елемента:

  • Живий редактор передньої сторінки
  • Особливості персоналізації веб-сайту
  • Бібліотека шаблонів і блоків
  • Широкі мобільні чуйні варіанти
  • Найпотужніший будівельник Popup
  • PRO: Створення власних колонтитулів
  • PRO: Створення макетів типу публікації

Elementor – це найсильніший в даний час розробник сторінки. Вони послідовно випускають нові функції, які відповідають сучасним тенденціям дизайну. Це означає, що ви зможете підтримувати свій веб-сайт відповідним. Якщо попутно ви хочете отримати доступ до розширених функцій, ви можете перейти до Elementor Pro, що, на мою думку, є неймовірним значенням, враховуючи всі додаткові модулі та функції живлення, які він включає.

Вибір теми вашого сайту Astra

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

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

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

Якщо ви помітите, з’явиться поле “Встановити необхідні плагіни”. Якщо встановити цей прапорець, ви встановите всі необхідні плагіни, щоб тема виглядала саме так, як є. Для теми “Спеціальна друк” вона встановить Elementor, WooCommerce та WPForms. Це економить мені стільки часу, тому що мені більше не доведеться встановлювати ці додатки один за іншим. Все для мене зроблено.

імпорт теми сайту Astra

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

Крок 4. Налаштуйте свій веб-сайт.

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

Вибір палітри кольорів

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

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

домашня сторінка coolors

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

кольорова палітра з шістнадцятковим кодом

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

Ще один класний інструмент – Colorzilla, розширення Google Chrome, яке дозволяє отримувати шістнадцятковий код будь-якого кольору, який ви бачите на будь-якому веб-сайті, щоб ви могли використовувати його самостійно. Якщо ви хочете отримати розширення Colorzilla, натисніть тут. Потім натисніть кнопку Додати в Chrome.

colorzilla

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

значок colorzilla

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

Настроювання типографії

Ви також хочете використовувати свою власну типографіку, щоб зробити ваш веб-сайт виділенням. На веб-сайтах зазвичай є 2-3 шрифти. У вас буде шрифт для заголовків або меню, шрифт для тіла та додатковий “поп-шрифт”. Як і кольори, ви не можете використовувати будь-який шрифт. Вам потрібно переконатися, що вони добре виглядають разом, і надіслати правильне повідомлення про ваш бренд.

Мені подобається користуватися Fontpair.co це веб-сайт, який показує, як два різних шрифти виглядають разом.

за допомогою fontpairs.co

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

Мені також подобається використовувати WhatFont, розширення Google Chrome, яке повідомляє, який шрифт використовується на будь-якому веб-сайті. Щоб встановити WhatFont, натисніть тут потім натисніть кнопку Додати в Chrome. Потім ви побачите цю піктограму на панелі інструментів:

Значок whatfont

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

за допомогою whatfont

Отримання логотипу

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

Canva постачається з великою кількістю шаблонів логотипів, які ви можете змінити, щоб зробити власні. Однак зауважте, що якщо ви хочете експортувати логотип з прозорим фоном, вам доведеться перейти на Pro (який має місячну безкоштовну пробну версію). Ви завжди можете зайти у Photoshop або Фотопея щоб видалити фон, але це лише додає додатковий крок до процесу.

полотна логотипи

Якщо ви хочете заощадити час, ви можете просто найняти дизайнера логотипів-фрілансерів, щоб зробити це за вас. Ви можете спробувати веб-сайти на зразок Fiverr.com або 99design, але ви повинні бути обережними у виборі виконавця, виходячи з їх стилю, записів, відгуків, рейтингів тощо.

Налаштування вашого веб-сайту

Настав час використовувати ці кольори, шрифти та логотипи на своєму веб-сайті. Якщо ви перебуваєте на панелі інформаційних панелей WordPress, перейдіть на сторінку Зовнішній вигляд > Налаштувати щоб відкрити налаштування теми.

налаштувати тему

Якщо ви перебуваєте в передній частині веб-сайту, а вгорі є чорна смуга, ви можете натиснути Налаштувати щоб відкрити налаштування.

налаштувати тему

Ось так виглядає налаштування теми:

налаштування теми

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

Щоб змінити кольори вашого веб-сайту, перейдіть на сторінку Astra Кольори та фон. У вас буде можливість змінити базові кольори, сухарі, заголовки та колонки нижнього колонтитулу.

кольоровий фон редактор

Основні кольори – це тема, посилання, текст і посилання наведіть колір вашого веб-сайту. Якщо ви хочете змінити, наприклад, Колір теми, натисніть Виберіть Колір. Ви побачите два способи вибору кольору. По-перше, ви можете вставити шістнадцятковий код у поле. Тож якщо ви знайшли колір у Coolors.co чи будь-яких інших місцях, ви можете тут вставити шістнадцятковий код. Ви також можете вибрати колір у вбудованому інструменті вибору.

основний редактор кольорів

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

типографічний інструмент

Далі – додавання вашого логотипу. Щоб завантажити свій логотип, перейдіть на сторінку Макет > Заголовок > Ідентифікатор сайту. У розділі Логотип натисніть на Змінити логотип кнопку та завантажте ваш логотип.

завантажити логотип

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

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

Щойно ви виконали налаштування, не забудьте натиснути Опублікувати щоб зміни відбулися на вашому веб-сайті.

Крок 5. Настроювання вашого веб-сайту за допомогою Elementor.

На даний момент у вас з’явилися основи налаштування, такі як зміна кольору сайту, типографія, додавання логотипу та все таке. Тепер прийшов час перейти до деталей, що містять круту, і почати використовувати Elementor (або будь-який інший веб-розробник), щоб повністю змінити вигляд вашого сайту.

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

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

Є два способи редагування сторінки за допомогою Elementor. По-перше, якщо у вас є бекенд WordPress, натисніть Сторінки і ви повинні побачити список усіх сторінок вашого веб-сайту, включаючи ті, які були автоматично створені за допомогою шаблону сайту Astra. Сторінки, створені за допомогою певного конструктора сторінок (наприклад, Elementor), будуть позначені як такі:

сторінок

Щоб відредагувати сторінку за допомогою свого конструктора сторінки, наведіть курсор миші на неї та натисніть Редагувати за допомогою (конструктор сторінки). У моєму випадку це буде Редагувати за допомогою елемента.

редагувати за допомогою елемента

Після натискання на нього ви потрапите всередину Elementor.

Інший спосіб – якщо ви перебуваєте в передній частині веб-сайту, перейдіть на сторінку, яку ви хочете відредагувати, і натисніть Редагувати за допомогою елемента на чорній смузі вгорі:

редагувати за допомогою елемента

Будь-який із них потрапить до вас в Елементтор. Потрапивши до Elementor, ви зможете використовувати різні зображення для своєї заголовка, змінювати тексти, змінювати піктограми тощо. Почати можна, змінивши тексти та зображення в заголовку, щоб відповідати вашому бізнесу. Ось кілька речей, які ви можете зробити з текстами всередині Elementor:

редагування текстів у стихії

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

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

редагування зображень в елементі

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

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

Якщо ви хочете придбати Elementor Pro і одночасно отримати безкоштовний доступ до моїх курсів Elementor Pro, натисніть це посилання тут.

Крок 5. Налаштуйте WooCommerce.

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

WooCommerce вже була встановлена ​​для мене темою користувальницької веб-сторінки для друку Astra, тому тепер мені доведеться зайти і налаштувати її. Якщо у вас ще не встановлено WooCommerce, просто перейдіть на сторінку Плагіни > Додати новий і пошук WooCommerce.

Перше, що нам потрібно зробити – це піти WooCommerce > Налаштування. Ви побачите 7 вкладок: Загальні, Продукти, Доставка, Платежі, Облікові записи та конфіденційність, Електронна пошта та Додаткові.

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

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

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

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

налаштування продукту woocommerce

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

налаштування товарних запасів, комерція

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

варіанти завантажуваних товарів

Наступна вкладка – Доставка. Це актуально лише в тому випадку, якщо ви продаєте фізичні продукти, які будуть відправлені покупцям. Всередині цієї вкладки є три підрозділи: Зони доставки, Варіанти доставки та Класи доставки.

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

зони перевезення

Якщо вам потрібна додаткова допомога з зонами доставки, ви можете перевірити зону доставки WooCommerce документація.

Далі йде Варіанти доставки розділ. У цьому розділі ви можете контролювати спосіб відображення тарифів доставки на вашому веб-сайті та встановлювати стандартний або необхідний пункт доставки.

варіанти доставки

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

класи доставки

Щоб встановити тарифи на доставку, перейдіть на сторінку Зони доставки а також створити або відредагувати існуючий спосіб доставки, наприклад “Єдиний тариф”.

додати вартість доставки

Після натискання Редагувати, з’явиться спливаюче вікно. Тут ви зможете додати єдину ставку доставки та додаткову вартість для щойно створеного класу доставки.

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

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

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

методи оплати

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

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

акаунти та конфіденційність

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

сповіщення електронною поштою

Нарешті, Розширений вкладка, яка замінила вкладку API, дозволяє налаштувати додаткові технічні деталі, такі як налаштування сторінки, де ви можете повідомити WooCommerce, яка сторінка буде виконувати функції вашої сторінки кошика чи сторінки замовлення.

налаштування сторінки, комерція

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

Крок 6. Додайте продукти.

Коли ви закінчили з основними налаштуваннями WooCommerce, настав час додавати продукти. Тема сайту Astra, яку ми використовували в цьому підручнику, вже є зразковими продуктами, і ось так виглядає сторінка продукту на фронті:

сторінка продукту

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

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

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

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

WooCommerce дозволяє додавати такі види продуктів:

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

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

варіанти завантажуваних товарів

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

В Інвентар, ви зможете додати SKU, надати конкретну кількість запасів для цього продукту, встановити стан запасів тощо.

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

доставка в даних про товар

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

пов'язані продукти

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

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

короткий опис та зображення продукту

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

наочність каталогу

Щойно ви закінчите все, натисніть Оновлення щоб зберегти всі ваші зміни.

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

Крок 7. Налаштуйте каси.

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

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

картриджів

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

Крок 8. Будьте зверху відмови від кошика.

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

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

На щастя, є плагін під назвою Відновлення відмови від кошика WooCommerce плагін, який відстежує і автоматично надсилає електронні листи клієнтам із покинутими кошиками – БЕЗКОШТОВНО!

Якби ви використовували тему сайту Astra, яку я тут використовував, цей плагін був би вже встановлений для вас. Але якщо ні, ви можете встановити його, перейшовши на Плагіни > Додати новий і шукайте плагін.

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

залишення кошика для стягнення

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

наступні електронні листи

Потім ви перейдете в редактор електронної пошти:

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

Підведенню

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

SiteGround

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

Основні характеристики сайту:

  • Безкоштовний SSL сертифікат
  • Швидка підтримка знань
  • WordPress постановочна середовище
  • Безкоштовна міграція веб-сайтів
  • Щоденні резервні копії

SiteGround – вагомий вибір для ваших потреб у веб-хостингу. Вони обслуговують веб-сайти WordPress і пропонують менше ресурсів, ніж їх конкуренти, але більш високу надійність.

Перевірте SiteGround

Тема Астра

Astra – безкоштовна тема WordPress, орієнтована на швидкість. За бажанням ви можете придбати версію Pro за $ 59, яка додає додаткові настройки та параметри.

Основні характеристики теми Astra:

  • Не тема фастів, але це не Слоун
  • Багато безкоштовних демо-сайтів
  • Особливість гнучкої мега-меню
  • Параметри користувальницьких макетів
  • Підтримка WooCommerce
  • Підтримка LearnDash

Тема Astra – це справедливий вибір для будь-якого проекту веб-дизайну WordPress. Я вважаю, що найбільше питання полягає в тому, якщо вам навіть сьогодні потрібно придбати тему, оскільки розробники сторінок роблять все ті ж речі, для яких вам знадобиться тема. Наприклад, у Elementor є безкоштовна тема Hello, яка дозволяє розробнику сторінок робити всю роботу.

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

Для мене, хоча, я вважаю, що тема «Астра» не в курсі сучасних тенденцій, і я більше не рекомендую її.

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

Ознайомтеся з темою Astra

Елементтор

Elementor – це конструктор сторінок WordPress, який здійснив штурм веб-дизайну WordPress. Він має найглибший набір функцій, але він дуже простий у використанні та освоєнні. Elementor – найбільш повнофункціональний розробник безкоштовних сторінок. Існує також доповнення Pro для додавання додаткових функцій розробника.

Основні характеристики елемента:

  • Живий редактор передньої сторінки
  • Особливості персонального веб-сайту
  • Бібліотека шаблонів і блоків
  • Широкі мобільні чуйні варіанти
  • Найпотужніший будівельник Popup
  • PRO Створюйте власні колонтитули
  • PRO Створення макетів типу публікації

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

Elementor Pro – це неймовірна цінність, враховуючи всі додаткові модулі та функції живлення, які вона включає.

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

Ознайомтеся з елементом

CartFlow

CartFlows – це конвеєр продажів воронки для WordPress. Це дозволяє швидко та легко будувати послідовності продажів, використовуючи свій конструктор сторінок на вибір.

Основні функції Cart Cartlow:

  • Професійно розроблені шаблони
  • 5 Місце розташування замовлень
  • Upsells одним клацанням
  • Використовуйте свій уподобаний конструктор сторінок
  • Розширювана на відміну від послідовностей кліків
  • Таймери зворотного відліку та тестування на спліт

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

Ознайомтеся з CartFlow

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector