Ako si vyrobiť internetový obchod s elektronickým obchodom pomocou WordPress

Elektronický obchod je veľmi horúci, pretože je neuveriteľne ľahké zarobiť 6 čísel mesačne bez toho, aby ste museli zdvíhať tehly a malty s príliš vysokými režijnými nákladmi..


Problém pre mnohých je však drahý mesačný poplatok pre väčšinu platforiem elektronického obchodu, ako je Shopify. Ak práve začínate, chcete cenovo dostupnejšie riešenie, aby ste mohli minúť viac za veci, ako je marketing a reklama.

Dobrou správou je, že nemusíte platiť vysoké mesačné poplatky so službou Shopify, aby ste mohli predávať produkty online. Ak hľadáte alternatívu Shopify alebo alternatívu eBay, tento tutoriál krok za krokom vám zanechá úžasný online obchod zadarmo..

Všetko, čo potrebujete, je účet webhostingu a trochu úsilia a budete si môcť vytvoriť webovú stránku elektronického obchodu v čo najkratšom čase..


Začnime!

Veci, ktoré potrebujete:

  • hosting. Odporúčam SiteGround.
  • doménové meno.
  • Téma WordPress. Pre tento tutoriál používame bezplatnú tému Astra.
  • Tvorca stránok WordPress. Na tento účel používame bezplatný nástroj na tvorbu stránok Elementor.
  • WooCommerce, najlepší doplnok elektronického obchodu WordPress.

Krok 1. Predám webhosting a doménové meno.

Ak ste pre túto celú firmu zameranú na budovanie webových stránok nováčikom, dovoľte mi najprv objasniť, čo je webový hosting a názov domény a prečo ich potrebujete..

Čo je to hosting a názov domény?

Webhosting je miesto na internete, kde bude vaša webová stránka žiť. Je to ako fyzický dom, kde nájdete svoje veci. Na druhej strane názov domény je adresa vášho webu. Je to ako vaša adresa, ktorú dáte ľuďom, aby vás mohli navštíviť doma. „Facebook.com“, „Google.com“ a „WordPress.com“ sú príklady doménových mien.

Názov domény si môžete kúpiť takmer na všetkých webových stránkach, ktoré predávajú názvy domén. Musíte len hľadať najlepšiu cenu. Ale pokiaľ ide o hosting webových stránok, je absolútne dôležité, aby ste dostali hosting iba od spoľahlivej spoločnosti. Pretože ak je váš hosting pomalý alebo nespoľahlivý, vaše webové stránky budú trpieť rýchlosťou a prevádzkou a nakoniec to poškodí vaše podnikanie v oblasti elektronického obchodu..

Siteground, Moja preferovaná webhostingová služba

Na vytvorenie webovej stránky elektronického obchodu môžete použiť akúkoľvek vysoko kvalitnú webhostingovú službu, ale v tomto tutoriále použijeme Siteground.

SiteGround je vysoko odporúčaný webhosting online, pretože sa starali o používateľov systému WordPress a napriek tomu majú stále dostupné ceny. Najznámejšie sú pre svoj rýchly výkon a rovnako rýchlu podporu.

Tu sú kľúčové funkcie SiteGround:

  • Certifikát SSL zadarmo
  • RÝCHLA Znalostná podpora
  • Pracovné prostredie WordPress
  • Bezplatná migrácia webových stránok
  • 30 dní zálohovania

SiteGround je solídnou voľbou pre vaše potreby webhostingu. Zabezpečujú webové stránky WordPress a ponúkajú menej zdrojov ako ich konkurenti, ale vyššiu spoľahlivosť.

Urobil som s nimi úžasnú dohodu, aby som dal každému, kto sa zaregistruje, 70% zľavu tento odkaz. Takže ak chcete šetriť peniaze na svojom hostingu, kliknite na tento odkaz a zakúpte si svoj hosting teraz.

Po vstupe na svoju domovskú stránku uvidíte štyri rôzne typy hostingu:

vyberte plán lokality

Vyberte hosťovanie WordPress a kliknite na Začať. Potom sa zobrazia tri cenové plány:

cenotvorba webového priestoru pre wordpress

Vyberte si podľa svojich potrieb a rozpočtu. Môžete sa tiež pozrieť na ich porovnanie každého plánu hostenia aby ste získali lepšiu predstavu o tom, ktorý plán najlepšie vyhovuje vašim potrebám.

Keď sa rozhodnete pre plán, kliknite na tlačidlo OK Získajte plán. Potom sa dostanete na stránku, kde si budete musieť zvoliť doménu. Ak ste si už kúpili názov domény, vyberte možnosť „Už mám doménu“. Ak ho však nemáte, vyberte možnosť „Registrovať novú doménu“, aby ste si doménu kúpili priamo v areáli Siteground.

vyberte doménu

Keď máte názov domény, ktorý sa vám páči a je k dispozícii, kliknite na tlačidlo pokračovať. Ďalším krokom je poskytnutie vašich osobných a fakturačných údajov na dokončenie nákupu. Poskytnite presné údaje a kliknite na tlačidlo Zaplatiť teraz. Teraz máte spoľahlivý webhosting a doménové meno.

Krok dva. Nainštalujte WordPress.

WordPress je bezplatný nástroj s otvoreným zdrojom, ktorý vám umožňuje vytvárať webové stránky, aj keď nemáte potuchy o kódovaní. Je to najjednoduchší a najvýkonnejší systém na správu obsahu webových stránok. Existuje veľa vecí, ktoré sa mi páčia o WordPress, a ak si prečítate viac z mojich návodov alebo si pozeráte moje videá, dozviete sa viac o tom, prečo si myslím, že WordPress je najlepším nástrojom na vytváranie webových stránok pre netechnológov..

Siteground v skutočnosti prichádza s inštaláciou WordPress jedným kliknutím, ktorá robí všetku ťažkú ​​prácu pri inštalácii a nastavení WordPress za vás.

Po dokončení nákupu hostingu sa zobrazí obrazovka s odkazom „Prejsť do zákazníckej oblasti“. Kliknite na to a dostanete sa na stránku, kde si môžete nastaviť nový hostingový účet. pod Nastavte si svoj web, vybrať Spustite nový web.

Zobrazí sa zoznam softvéru, ktorý môžete nainštalovať. vybrať WordPress.

nainštalovať wordpress

Potom budete musieť poskytnúť nové prihlasovacie údaje správcu pre svoju novú webovú stránku, ako je vaša e-mailová adresa, používateľské meno a heslo. Tieto podrobnosti nezabudnite zaistiť, pretože ich budete používať na prihlásenie na svoj web.

Po dokončení kliknite na tlačidlo OK potvrdiť > Kompletné nastavenie. A teraz máte živú webhostingovú stránku WordPress, ktorú hosťujete sami.

Ak chcete začať prispôsobovať svoj web, musíte sa prihlásiť do backendu WordPress. Ak to chcete urobiť, prejdite na informačný panel svojho servera a prepnite na Moje účty tab. Kliknite na ikonu inštalácia a tu sa zobrazí názov domény, ktorý ste zaregistrovali. Cez to je zelená Prejdite na správcovský portál Tlačidlo. Kliknutím na toto tlačidlo prejdete na svoju prihlasovaciu stránku WordPress.

prejsť na informačný panel správcu wordpress

Prihlasovacie stránky WordPress majú zvyčajne tieto formáty: yourdomain.com/wp-admin a yourdomain.com/wp-login. Zapamätajte si adresu URL svojej prihlasovacej stránky, aby ste ju nabudúce mohli získať priamym zadaním adresy URL do panela s adresou bez toho, aby ste sa už museli prihlasovať do Siteground.

Prihlasovacia stránka WordPress vyzerá takto:

prihlasovacia stránka wordpress

Zadajte svoje používateľské meno a heslo, aby ste sa prvýkrát prihlásili na svoj web.

Krok 3. Nainštalujte tému Astra a lokality Astra.

Téma Astra je téma, ktorú používame na to, aby náš web pre elektronický obchod vyzeral čo najrýchlejšie a profesionálne. Ak chcete, môžete použiť aj iné témy, ale pre tento tutoriál pôjdeme s motívom Astra.

Astra je bezplatná téma WordPress, ktorá má vynikajúcu rýchlosť a jednoduchosť. Spárujte ho so stránkami Astra (bezplatný doplnok) a ktokoľvek môže mať krásny web pomocou niekoľkých kliknutí myšou. K dispozícii je tiež verzia Pro, vďaka ktorej je Astra perfektnou témou.

Tu sú funkcie, ktoré sa mi na Astra najviac páčia:

  • Jedna z najrýchlejších dostupných tém
  • Viac ako 100 štartovacích stránok (väčšina je 100% zadarmo)
  • Flexibilná funkcia ponuky Mega
  • Výkonný doplnkový balík
  • Rozsiahla podpora WooCommerce

Téma Astra je vynikajúcou voľbou pre akýkoľvek projekt webového dizajnu WordPress. V skutočnosti to je téma, ktorú používam na tejto webovej stránke a vo všetkých svojich webových projektoch.

Plne dôverujem vývojárovi a veľmi som ohromený tým, ako dobre je téma kódovaná.

Ale viac ako to, téma je taká jednoduchá na použitie kvôli všetkej starostlivosti a myšlienke, ktorá sa do nej dostala. Vo väčšine situácií sa nakonfiguruje na základe nástrojov, ktoré používate.

Ak chcete nainštalovať Astra, prejdite na vzhľad > téma > Pridať nové. Vyhľadajte Astra, kliknite na tlačidlo OK Inštalácia, a Aktivovať.

inštalácia témy astra

Ďalšou vecou, ​​ktorú Astra milujem, je skutočnosť, že má doplnok Webové stránky Astra Starter s knižnicou vopred pripravených bezplatných a prémiových šablón. Tieto šablóny môžete použiť pre svoje vlastné webové stránky iba niekoľkými kliknutiami. Na skrátenie času vytvorenia nášho webu na polovicu použijeme šablónu Astra Site.

Po inštalácii Astra sa táto správa zobrazí na hlavnom paneli:

Stránky Astra začínajú

cvaknutie Začať. Týmto sa nainštalujú štartovacie stránky Astra.

Výber nástroja na tvorbu stránok

Potom sa zobrazí otázka, ktorý tvorca stránky uprednostňujete. V tomto tutoriále budem používať prvok Elementor. Elementor je tvorca stránok WordPress, ktorý búrkou prijal webový návrh WordPress. Mal najhlbšiu sadu funkcií, napriek tomu sa veľmi ľahko používa a ovláda. Elementor je najobľúbenejší bezplatný nástroj na tvorbu stránok. K dispozícii je tiež doplnok Pro na pridanie ďalších funkcií pre vývojárov.

Kľúčové vlastnosti elementu:

  • Live Front End Page Editor
  • Funkcie prispôsobenia webových stránok
  • Knižnica šablón a blokov
  • Rozsiahle možnosti reagujúce na mobil
  • Najvýkonnejší vyskakovací program
  • PRO: Vytvorte vlastné hlavičky / päty
  • PRO: Vytvorte rozloženie typu príspevku

Elementor je najsilnejší v súčasnosti dostupný tvorca stránok. Neustále vydávajú nové funkcie, ktoré sú v súlade so súčasnými trendmi v dizajne. To znamená, že budete môcť udržiavať svoju webovú stránku relevantnú. Ak budete chcieť získať prístup k pokročilým funkciám, môžete upgradovať na program Elementor Pro, čo je podľa môjho názoru neuveriteľná hodnota vzhľadom na všetky ďalšie moduly a výkonové funkcie, ktoré obsahuje..

Výber témy Astra Site

Po výbere nástroja na tvorbu stránok sa dostanete do knižnice šablón Astra Sites. Môžete použiť veľa krásnych šablón. Nájdite si čas na výber šablóny, ktorú chcete. Upozorňujeme, že tieto šablóny je možné úplne upravovať pomocou nástroja na tvorbu stránok, ktorý ste vybrali, čo znamená, že budete môcť prispôsobiť všetky časti a prvky webu, ako sú nadpis, obrázky, farby, logo atď..

Pre tento tutoriál použijem šablónu vlastnej tlače, pretože vyzerá úžasne a je veľmi zameraná na elektronický obchod.

Ak chcete nainštalovať tému, stačí na ňu kliknúť a presunúť sa do ukážky. Ak sa vám páči to, čo vidíte, kliknite na ikonu Importovať motív a uistite sa, že sú všetky políčka začiarknuté.

Ak si to všimnete, existuje pole s nápisom „Nainštalovať požadované doplnky“. Začiarknutím tohto políčka sa nainštalujú všetky požadované doplnky, aby téma vyzerala presne tak, ako je. Pre tému Prispôsobená tlač sa nainštaluje prvky Elementor, WooCommerce a WPForms. To mi ušetrí toľko času, pretože už nebudem musieť inštalovať tieto doplnky jeden po druhom. Všetko je pre mňa hotové.

import motívu lokality Astra

Import témy môže chvíľu trvať. Nezatvárajte prehliadač ani nezasahujte. Počkajte, a až bude hotová, uvidíte modrú farbu Zobraziť stránku Tlačidlo. Kliknutím na toto tlačidlo prejdete na svoj web, ktorý má teraz tému, ktorú ste práve naimportovali.

Krok 4. Prispôsobte si svoje webové stránky.

Vaše webové stránky teraz vyzerajú úžasne, ale budete si chcieť vytvoriť svoj vlastný. Prvá vec, ktorú chcete urobiť, je vybrať si farebnú paletu. Ak už máte farbu svojej značky, bude to jednoduchšie.

Výber farebnej palety

Webová stránka má zvyčajne 3 farby: základnú, prízvukovú a popovú. Primárna farba je dominantnou farbou vášho webu a s najväčšou pravdepodobnosťou farbou vašej značky. Akcentová farba sa zvyčajne používa na nadpisy alebo na titulky, ak chcete, aby vyzerali trochu inak a aby k nim pritiahli oči. Nakoniec by popová farba mala kontrastovať s ostatnými farbami, aby boli dôležité prvky webovej stránky vynikajúce, napríklad tlačidlá s výzvou na akciu..

Na výber farebnej palety webových stránok používam dva nástroje. Prvý z nich je Coolors.co kde môžete prehľadávať rôzne palety farieb a vybrať, čo chcete na svojich webových stránkach použiť.

domovská stránka coolors

Ak vidíte paletu, ktorá sa vám páči, umiestnite kurzor myši na ňu a kliknite vyhliadka, a dostanete sa do nového okna, kde uvidíte hexadecimálne kódy každej farby.

farebná paleta s hexadecimálnym kódom

Tieto kódy Hex sú to, čo potrebujete na použitie týchto farieb na svojich webových stránkach. Neskôr ti ukážem, ako používať tieto hexadecimálne kódy na backende WordPress.

Ďalším skvelým nástrojom je Colorzilla, rozšírenie Google Chrome, ktoré vám umožní získať hexadecimálny kód ľubovoľnej farby, ktorú vidíte na ľubovoľnom webe, aby ste ju mohli používať samostatne. Ak chcete získať rozšírenie Colorzilla, kliknite tu. Potom kliknite na tlačidlo OK Pridať do prehliadača Chrome.

ColorZilla

Môže to chvíľu trvať, ale po dokončení sa na paneli s nástrojmi zobrazí táto ikona:

ikona colorzilla

Takže ak teraz vidíte farbu na ľubovoľnej webovej stránke, ktorú chcete vyskúšať na svojej vlastnej webovej stránke, stačí kliknúť na túto ikonu a kliknúť na farbu, ktorú chcete skopírovať. Hexový kód sa potom automaticky skopíruje a môžete ho vložiť na zadnú stranu vášho webu. Je to také ľahké. Toto je užitočný nástroj, ktorý vám umožní používať skvelé farby na jedno kliknutie.

Prispôsobenie typografie

Tiež by ste chceli použiť svoju vlastnú typografiu, aby váš web vynikol. Webové stránky majú zvyčajne 2 až 3 písma. Budete mať písmo pre titulky alebo menu, písmo pre telo a ďalšie „popové písmo“. Rovnako ako farby nemôžete použiť iba žiadne písmo. Musíte sa uistiť, že spolu dobre vyzerajú a vysielať správnu správu o vašej značke.

Rád používam Fontpair.co čo je webová stránka, ktorá vám ukáže, ako spolu vyzerajú dve rôzne písma.

pomocou fontpairs.co

Ak vidíte niečo, čo sa vám páči, stačí si všimnúť, čo sa volá, takže môžete ísť na WordPress a pridať ho tam priamo.

Tiež sa mi páči používať WhatFont, rozšírenie Google Chrome, ktoré vám povie, aké písmo sa používa na ľubovoľnej webovej stránke. Inštalácia programu WhatFont, kliknite tu potom kliknite na Pridať do prehliadača Chrome. Potom sa na paneli s nástrojmi zobrazí táto ikona:

ikona

Ak chcete poznať názov písma, stačí kliknúť na túto ikonu a umiestniť kurzor myši na text. WhatFont vám povie názov tohto písma a ak naň kliknete, zobrazí sa vám aj jeho veľkosť, farba, rodina, štýl, hmotnosť a ďalšie.

pomocou Whatfont

Získanie loga

Tiež by ste potrebovali logo značky, aby ste svoje webové stránky oddelili a zistili svoju identitu značky. Existuje niekoľko spôsobov, ako získať logo. Môžete to skúsiť sami pomocou úžasného nástroja na navrhovanie s názvom Canva. Je to celkom populárne, pretože robí návrhovanie skutočne ľahkým aj pre začiatočníkov.

Canva prichádza s množstvom šablón loga, ktoré môžete upraviť tak, aby ste si vytvorili svoj vlastný. Nezabúdajte však, že ak chcete exportovať logo s priehľadným pozadím, musíte prejsť na verziu Pro (ktorá má mesačnú bezplatnú skúšobnú verziu). Vždy môžete ísť do Photoshopu alebo Photopea odstrániť pozadie, ale to len pridá ďalší krok do procesu.

logá Canva

Ak chcete ušetriť čas, môžete si najať nezávislého dizajnéra loga, ktorý to urobí za vás. Môžete vyskúšať webové stránky ako Fiverr.com alebo 99design, ale pri výbere interpreta musíte vychádzať z jeho štýlu, záznamu, recenzií, hodnotení a ďalších..

Prispôsobenie vášho webu

Teraz je čas použiť tieto farby, písma a logá na vašom webe. Ak ste v backendovom paneli WordPress, prejdite na stránku vzhľad > upraviť otvorte nástroj na prispôsobenie tém.

prispôsobiť tému

Ak ste na rozhraní svojho webu a v hornej časti je čierny pruh, môžete kliknúť upraviť otvorte prispôsobiteľný prvok.

prispôsobiť tému

Takto vyzerá prispôsobiteľ témy:

Prispôsobovač tém

Tu môžete nahrať svoje logo, zmeniť farby a typografiu stránok, prispôsobiť tlačidlá a mnoho ďalších. Zmeny, ktoré tu vykonáte, sa na vašom webe zobrazujú v reálnom čase, takže môžete okamžite zistiť, ako to vyzerá. Každá téma má tiež rôzne možnosti prispôsobenia, takže ak používate inú tému ako Astra, môžu sa tu zobraziť rôzne možnosti.

Ak chcete zmeniť farby svojich stránok, prejdite na stránku Astra Farby a pozadie. Budete mať možnosť zmeniť základné farby, strúhanku, farbu záhlavia a päty.

farba pozadia editor

Základné farby sú farba vzhľadu témy, odkazu, textu a odkazu na vašom webe. Ak chcete zmeniť napríklad farbu témy, kliknite na Vyberte možnosť Farba. Uvidíte dva spôsoby výberu farby. Najskôr môžete do poľa vložiť hexadecimálny kód. Takže ak ste našli farbu v Coolors.co alebo na iných miestach, môžete sem vložiť hexadecimálny kód. Farbu môžete vybrať aj v zabudovanom nástroji na výber.

editor základných farieb

Ak chcete zmeniť typografiu svojich stránok, vráťte sa späť do hlavnej ponuky nástroja na prispôsobenie a kliknite na typografie. Budete môcť zmeniť typografiu základne, strúhanku, obsah a blog.

prispôsobovač typografie

Ďalej pridáva vaše logo. Ak chcete nahrať svoje logo, prejdite na dispozície > hlavička > Identita stránok. V časti Logo kliknite na ikonu Zmeniť logo a nahrajte svoje logo.

nahrať logo

Astra vám tiež umožňuje upraviť šírku loga, aby ste mohli zmeniť, ako veľký alebo malý má byť. Ak posuniete zobrazenie nadol, budete môcť zmeniť aj názov svojej stránky, pridať nadpis stránky a ikonu stránky alebo ikonu favicon.

V oblasti prispôsobenia Astra môžete urobiť omnoho viac, ako je zmena šírky obsahu stránok, zmena štruktúry príspevkov blogu, prispôsobenie päty a hlavičky a ďalšie. Preskúmajte svoje možnosti a zistite, čo sa vám na vašom webe najviac páči.

Po dokončení prispôsobovania nezabudnite kliknúť publikovať aby vaše zmeny boli zverejnené na vašom webe.

Krok 5. Prispôsobenie vašich webových stránok pomocou Elementor.

V tomto okamihu máte základné základy prispôsobenia, ako je zmena farby stránok, typografia, pridanie loga a všetko ďalšie. Teraz je čas prejsť k podrobnostiam o drsnom stave a začať používať Elementor (alebo ľubovoľného tvorcu stránky, ktorý uprednostňujete), aby úplne zmenil vzhľad stránok..

Ako som už spomenul, v tomto tutoriále budem používať Elementor, pretože si myslím, že je to najlepšie, ale môžete použiť ľubovoľný nástroj na tvorbu stránok, s ktorým ste spokojní.

Vo vnútri Elementoru môžete so svojím webom robiť takmer čokoľvek bez toho, aby ste kódovali alebo najímali webového vývojára. Pridávanie prvkov je jednoduchý proces drag and drop.

Existujú dva spôsoby úpravy stránky pomocou prvku Elementor. Najprv, ak ste v backende WordPress, kliknite na tlačidlo stránky a mali by ste vidieť zoznam všetkých stránok vášho webu vrátane tých, ktoré boli automaticky vytvorené pomocou šablóny Astra Site. Stránky, ktoré boli vytvorené pomocou špecifického nástroja na tvorbu stránok (napr. Elementor), budú takto označené:

stránky

Ak chcete upraviť stránku pomocou nástroja na tvorbu stránok, umiestnite kurzor myši na ňu a kliknite na ňu Upraviť pomocou (nástroj na tvorbu stránok). V mojom prípade to tak bude Upraviť pomocou Elementoru.

editovať s elementom

Akonáhle na to kliknete, dostanete sa do Elementoru.

Iným spôsobom je, ak ste na rozhraní svojho webu, prejdite na stránku, ktorú chcete upraviť, a kliknite na ňu Upraviť pomocou elementora na čiernej lište hore:

editovať s elementom

Jeden z nich vás dostane do elementu. Akonáhle ste v rámci Elementoru, budete môcť používať rôzne obrázky pre svoju hlavičku, meniť texty, meniť ikony a ďalšie. Môžete začať zmenou textov a obrázkov v nadpise tak, aby vyhovovali vášmu podnikaniu. Tu je niekoľko vecí, ktoré môžete robiť s textmi vo vnútri Elementoru:

editácia textov v elementore

Ako vidíte, môžete zmeniť text priamo v oblasti úpravy obsahu, zmeniť veľkosť, hmotnosť, farbu a typografickú rodinu. Môžete tiež pridať animácie, ako sú jednoduché blednutie, zväčšenie a ďalšie. Tu môžete urobiť veľa vecí, aby ste na svoj web pridali korenie.

Mali by ste tiež zmeniť obrázky svojich webových stránok tak, aby zodpovedali charakteru vašej firmy. Zmena obrázkov na prvku Elementor je veľmi jednoduchá. Stačí kliknúť na obrázok a možnosti sa zobrazia na ľavom bočnom paneli. Môžete nahrať nový obrázok, zmeniť jeho veľkosť, pridať orámovanie alebo tieň, pridať animáciu a ďalšie.

úprava obrázkov v elementore

Vo vnútri elementu môžete tiež meniť texty tlačidiel, prispôsobovať oblasť ohlasov, pridávať ďalšie prvky / bloky, ako sú texty, obrázky, tlačidlá, videá a ďalšie.

Elementor Pro prichádza s omnoho viac funkciami, ako je možnosť pridávania formulárov (ktoré zvyčajne vyžaduje doplnok tretích strán), schopnosť vkladať vlastné písma, pridávať jazdce, pridávať cenové tabuľky a cenníky, prispôsobovať hlavičky a päty ( čo je pre väčšinu tvorcov stránok zakázané) a ešte oveľa viac.

Ak si chcete kúpiť Elementor Pro a zároveň získať bezplatný prístup k mojim kurzom Elementor Pro, kliknite sem tento odkaz.

Krok 5. Nastavte WooCommerce.

Teraz je čas nastaviť WooCommerce, čo je doplnok WordPress, ktorý premení ľubovoľnú webovú stránku na internetový obchod. Umožňuje vám pridávať produkty, prijímať online platby, vytvárať kupóny, nastavovať poštovné a dane a oveľa viac.

WooCommerce bol už pre mňa nainštalovaný podľa témy Custom Print Astra Site, takže teraz musím ísť a nastaviť ho. Ak ešte nemáte nainštalovaný WooCommerce, jednoducho choďte na plugins > Pridať nové a vyhľadajte WooCommerce.

Prvá vec, ktorú musíme urobiť, je ísť WooCommerce > nastavenie. Uvidíte 7 kariet: Všeobecné, Produkty, Doprava, Platby, Účty a ochrana osobných údajov, E-maily a Rozšírené.

Pozrime sa najprv na všeobecný tab. Na tejto karte budete môcť nastaviť adresu svojho obchodu, v ktorých krajinách budete predávať a odosielať, a povoliť daňové sadzby.

všeobecné nastavenia woocommerce

Ak posuniete zobrazenie nadol, zobrazia sa tiež možnosti, ako povoliť kupóny a prispôsobiť spôsob zobrazovania cien na vašom webe vrátane meny, kde sa bude zobrazovať atď..

Ďalej je Produkty kartu, kde môžete nastaviť možnosti súvisiace s produktom. Môžete nastaviť, ktorá stránka bude vaša stránka v obchode, čo sa stane, keď návštevníci pridajú produkt do košíka, nastaviť rozmery produktu, povoliť a nakonfigurovať recenzie zákazníkov a povoliť hodnotenie hviezdičkami.

nastavenia produktu woocommerce

V hornej časti tejto časti máte tiež možnosti pre inventár a Produkty na stiahnutie. Ak v sekcii Inventár začiarknete políčko vedľa Povoliť správu zásob, zobrazí sa vám zoznam možností, ktoré vám pomôžu spravovať inventár. Môžete napríklad nastaviť nízku prahovú hodnotu inventára tak, že keď vaše zásoby dosiahnu toto číslo, dostanete upozornenie. Môžete sa tiež rozhodnúť skryť skladové položky zo svojho webu.

woocommerce nastavenia inventára

Pokiaľ ide o Produkty na stiahnutie sekcia, ktorá je relevantná iba v prípade, že na svojom webe predávate obsah, ktorý je možné stiahnuť, takže ak predávate čisto fyzické produkty, môžete tento preskočiť. Predtým, ako si budete môcť stiahnuť svoje produkty, budete mať možnosť požadovať, aby sa kupujúci prihlásili. Prístup k stiahnutiu môžete tiež povoliť po zaplatení.

možnosti produktu na stiahnutie

Ďalšia karta je Doprava. Toto je relevantné iba v prípade, že predávate fyzické produkty, ktoré sa dodávajú kupujúcim. Na tejto karte sú tri podsekcie: Prepravné zóny, možnosti prepravy a triedy prepravy.

V prepravných zónach budete musieť pridať prepravné zóny a priradiť k nim dostupné spôsoby doručenia. Ak prepravujete do niekoľkých krajín, bude to chvíľu trvať.

lodné zóny

Ak potrebujete ďalšiu pomoc s prepravnými zónami, môžete sa pozrieť na prepravnú zónu WooCommerce dokumentácia.

Ďalej je Možnosti dopravy oddiel. V tejto časti môžete určiť, ako sa budú zobrazovať prepravné sadzby na vašom webe, a nastaviť predvolené alebo požadované miesto dodania.

možnosti dopravy

Posledná sekcia v časti Preprava je Prepravné triedy. S triedami prepravy môžete priradiť rôzne sadzby za dopravu skupine produktov, napríklad ťažším produktom, ktoré si vyžadujú viac poštovného.

prepravné triedy

Ak chcete nastaviť prepravné sadzby, prejdite na Prepravné zóny a vytvorte alebo upravte existujúci spôsob dopravy, napríklad „paušálna sadzba“.

pridať prepravné náklady

Akonáhle kliknete editovať, zobrazí sa vyskakovacie okno. Tu budete môcť pridať paušálnu sadzbu za dopravu a dodatočné náklady pre triedu prepravy, ktorú ste práve vytvorili.

náklady na prepravu triedy prepravy

Ak potrebujete ďalšiu pomoc s konfiguráciou nastavení prepravy, môžete sa pozrieť na stránky spoločnosti WooCommerce dokumentácia pre prepravu.

Teraz prejdeme na platby. Na tejto karte budete môcť povoliť alebo zakázať platobné brány, ako sú PayPal, priamy bankový prevod, dobierka a ďalšie. Po povolení metódy kliknite na ikonu Nastaviť prepojiť svoje účty a začať prijímať platby.

spôsob platby

Ak chcete mať možnosť prijímať platby Stripe, môžete nainštalovať doplnok s názvom WooCommerce Stripe platobná brána. Stačí ísť na plugins > Pridať nové a vyhľadajte doplnok. Inštalácia a aktivácia tohto doplnku povolí spôsob platby Stripe vo WooCommerce, musíte sa však prihlásiť WooCommerce > nastavenie > platby nastaviť.

V Účty a ochrana osobných údajov na karte, budete môcť konfigurovať nastavenia týkajúce sa vytvorenia účtu a ochrany osobných údajov používateľa. Môžete si vybrať, či povolíte hosťom nakupovať bez vytvorenia účtu, nastaviť stránku ochrany osobných údajov a stránky pravidiel a zvoliť, ako dlho sa budú uchovávať údaje o používateľoch.

účty a súkromie

Ďalej je e-maily kde uvidíte zoznam e-mailov, ktoré spoločnosť WooCommerce automaticky odosiela na základe určitých podmienok. Napríklad e-mail je možné odoslať na e-mailovú adresu podľa vášho výberu pri každej novej objednávke. Môžete si tiež zobraziť e-maily s aktualizáciami o zákazníckych objednávkach, ako sú vrátené alebo dokončené objednávky.

e-mailové upozornenia

Nakoniec, Pokročilé karta, ktorá nahradila kartu API, umožňuje konfigurovať ďalšie technické podrobnosti, ako je napríklad nastavenie stránky, kde môžete spoločnosti WooCommerce povedať, ktorá stránka sa bude správať ako stránka košíka alebo stránka pokladnice..

woocommerce nastavenia stránky

Ak posuniete nadol, budete môcť upraviť to, čo spoločnosť WooCommerce nazýva koncové body, ktoré sú prílohami adresy URL a ktoré im umožňujú zobraziť iný obsah bez potreby novej stránky..

Krok 6. Pridajte produkty.

Po dokončení základných nastavení WooCommerce je teraz čas pridať produkty. Téma Astra Site, ktorú sme použili v tomto tutoriále, už prichádza so vzorkami produktov. Takto vyzerá stránka produktu na rozhraní frontend:

stránka produktu

Pozrime sa teraz na to, ako to môžeme zmeniť a pridajte vlastné produkty na pozadí.

Ak chcete pridať nový produkt alebo upraviť existujúci produkt, stačí kliknúť na možnosť ponuky Produkty na ľavom bočnom paneli na paneli WordPress. Zobrazí sa zoznam všetkých produktov, ktoré máte. Prípadne, ak ste na rozhraní produktovej stránky, môžete kliknúť Upraviť produkt na čiernom paneli v hornej časti stránky. Tým sa dostanete priamo do editora produktu.

produktový editor

Tu môžete zmeniť názov produktu a popis produktu. Ak prejdete nadol, zobrazí sa sekcia s názvom Údaje o produkte. Tu trávite väčšinu času. Tu môžete vybrať typ produktu a odtiaľ môžete nakonfigurovať ďalšie nastavenia produktu.

WooCommerce vám umožňuje pridať tieto typy produktov:

  • Fyzické, stiahnuteľné, virtuálne. Virtuálny produkt sa nemusí nevyhnutne sťahovať. Príkladom je menovanie alebo koučingové stretnutie.
  • Jednoduchý produkt. Toto je produkt s jednou položkou.
  • Zoskupený produkt. Toto je zväzok rôznych produktov.
  • Externý produkt. Produkty, ktoré sa kupujú mimo vašich webových stránok ako pridružený odkaz.
  • Variabilný produkt. Variabilný produkt má variácie ako farby a veľkosti.
typy výrobkov

Vždy, keď vytvoríte nový produkt, prvým krokom je výber jeho typu. Každý typ je dodávaný s inou sadou možností. Napríklad produkt na stiahnutie bude mať tieto možnosti:

možnosti produktu na stiahnutie

Na ľavej strane tejto sekcie sa zobrazia ďalšie možnosti týkajúce sa inventára, dopravy, prepojených produktov a ďalších možností.

v inventár, budete môcť pridať kód SKU, poskytnúť konkrétny počet zásob pre tento konkrétny produkt, nastaviť stav zásob a ďalšie.

v Doprava, môžete zadať hmotnosť a rozmery produktu, ako aj priradiť triedu prepravy, ktorú sme vytvorili v predchádzajúcom kroku.

dodanie v údajoch o produkte

v Prepojené produkty, môžete k produktu priradiť položku na zvýšenie predaja a krížový predaj. Rozšírenie je produkt, ktorý odporúčate namiesto aktuálneho produktu, pretože má vyššiu cenu. Krížové výpredaje sú produkty, ktoré odporučíte do košíka na základe aktuálneho produktu. Ak chcete pridať predpredaj alebo krížový predaj, do príslušných políčok napíšte názov produktu.

prepojené produkty

Môžete tiež pridať atribúty k svojim produktom v systéme Windows atribúty oddiel. Môže to byť veľkosť, farba, hmotnosť atď. Ak vytvárate variabilný produkt, musíte sem najprv pridať atribút. Ak sa chcete dozvedieť viac o tom, ako vytvoriť variabilný produkt, pozrite sa na Príručka spoločnosti WooCommerce tu.

Ak posuniete nadol Údaje o produkte sa zobrazí oblasť, do ktorej môžete pridať krátky popis produktu. Tento popis sa objaví vedľa vášho produktu a bude blízko ceny. Udržujte to krátke a sladké. Obrázok produktu môžete pridať na pravú stranu. Ak máte viac obrázkov produktov, môžete ich pridať do Galéria produktov časť.

krátky popis a imidž produktu

Je tiež dôležité nastaviť viditeľnosť katalógu, ktorá sa nachádza v hornej časti stránky pod publikovať. V niektorých prípadoch možno budete chcieť niektoré produkty skryť, pretože ich možno ponúkate ako krížový predaj s exkluzívnou zľavou. To je miesto, kde môžete urobiť.

viditeľnosť katalógu

Keď skončíte so všetkým, kliknite tu aktualizovať uložte všetky svoje zmeny.

Ak sa chcete dozvedieť viac o rôznych druhoch produktov a o tom, ako ich môžete správne vytvoriť, toto Sprievodca WooCommerce je skvelé miesto, kde začať. Na svoje webové stránky pridávajte ďalšie produkty presne podľa rovnakých krokov, aké som vám tu ukázal, až kým si nevytvoríte zoznamy svojich produktov.

Krok 7. Prispôsobte si pokladne.

WooCommerce je skvelý doplnok, ako ste doteraz videli, ale spoločnou sťažnosťou proti nemu je nedostatok možností platby. Nebudete môcť zmeniť vzhľad stránok pokladnice a pomocou nej nemôžete vytvoriť predajnú cestu. Predajná cesta je vynikajúci spôsob, ako zvýšiť kúpnu hodnotu zákazníka, takže ak ju na svojich webových stránkach nemáte, naozaj nechávate peniaze na stole.

Ak chcete pre svoje webové stránky elektronického obchodu vytvoriť zúženie predaja, najlepším doplnkom, ktorý vám môže pomôcť, je CartFlows. Ide o doplnok WordPress pre vývojárov zúžení, ktorý vám umožní vytvárať krásne a vysoko efektívne zúženia priamo vo WordPress.

cartflows

Ak sa chcete dozvedieť viac o tom, ako vytvoriť predajné zúženie pomocou CartFlows, môžete sa pozrieť na tento návod, ktorý som vytvoril.

Krok 8. Zostaňte na vrchole opustenia košíka.

Predtým, ako ukončím tento tutoriál, dovoľte mi ešte jednu vec týkajúcu sa opustenia košíka. V elektronickom obchode je skutočnosťou, že veľa zákazníkov opustí svoje vozíky bez toho, aby dokončili nákup.

Dôvodom môže byť veľa dôvodov. Možno ich rozptýlili, moc alebo spojenie zmizli, objavilo sa niečo naliehavé. Nech už je to čokoľvek, veľa z týchto opustených vozíkov sa stratí, ak s tým neurobíte nič.

Našťastie sa volá doplnok Zotavenie opustenia nákupného košíka WooCommerce plugin, ktorý sleduje a automaticky odosiela následné e-maily zákazníkom s opustenými vozíkmi – všetko ZADARMO!

Ak ste použili tému Astra Site, ktorú som tu použil, tento doplnok by už bol pre vás nainštalovaný. Ale ak nie, môžete si ho nainštalovať tak, že prejdete na plugins > Pridať nové a vyhľadajte doplnok.

Vytvorí novú možnosť pod názvom WooCommerce Opustenie košíka. Ak na toto kliknete, zobrazí sa vám prehľad o tom, koľko opustených vozíkov máte, koľko už bolo získaných a koľko stratených.

vrátenie objednávok za vrátenie objednávok

Prepnutím na e-mailové adresy, ktoré odosiela spoločnosť WooCommerce, si budete môcť tiež prispôsobiť Následné e-maily kliknite myšou na e-mail, ktorý chcete upraviť, a kliknite na editovať.

následné e-maily

Potom budete presmerovaní na editor e-mailov:

prispôsobenie sledovacích e-mailov

Zabalenie

Vytvorenie e-commerce webovej stránky WordPress sa môže zdať komplikované a ohromujúce, ale dúfam, že som na ňu vrhol svetlo a pomocou malej pomoci som ukázal, ako to všetko môžete urobiť sami. Som rád, že sa dozvedám o vašich úspechoch a ak potrebujete pomoc, môžete sa na mňa obrátiť v časti s komentármi..

SiteGround

SiteGround je vysoko odporúčaný webhosting online, pretože sa starali o používateľov systému WordPress a napriek tomu majú stále dostupné ceny. Najznámejšie sú pre svoj rýchly výkon a rovnako rýchlu podporu.

Kľúčové vlastnosti funkcie SiteGround:

  • Certifikát SSL zadarmo
  • RÝCHLA Znalostná podpora
  • Pracovné prostredie WordPress
  • Bezplatná migrácia webových stránok
  • Denné zálohy

SiteGround je solídnou voľbou pre vaše potreby webhostingu. Zabezpečujú webové stránky WordPress a ponúkajú menej zdrojov ako ich konkurenti, ale vyššiu spoľahlivosť.

Vyskúšajte SiteGround

Téma Astra

Astra je bezplatná téma WordPress, ktorá je zameraná na rýchlosť. Voliteľne si môžete kúpiť verziu Pro za 59 dolárov, ktorá pridáva niektoré ďalšie nastavenia a možnosti.

Kľúčové vlastnosti témy Astra:

  • Nie téma pôstu, ale nie je to Slouch
  • Veľa voľných demo stránok
  • Flexibilná funkcia Mega Menu
  • Možnosti vlastných rozvrhnutí
  • Podpora spoločnosti WooCommerce
  • Podpora LearnDash

Téma Astra je spravodlivou voľbou pre akýkoľvek projekt webového dizajnu WordPress. Domnievam sa, že najväčšou otázkou je, či v súčasnosti potrebujete kúpiť tému, pretože tvorcovia stránok robia všetky rovnaké veci, pre aké by ste chceli tému. Napríklad, Elementor má bezplatnú tému Hello, ktorá umožňuje tvorcovi stránok robiť všetku prácu.

Stále existuje niekoľko dobrých dôvodov na kúpu pro motívy, ale pre väčšinu ľudí bude pravdepodobne s bezplatnou témou v poriadku.

Pre mňa si však myslím, že téma Astra nevyhovuje súčasným trendom a už ju neodporúčam.

K dispozícii sú omnoho lepšie moderné témy, ktoré ponúkajú zabudované nástroje na tvorbu záhlavia a päty, pričom sú obmedzené na 3 rozloženia a flexibilnejšie rozloženie stránok a príspevkov..

Pozrite sa na tému Astra

Elementor

Elementor je tvorca stránok WordPress, ktorý búrkou prijal webový návrh WordPress. Má najhlbšiu sadu funkcií, napriek tomu sa veľmi ľahko používa a ovláda. Elementor je najobľúbenejší bezplatný nástroj na tvorbu stránok. K dispozícii je tiež doplnok Pro na pridanie ďalších funkcií pre vývojárov.

Kľúčové vlastnosti elementu:

  • Live Front End Page Editor
  • Funkcie personifikácie webových stránok
  • Knižnica šablón a blokov
  • Rozsiahle možnosti reagujúce na mobil
  • Najvýkonnejší vyskakovací program
  • PRO Vytvorte vlastné hlavičky / päty
  • PRO Vytvoriť rozloženie typu príspevku

Elementor je najsilnejší v súčasnosti dostupný tvorca stránok. Neustále vydávajú nové funkcie, ktoré sú v súlade so súčasnými trendmi v dizajne. To znamená, že budete môcť udržiavať svoju webovú stránku relevantnú.

Elementor Pro je neuveriteľná hodnota, berúc do úvahy všetky ďalšie moduly a výkonové funkcie, ktoré obsahuje.

Keby som dnes začínal nový webový projekt, Elementor by bol tvorcom stránok, ktorý by som si vybral. Domnievam sa, že je potrebné mať program na tvorbu stránok WordPress, ktorý je radosť používať.

Pozrite sa na prvok

CartFlows

CartFlows je nástroj na vytváranie predajných zúžení pre WordPress. Umožní vám rýchlo a ľahko zostaviť predajné cesty pomocou zvoleného nástroja na tvorbu stránok.

Kľúčové vlastnosti CartFlows:

  • Profesionálne navrhnuté šablóny
  • 5 Lokalizačné hrbole
  • Jedno kliknutie Upsells
  • Použite svoj preferovaný nástroj na tvorbu stránok
  • Rozšíriteľné na rozdiel od zúžení po kliknutí
  • Časovače odpočítavania a testovania rozdelenia

Ak chcete vytvoriť zúženie predajnej cesty pre WordPress a dobre sa hostíte sami alebo využívate spravovaný hosting WordPress, potom CartFlows je vynikajúcou možnosťou, pretože je veľmi jednoduché použitie a zároveň veľmi výkonné.

Vyskúšajte 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