Как да направите уебсайт за онлайн магазин за електронна търговия с 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 wordground

Изберете такъв според вашите нужди и бюджет. Можете също да проверите техните сравнение на всеки хостинг план за да получите по-добра представа кой план най-добре отговаря на вашите нужди.

След като сте решили план, щракнете Вземете план. След това ще бъдете отведени на страница, където ще трябва да изберете домейн. Ако вече сте закупили име на домейн, изберете „Вече имам домейн“. Но ако нямате такъв, изберете „Регистрирайте нов домейн“, за да купите домейн точно в Siteground.

изберете домейн

След като имате име на домейн, което харесвате и е достъпно, щракнете Продължи. Следващата стъпка е предоставянето на вашите лични данни и данни за фактуриране, за да завършите покупката. Предоставете точно своите данни и щракнете Плати сега. Вече имате надежден уеб хостинг и име на домейн.

Стъпка втора. Инсталирайте WordPress.

WordPress е безплатен инструмент с отворен код, който ви позволява да създавате уебсайтове, дори и да нямате представа за кодирането. Това е най-лесната и най-мощна система за управление на съдържанието на уебсайтове до момента. Има много неща, които харесвам в WordPress, и ако четете повече от моите уроци или гледате моите видеоклипове, ще разберете повече защо смятам, че WordPress е най-добрият инструмент за създаване на уебсайтове за нетехнологии.

Siteground всъщност идва с инсталиране на WordPress с едно щракване, което върши цялата тежка работа по инсталирането и настройката на WordPress за вас.

След като приключите с покупката на хостинг, ще видите екран с връзка „Продължете към зоната на клиентите“. Кликнете върху това и ще бъдете отведени на страница, където можете да настроите вашия нов хостинг акаунт. при Настройте своя уебсайт, изберете Стартирайте нов уебсайт.

След това ще видите списък на софтуера, който можете да инсталирате. Изберете WordPress.

инсталирайте wordpress

След това ще трябва да предоставите данни за влизане на администратора за вашия нов уебсайт, като имейл адреса, потребителското име и паролата. Не забравяйте да защитите тези данни, защото ще ги използвате, за да влезете в уебсайта си.

След като направите това, щракнете Потвърждение > Цялостна настройка. И сега имате жив уебсайт на WordPress на живо.

За да започнете да персонализирате уебсайта си, ще трябва да влезете в бекенда на WordPress. За да направите това, отидете на таблото за управление на Siteground и преминете към Моите акаунти раздел. Щракнете върху Инсталация и тук ще видите името на домейна, което сте регистрирали. Отвъд него е зелено Отидете на портала за администратори бутон. Кликнете върху този бутон, за да отидете на вашата страница за вход в WordPress.

отидете на таблото за управление на wordpress admin

Страниците за вход в 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 перфектната тема.

Ето функциите, които най-много обичам при Астра:

  • Една от най-бързите налични теми
  • Над 100 сайтове за начинаещи (повечето са 100% безплатни)
  • Гъвкава функция на Mega Menu
  • Мощен пакет с добавки
  • Обширна поддръжка на WooCommerce

Темата Astra е отличен избор за всеки проект за уеб дизайн на WordPress. Всъщност това е темата, която използвам на този уебсайт и във всички мои проекти за уебсайтове.

Имам пълно доверие в програмиста и бях много впечатлен от това колко добре е кодирана темата.

Но повече от това, темата е толкова проста за използване поради всички грижи и мисъл, които са влезли в нея. В повечето ситуации той се конфигурира въз основа на инструментите, които използвате.

За да инсталирате Astra, отидете на Външен вид > тема > Добави нов. Търсете Astra, щракнете Инсталирай, и Активирате.

инсталиране на тема astra

Друго нещо, което обичам Astra, е фактът, че има приставка, наречена Сайтове за начинаещи Astra с библиотека от предварително изградени безплатни и премиум шаблони. Можете да използвате тези шаблони за вашия собствен уебсайт само с няколко кликвания. Ще използваме шаблон на Astra Site, за да съкратим наполовина времето за създаване на уебсайта си.

След като инсталирате Astra, на таблото за управление ще видите това съобщение:

Сайтовете на Astra започват

Кликнете Първи стъпки. Това ще инсталира Astra Starter Sites за вас.

Избор на вашия създател на страници

След това ще бъдете попитани кой конструктор на страници предпочитате и в този урок аз ще използвам Elementor. Elementor е създател на WordPress страници, който е взел WordPress уеб дизайн от буря. Той имаше най-дълбокия набор от функции, но въпреки това е много лесен за използване и овладяване. Elementor е най-пълнофункционалният създател на безплатни страници. Има и Pro добавка за добавяне на допълнителни функции за разработчици.

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

  • Жив редактор на предни страни
  • Функции за персонализиране на уебсайтове
  • Библиотека с шаблони и блокове
  • Обширни възможности за отзивчиви мобилни устройства
  • Най-мощният създател на изскачащи прозорци
  • PRO: Създаване на персонализирани заглавки / долни колонтитули
  • PRO: Създаване на оформления за тип публикация

Elementor е най-силният създател на страници в момента. Те последователно пускат нови функции, които са в съответствие с актуалните тенденции в дизайна. Това означава, че ще можете да поддържате уебсайта си подходящ. Ако по пътя искате достъп до разширени функции, можете да надстроите до Elementor Pro, което според мен е невероятна стойност предвид всички допълнителни модули и функции за захранване, които включва.

Избор на вашата тема на Astra Site

След като изберете създателя на страницата си, ще бъдете отведени в библиотеката на шаблоните на Astra Sites. Има много красиви шаблони, които можете да използвате. Отделете време при избора на желания от вас шаблон. И имайте предвид, че тези шаблони са напълно редактируеми с избрания от вас създател на страница, което означава, че ще можете да персонализирате всяка част и елемент на уебсайта като заглавието, изображенията, цветовете, логото и т.н..

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

За да инсталирате тема, просто трябва да кликнете върху нея, за да бъдете отведени до визуализацията. Ако ви харесва това, което виждате, щракнете върху Тема за импортиране бутон и се уверете, че кутиите са всички.

Ако забележите, има поле с надпис „Инсталиране на задължителни приставки“. Ако поставите отметка в това поле, ще инсталирате всички необходими плъгини за темата, за да изглеждат точно както е. За темата за персонализиран печат ще инсталира 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

Получаване на лого

Ще ви е необходимо и лого на марката, за да разделяте уебсайта си и да установите идентичността на марката си. Има няколко начина за получаване на лого. Можете да опитате да го направите сами, като използвате невероятен инструмент за проектиране, наречен Canva. Той е доста популярен, тъй като прави дизайна наистина лесен дори за начинаещи.

Canva се предлага с много шаблони за лого, които можете да модифицирате, за да направите своя собствена. Имайте предвид обаче, че ако искате да експортирате логото с прозрачен фон, ще трябва да надстроите до Pro (който има едномесечна безплатна пробна версия). Винаги можете да отидете във Photoshop или Photopea за да премахнете фона, но това само добавя една допълнителна стъпка към процеса.

лого лого

Ако искате да спестите време, можете просто да наемете дизайнер на лого на свободна практика, който да го направи вместо вас. Можете да опитате уебсайтове като Fiverr.com или 99design, но трябва да внимавате при избора на изпълнител въз основа на техния стил, запис, рецензии, рейтинги и други.

Персонализиране на вашия уебсайт

Сега е време да използвате тези цветове, шрифтове и лога на вашия уебсайт. Ако сте в задния панел на WordPress, отидете на Външен вид > Персонализиране за да отворите персонализатора на тема.

персонализирайте тема

Ако сте на лицевата страна на уебсайта си и в горната част има черна лента, можете да щракнете Персонализиране за да отворите персонализатора.

персонализирайте тема

Ето как изглежда персонализаторът на теми:

тема за персонализиране

Тук можете да качите логото си, да промените цветовете на сайта и типографията, да персонализирате бутоните и много други. Промените, които правите тук, се показват в реално време на вашия уебсайт, за да можете веднага да видите как изглежда. Освен това всяка тема има различни опции за персонализиране, така че ако използвате друга тема, различна от Astra, тук може да видите различни опции.

В Astra, за да промените цветовете на вашия сайт, отидете на Цветове и фон. Ще имате възможност да промените основни цветове, галета, заглавки и цветове на лентата на долния колонтитул.

цветен фон редактор

Основните цветове са темата, връзката, текста и цвета на курсора на курсора на вашия уебсайт. Ако искате да промените например цвета на темата, щракнете Изберете Цвят. Ще видите два начина за избор на цвят. Първо можете да поставите Hex код в кутия. Така че, ако сте намерили цвят в Coolors.co или на други места, можете да поставите Hex кода тук. Можете също да изберете цвят във вграден инструмент за избор.

основен цветен редактор

За да промените типографията на вашия сайт, върнете се към главното меню на персонализатора и щракнете книгопечатане. Ще можете да промените базата, галетата, съдържанието и типографията на блога.

типографски персонализатор

Следва добавяне на вашето лого. За да качите логото си, отидете на оформление > удар с глава > Идентичност на сайта. В секцията Лого щракнете върху Промяна на логото бутон и качете вашето лого.

качване на лого

Astra също така ви позволява да регулирате ширината на логото си, така че да можете да промените колко големи или малки искате да се показва. Ако превъртите надолу, ще можете също да промените заглавието на сайта си, да добавите етикет на сайта и икона на сайта или favicon.

Можете да направите много повече в областта за персонализиране на Astra като промяна на ширината на съдържанието на вашия сайт, промяна на структурата на публикациите в блога, персонализиране на долния колонтитул и заглавката и други. Разгледайте своите опции тук, за да видите какво ви харесва най-добре за вашия уебсайт.

След като извършите персонализирането, не забравяйте да щракнете публикувам за да направите промените си на живо на вашия сайт.

Стъпка 5. Персонализиране на уебсайта ви с Elementor.

На този етап сте намалили основите за персонализиране като промяна на цвета на сайта, типография, добавяне на лого и всички тези неща. Сега е време да стигнете до дебелозърнестите детайли и да започнете да използвате Elementor (или който и да е създател на страници, който предпочитате), за да промените изцяло начина, по който изглежда сайтът ви.

Както споменах по-рано, ще използвам Elementor в този урок, защото просто мисля, че е най-доброто, но можете да използвате всеки създател на страници, който ви е удобен.

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

Има два начина да редактирате страница с Elementor. Първо, ако сте в бекенда на WordPress, щракнете Страници и трябва да видите списък с всички страници на вашия уебсайт, включително и тези, които са автоматично създадени с шаблона на Astra Site. Страниците, направени с конкретен конструктор на страници (например Elementor), ще бъдат етикетирани като такива:

страници

За да редактирате страница с нейния създател, задръжте курсора на мишката върху нея и щракнете Редактиране с (създател на страници). В моя случай ще бъде Редактиране с Elementor.

редактиране с елемент

След като щракнете върху това, ще бъдете вкаран в Elementor.

Друг начин е, ако сте в предната част на уебсайта си, отидете на страницата, която искате да редактирате, и кликнете върху Редактиране с елемент на черната лента в горната част:

редактиране с елемент

Всяко едно от тях ще ви вкара в Elementor. След като влезете в Elementor, ще можете да използвате различни изображения за заглавието си, да променяте текстове, да променяте икони и други. Можете да започнете с промяна на текстовете и изображението в заглавието, за да отговарят на вашия бизнес. Ето няколко неща, които можете да направите с текстове в Elementor:

редактиране на текстове в елемент

Както можете да видите, можете да промените текста право в областта за редактиране на съдържание, да промените размера, теглото, цвета и семейството на типографията. Можете също така да добавяте анимации като прости избледнявания, мащабиране и други. Има много неща, които можете да направите тук, за да добавите подправка към уебсайта си.

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

редактиране на изображения в елемент

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

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

Ако искате да закупите Elementor Pro и в същото време да получите безплатен достъп до курсовете ми Elementor Pro, щракнете върху тази връзка тук.

Стъпка 5. Настройте WooCommerce.

Сега е време да настроите WooCommerce, която е приставката за WordPress, която превръща всеки уебсайт в онлайн магазин. Тя ви позволява да добавяте продукти, да приемате онлайн плащания, да създавате купони, да задавате доставка и данъчно облагане и много други.

WooCommerce вече беше инсталиран за мен по темата на Custom Print Astra Site, така че сега трябва да вляза и да го настроя. Ако все още нямате инсталирана WooCommerce, просто отидете на Plugins > Добави нов и потърсете WooCommerce.

Първото нещо, което трябва да направим, е да отидем WooCommerce > Настройки. Ще видите 7 раздела: Общи, Продукти, Доставка, Плащания, Сметки и Поверителност, Имейли и Разширени.

Нека първо да разгледаме Общ раздел. В този раздел ще можете да зададете адреса на магазина си, в кои държави ще продавате и изпращате, и да активирате данъчни ставки.

общи настройки за woocommerce

Ако превъртите надолу, ще видите и опции за активиране на талони и персонализиране на това как се показват цените на вашия уебсайт, включително валутата, къде ще бъдат показани и т.н..

На следващо място е Продукти раздела, където можете да зададете опции, свързани с продукта. Можете да зададете коя страница ще бъде вашата страница в магазина, какво се случва, когато посетителите добавят продукт в количката, да зададете размери на продукта, да активирате и конфигурирате отзивите на клиентите и да активирате оценки със звезди.

настройки за продукт на woocommerce

В горната част на този раздел също имате опции за Складова наличност и Продукти за изтегляне. В секцията „Опис“, ако поставите отметка в квадратчето до Активиране на управлението на запасите, ще видите списък с опции, които ще ви помогнат да управлявате инвентара си. Например, можете да зададете ниския праг на запасите, така че когато запасите ви достигнат този номер, ще ви бъде изпратено известие. Можете също така да изберете да скриете артикули от вашия уебсайт.

настройки за инвентаризация woocommerce

Колкото до Продукти за изтегляне раздел, това е уместно само ако продавате съдържание за изтегляне на уебсайта си, така че ако продавате чисто физически продукти, можете да го пропуснете. Ще имате възможност да изискате от купувачите да влязат, преди да могат да изтеглят вашите продукти. Можете също така да дадете достъп до изтегляния след плащане.

опции за изтегляне на продукти

Следващият раздел е Доставка. Това е уместно само ако продавате физически продукти, които ще бъдат изпращани на купувачите. В този раздел има три подсекции: Зони за доставка, опции за доставка и класове за доставка.

В зоните за доставка ще трябва да добавите зони за доставка и да присвоите достъпни методи за доставка на тези зони. Това ще отнеме известно време, ако превозвате до няколко държави.

корабоплаване зони

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

На следващо място е Опции за доставка секция. В този раздел можете да контролирате как се показват тарифите за доставка на вашия уебсайт и да зададете по подразбиране или необходимата дестинация за доставка.

опции за доставка

Последният раздел в Доставка е Класове за доставка. С класовете за доставка можете да зададете различни тарифи за доставка на група продукти, например по-тежки продукти, които се нуждаят от повече пощенски разходи.

класове по корабоплаване

За да зададете тарифите си за доставка, отидете на Зони за доставка и да създадете или редактирате съществуващ метод за доставка, като например “Flat Rate”.

добавете разходи за доставка

След като щракнете редактиране, ще се появи изскачащ прозорец. Тук ще можете да добавите фиксираната тарифа за доставка и допълнителните разходи за току-що създадения клас за доставка.

разходи за доставка на клас за доставка

Ако имате нужда от повече помощ при конфигурирането на настройките за доставка, можете да проверите WooCommerce документация за доставка.

Сега да преминем към Плащания. В този раздел ще можете да активирате или деактивирате шлюзове за плащане като PayPal, директен банков превод, наложен платеж и други. След като активирате метод, щракнете Настройвам да свържете вашите акаунти и да започнете да приемате плащания.

начини за плащане

Ако искате да можете да приемате Stripe плащания, можете да инсталирате приставка наречена Шлюз за плащане на WooCommerce Stripe. Просто отидете на Plugins > Добави нов и потърсете приставката. Инсталирането и активирането на този плъгин ще даде възможност за плащане на Stripe в WooCommerce, но трябва да влезете в WooCommerce > Настройки > Плащания за да го настроите.

В Профили и поверителност ще можете да конфигурирате настройки, свързани със създаване на акаунт и поверителност на потребителите. Можете да изберете да разрешите на гостите да купуват без да създавате акаунт, да зададете своята страница за поверителност и страници с правила и да изберете колко дълго ще се запазват данните на потребителите.

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

На следващо място е имейли в който ще видите списък с имейли, които WooCommerce автоматично изпраща въз основа на определени условия. Например имейл може да бъде изпратен на имейл адрес по ваш избор, когато се направи нова поръчка. Можете също да видите имейли с актуализации за поръчки на клиенти, като възстановени или изпълнени поръчки.

известия по имейл

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

страница за настройка на уебсайтове

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

Стъпка 6. Добавете продукти.

След като приключите с основните настройки на WooCommerce, сега е време да добавите продукти. Темата на сайта Astra, която използвахме в този урок, вече идва с примерни продукти и по този начин изглежда страницата с продукти на фронта:

страница с продукти

Нека сега да разгледаме как можем да променим това и да добавим собствените си продукти в задния план.

За да добавите нов продукт или да редактирате съществуващ продукт, просто щракнете върху опцията на менюто Продукти от лявата странична лента в таблото за управление на WordPress. След това ще видите списък на всички продукти, които имате. Като алтернатива, ако сте на лицевата страна на продуктовата страница, можете да щракнете Редактиране на продукта на черната лента в горната част на страницата. Това ще ви отведе директно в редактора на продукта.

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

Тук можете да промените заглавието на продукта и описанието на продукта. Ако превъртите надолу, ще видите раздел, наречен Данни за продукта. Тук ще прекарате по-голямата част от времето си. Тук можете да изберете типа на продукта и от там можете да конфигурирате други настройки на продукта.

WooCommerce ви позволява да добавяте следните видове продукти:

  • Физически, изтегляем, виртуален. Не е задължително да се изтегля виртуален продукт. Пример е среща или среща на треньори.
  • Прост продукт. Това е продукт с един артикул.
  • Групиран продукт. Това е пакет от различни продукти.
  • Външен продукт. Продукти, които са закупени извън уебсайта ви като партньорска връзка.
  • Променлив продукт. Променливият продукт има вариации като цветове и размери.
видове продукти

Винаги, когато създавате нов продукт, първата стъпка е да изберете неговия тип. Всеки тип се предлага с различен набор от опции. Например продукт, който можете да изтегляте, ще има следните опции:

опции за изтегляне на продукти

От лявата страна на този раздел ще видите още опции за инвентар, доставка, свързани продукти и други.

в Складова наличност, ще можете да добавите SKU, да предоставите конкретен брой запаси за този конкретен продукт, да зададете състоянието на запасите и други.

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

доставка в данни за продукта

в Свързани продукти, можете да присвоите артикул за продажба и кръстосана продажба. Упселът е продукт, който препоръчвате вместо текущия продукт, тъй като има по-висока цена. Кръстосаните продажби са продукти, които ще препоръчате в количката въз основа на текущия продукт. Ако искате да добавите upsell или cross-sell, напишете името на продукта в съответните полета.

свързани продукти

Можете също да добавите атрибути към продуктите си в Атрибути секция. Той може да бъде размер, цвят, тегло и т.н. Освен това, ако създавате променлив продукт, първо трябва да добавите атрибут тук. Ако искате да научите повече за това как да създадете променлив продукт, разгледайте Ръководството за WooCommerce тук.

Ако превъртите надолу Данни за продукта ще видите област, в която можете да добавите кратко описание на продукта. Това описание ще се появи до вашия продукт и близо до цената. Дръжте го кратко и сладко. Можете да добавите изображение на продукта от дясната страна. Ако имате повече изображения на продукти, можете да добавите такива в Галерия с продукти раздел.

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

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

видимост на каталога

След като приключите с всичко тук, щракнете Актуализация за да запазите всичките си промени.

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

Стъпка 7. Персонализирайте касите си.

WooCommerce е чудесен плъгин, както сте виждали досега, но често срещано оплакване срещу него е липсата на опции за плащане. Няма да можете да промените как изглеждат страниците за каси и не можете да създадете фуния за продажби с нея. Фунията за продажби е чудесен начин да увеличите стойността на покупката на клиента, така че ако нямате такава на уебсайта си, наистина оставяте пари на масата.

Ако искате да създадете фуния за продажби за уебсайта си за електронна търговия, най-добрият плъгин, който може да помогне, е CartFlows. Това е WordPress плъгин за създаване на фуния, който ви позволява да създавате красиви и високоефективни фунии точно в WordPress.

cartflows

Ако искате да научите повече за това как да създадете фуния за продажби с CartFlow, можете да разгледате този урок, който направих.

Стъпка 8. Останете отгоре на изоставянето на количката.

Преди да приключа този урок, нека само да добавя още нещо за изоставянето на количката. Факт в електронната търговия е, че много клиенти ще изоставят количките си, без да завършат покупката.

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

За щастие, има приставка, наречена Възстановяване на изоставяне на количката на WooCommerce плъгин, който следи и автоматично изпраща последващи имейли до клиенти с изоставени колички – всичко БЕЗПЛАТНО!

Ако сте използвали темата на Astra Site, която използвах тук, този плъгин вече би бил инсталиран за вас. Но ако не, можете да го инсталирате, като отидете на Plugins > Добави нов и потърсете приставката.

Той ще създаде нова опция под WooCommerce, наречена Изоставяне на количката. Ако щракнете върху това, ще можете да видите общ преглед на колко изоставени колички, колко са възстановени и колко са загубени.

изоставяне на колички за поръчки

Ще можете също така да персонализирате последващите имейли, които WooCommerce изпраща чрез преминаване към Последващи имейли и задръжте курсора на мишката върху имейла, който искате да редактирате, и щракнете върху редактиране.

последващи имейли

След това ще бъдете отведени в редактора на имейли:

персонализиране на последващи имейли

Обобщавайки

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

SiteGround

SiteGround е силно препоръчан уеб хост онлайн, тъй като са се погрижили за потребителите на WordPress и все още имат достъпни цени. Най-известни са с бързото си представяне и еднакво бърза подкрепа.

Основни характеристики на SiteGround:

  • Безплатен SSL сертификат
  • БЪРЗА Поддръжка
  • WordPress Staging Enviroment
  • Безплатна миграция на уебсайтове
  • Ежедневно архивиране

SiteGround е солиден избор за вашите нужди от уеб хостинг. Те се погрижат за уебсайтовете на WordPress и предлагат по-малко ресурси от своите конкуренти, но по-висока надеждност.

Вижте SiteGround

Тема на Астра

Astra е безплатна тема на WordPress, която е фокусирана върху скоростта. По желание можете да закупите Pro версията за $ 59, която добавя някои допълнителни настройки и опции.

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

  • Не е темата за фастите, но това не е Slouch
  • Много безплатни демо сайтове
  • Функция за гъвкаво мега меню
  • Опции за персонализирани оформления
  • Поддръжка на WooCommerce
  • Поддръжка на LearnDash

Темата Astra е добър избор за всеки проект за уеб дизайн на WordPress. Предполагам, че най-големият въпрос е дали дори е необходимо да закупите тема в наши дни, тъй като създателите на страници правят всички същите неща, за които би трябвало да имате тема. Например, Elementor има безплатната тема Hello, която позволява на вашия създател на страница да върши цялата работа.

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

За мен обаче смятам, че темата Astra не е в крак с актуалните тенденции и вече не я препоръчвам.

Налични са много по-добри съвременни теми, които предлагат вградени конструктори на заглавия и долни колонтитули, като се ограничават до 3 оформления, плюс по-гъвкави оформления на страници и публикации.

Вижте темата Astra

Elementor

Elementor е създател на WordPress страници, който е взел WordPress уеб дизайн от буря. Той има най-дълбокия набор от функции, но въпреки това е много лесен за използване и овладяване. Elementor е най-пълнофункционалният създател на безплатни страници. Има и Pro добавка за добавяне на допълнителни функции за разработчици.

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

  • Жив редактор на предни страни
  • Функции за персонализиране на уебсайтове
  • Библиотека с шаблони и блокове
  • Обширни възможности за отзивчиви мобилни устройства
  • Най-мощният създател на изскачащи прозорци
  • PRO Създавайте персонализирани заглавки / долни колонтитули
  • PRO Създайте оформления на типа публикация

Elementor е най-силният създател на страници в момента. Те последователно пускат нови функции, които са в съответствие с актуалните тенденции в дизайна. Това означава, че ще можете да поддържате уебсайта си подходящ.

Elementor Pro е невероятна стойност, като се имат предвид всички допълнителни модули и характеристики на захранването, които включва.

Ако днес започвах нов проект за уебсайт, Elementor ще бъде създателят на страницата, който бих избрал. Считам, че трябва да има WordPress създател на страници, което е удоволствие да се използва.

Вижте Elementor

CartFlows

CartFlow е строител на фуния за продажби на WordPress. Тя ви позволява бързо и лесно да изграждате фунии за продажби, като използвате своя конструктор на страници по избор.

Основни функции на Cart Cartlow:

  • Професионално проектирани шаблони
  • 5 Местоположение Поръчки по поръчка
  • Upsells с едно кликване
  • Използвайте предпочитания си създател на страници
  • Разширяващ се за разлика от фуниите за щракване
  • Таймери за обратно отброяване и тестване на сплит

Ако искате изграждане на фуния за продажби за WordPress и сте добре с хостинг на себе си или използване на управляван хостинг на WordPress, тогава CartFlows, ако е чудесен вариант, защото е супер лесен за използване, но много мощен.

Вижте CartFlow

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map