Hogyan építs webshopot WordPress + Woocommerce rendszerekkel?

Ha megbízható, letisztult, minden igényt kielégítő webáruházat szeretnél, ez a cikk lehet, hogy hasznos lesz számodra

A WooCommerce egy felhasználóbarát és könnyen kezelhető ingyenes  bővítmény, amely egy rendszeren belüli rendszert is jelent egyben. A WordPress keretrendszerbe épül be és egy komoly tudású e-kereskedelmi áruházzá alakítja át.

A fentieket még lehetne folytatni, de nyíltan kijelenthetjük, hogy a WooCommerce mindenre alkalmas, amire szükségünk lehet egy jó minőségű WordPress alapú e-kereskedelmi áruház létrehozásához.

TÖLSD LE A BEAUTY LAND ESETTANULMÁNYT

Mit árulhatsz WordPress + WooCommerce áruházban?

A WooCommerce-ben tehát bármilyen terméket eladhatsz, árulhatsz. Ráadásul bárki könnyedén megtanulhatja a használatát (ha már sikerült elsajátítani a WordPress-alapokat, akkor a WooCommerce sem olyan nehéz, mint elsőre gondolnánk.).

Online áruház építése WordPress és a WooCommerce szoftverekkel

Megjegyzés: Az alábbi rövid útmutató célja, hogy bemutassa a Woocommerce webáruház legalapvetőbb funkcióit egy alapműködés eléréséhez.

Ezért csak a legfontosabb összetevőkre összpontosítok, az összetetteb dolgokat, fejlettebb dizájn vagy  bonyolultabb funkciókat a terjedelem és a könnyen emészthetőség miatt most szándékosan kihagytam.

1. LÉPÉS: Vásárolj egy tárhelyet és foglald le a domain neved

Ahhoz hogy létrehozz egy online árházat, vagy bármilyen weboldalt, két dolog szükséges:

Több száz különböző tárhely / domain szolgáltató létezik már idehaza.

A Sybell.hu például megfizethető web hosting szolgáltatást kínál (beleértve egy ingyenes domain nevet egy évre) és mindenek felett megbízható is.

Ők egyike az ajánlott (hivatalos) tárhely-szolgáltatónak, amelyek ügyfélszolgálata gyors és kitűnően támogatják a WordPress honlapokat vagy webáruházakat.

Az oldalukra navigálva válaszd a “tárhely” menüpontot, ahol már találkozol is a tárhely csomagokkal:

Érdemes a 17.000 MB-os tárhelycsomagot választani, hiszen ehhez ajándékba adnak egy domain nevet is.

Amennyiben kiválasztottad a kívánt tárhelyet, a “Megrendelem” gomb után már le is tudod foglalni a saját weboldal vagy webáruház neved.

A Domain név aktiválása néhány órát igénybe vehet, de ha ez megvan, mindenképp kapni fogsz róla egy értesítést, ami azt jelenti, hogy jöhet is a 2. lépés.

2. LÉPÉS: A WordPress telepítése

A következő lépésben telepíteni fogjuk a WordPress rendszert a tárhelyünkre.

Talán elsőre nehéznek tűnhet, de nincs más dolgunk, mint megnyitni a tárhelyünk c-paneljét és rákattintani a “Softaculous Apps Installer” alatt található WordPress ikonra, majd követni a telepítő varázslót.

A telepítő indulása előtt válaszd ki a domain neved, hogy hova települjön a WordPress rendszer. Majd meg kell adni egy felhasználónevet és egy erős jelszót, amivel be tudsz majd lépni telepítés után weboldalad admin felületére:

Ezek után itt az ideje, hogy a WordPress weboldalunkat működőképes e-kereskedelmi áruházzá alakítsuk a hozzá kiválóan alkalmas WooCommerce plugin segítségével.

3. LÉPÉS: A WooCommerce bővítmény telepítése

Csak kattints a „Telepítés most” gombra. Néhány másodperc múlva a gomb szövege “Bekapcsolás” -ra változik. Menj tovább, kattints rá.
Rögtön találkozni is fogunk a Woocommerce telepítési varázslójával.

Mivel a jelenlegi verzióban még nem elérhető a magyar fordítás (és így részben talán összezavaró is lehet), kattintsunk a “Most nem” opcióra.

Ha ezt megtettük, folytassuk a bellítást a baloldali menüsáv “Woocommerce – Beállítások” almenüjében az “Általános” fül alatt.

Figyelem!

A beállítások az alábbi példában egy Magyarországon működő általános ÁFA mentes (KATÁS) vállalkozásra vonatkoznak, ezért a megadott paraméterek egyénenként változhatnak.

"Általános" fül

Ha ezzel megvagyunk, kattintsunk a “Módosítások mentése” fülre.

"Termékek" fül

Ezen a felületen csak az “Üzleti oldal” beállításokat ellenőrizzük. Előfordulhat, hogy nem jöttek létre a Woocommerce automatikusan generált oldalai (kosár, pénztár, üzlet) mivel nem mentünk végig az angol nyelvű telepítőn.

(A képernyőn szereplő fehér mezőben szereplő “Üzlet” felirat már azt jelzi, hogy létrejöttek az oldalak.)

Amennyiben mégsem történt volna meg, és nem látod ott, megmutatom, mi hogyan hozzuk őket létre manuálisan.

Kattintsunk a baloldali menüsorban a “Woocommerce – Állapot” menüpontra.  Ezen belül pedig az “Eszközök” fül és “Az alapértelmezett Woocommerce oldalak létrehozása” – Oldal létrehozása gomb.

Így már biztosan létrejönnek a Woocommerce alapértelmezett oldalai.

"Szállítás" fül

Szállítási zóna hozzáadása

Első lépésben adjunk hozzá egy szállítási zónát. Kattintsunk a “Szállítási zóna hozzáadása” gombra.

Zónanév: Magyarországra történő szállítás esetén természetesen Magyarországot írjuk be.

A “Zóna régiók“-nál pedig lehetőségünk van országon belül is szűkíteni különböző területekre, így más-más szállítási árakat is megadhatunk. Az egyszerűség kedvéért a mi esetünkben nem bontottuk most tovább.

A mentéshez kattintsunk a “Módosítások mentése” gombra, majd utána a “Szállítási mód hozzáadása” gombra.

Lehetőségünk van pl. ingyenes szállítást választani, vagy a  legtöbb esetben az “Általány”-ra lesz szükség, ugyanis ilyenkor egy fix összeg számolódik fel a rendeléshez. Válasszuk most ezt, majd kattintsunk a “Szállítási mód hozzáadása” gombra.

 

Ezek után az alábbi panel fogad minket:

Kattintsunk az “Általány szerkesztése” lehetőségre.

A “kifizetési mód megnevezését” átírhatjuk pl.: Magyar Postára.

Viszont az már fontosabb, hogy az “Adó státusz” – nál válasszuk a “Nincs” opciót, hiszen ha ezt nem tesszük meg, akkor a szállítási költségekre is rászámolódik ÁFA pluszban, ami igen összezavaró lehet.

Ha végeztünk, a “Módosítások mentése” gombbal befejezzük a szerkesztést.

Ezekhez hasonló módon tudjuk hozzáadni a GLS futárszolgálatot is, mint ahogyan a jelenlegi szállítási módot hoztuk létre.

"Fizetési módok" fül

Könnyen előfordulhat, hogy bizonyos bankkártyás fizetési módok (Pl. Barion, Simple Pay, Paylike, stb.) alapból nem jelennek meg a listában.

Ez azért van, mert ehhez kiegészítő bővítményeket kell használnunk. Használatának feltétele egy bejelentett vállalkozás és Kártya elfogadói szerződés.

A PayPal-ról tudni kell, hogy egy drágább fizetési mód, így a fent említett bankkártyás fizetések jobb megoldások lehetnek.

Illetve lehetséges opció még az utánvétes fizetés. Bármelyiket szernetnénk, az “Engedélyezés” kapcsolóval bekapcsolhatjuk és a “Beállítás” gombokra kattintással testre is szabhatjuk.

Habár még rengeteg beállítás van a Woocommerce-en belül, de elmondhatjuk, hogy a “fapados” működéshez nincs is most szükség ennél többre. Tulajdonképpen el is készültünk a Woocommerce alapbeállításaival. Még egy dolgot érdemes ellenőriznünk, a “Haladó” fül alatt, hogy az automatikusan generált Woocommerce oldalak látszódnak-e. Ha igen, minden rendben van.

4. LÉPÉS: Hozzunk létre egy terméket

A fentiek után nincs más hátra, mint töltsük fel a terméket vagy termékeket, amelyeket el szeretnénk adni online.

Kattintsunk a Vezérlőpultban a Termékek – Új hozzáadás almenüre.

Majd az alábbi felület fogad minket:

1. Termék neve: A termékünk rövid főcíme

2. Termékleírás : Ez a terjedelmes mező lehetővé teszi, hogy annyi információt adjunk meg a termékről, amennyit csak akarunk. Itt nemcsak egyszerű szöveget helyezhetünk el, hanem képeket, oszlopokat, címsorokat, akár videókat és egyéb médiaelemeket is. Alapvetően bármi, ami a termékünk hatékony bemutatását, szemléltetését biztosítja a leendő vásárlóink szemében.

3. Termék adatok: Itt állíthatjuk be a hozzáadni kívánt termék típusát, legyen az fizikai, letölthető vagy virtuális termék (a szolgáltatásokat szintén virtuális termékként kezeljük, hiszen ebben az esetben nem történik fizikai kiszállítás). 

4. Rövid leírás: Ez a szöveg jelenik majd meg a termékoldalon közvetlenül a termék neve alatt. Ez lesz a termék rövid bemutatása, un. alcímként is használható.

5. Termékkategóriák: A termékkategóriák segítik a navigálást az oldalon. Könnyen létrehozhatunk egyet és beállíthatjuk egy-egy termékhez (pl.: testápolás, arcápolás, stb.)

6. Termékcímkék:  Talán ez egy ritkábban használt módszer, mégis hasonlóan működik, mint a kategóriákkal való csoportosítás.

7. Termék kép:  A termékünk nyitó képe.

8. Termék galéria:  A termékünkhöz további képeket adhatunk hozzá.

Ha a fentiekkel készen vagy, csak kattints a kék “közzététel” gombra a jobb oldalon. Ezzel a terméket elmentetted és mások számára elérhetővé is tetted. 

 

Amennyiben több terméket is feltöltöttél, ehhez hasonlót láthatsz majd a Vezérlőpult- “Termékek” fül alatt:

5. LÉPÉS: Válassz egy "Sablont" az online áruházadnak

Mielőtt jobban belemennénk, tisztáznunk kell néhány dolgot.

Először is, milyen a jó webdizájn?

Mi szívesen használjuk az OceanWp sablont, amit a “Vezérlőpult – Megjelenítés – Sablonok – Új hozzáadás” menüpont alatt telepíthetünk.

Hatalmas előnye, hogy az Elementor szerkesztővel készült weblapok és termékoldalak alapból jól néznek ki mobilon és asztali PC-n vagy laptopon egyaránt.

Az Elementor szerkesztő a sok új infó miatt egy másik cikk tartalma lesz a későbbiekben.

Oldalsáv eltüntetése az OceanWp-ben

A lépések:

Vezérlőpult – Megjelenés – Testreszabás – General options – General settings – majd jelöljük be a “Full Width” ablakot és kattintsunk a “Közzététel”-re.

Termékoldal

Amiben előnybe tudunk még kerülni másokkal szemben, hogy:

Kosár oldal

A másik lényeges oldal a “Kosár”, ahonnan a “Pénztár” oldalra szeretnénk navigálni a vásárlóinkat. Mi szeretünk itt használni ajánlott termékeket, amelyeket az utolsó pillanatban beletehetnek még a kosárba (kosárérték növelése).

De ami fontos, hogy az oldalsávot a fent leírtak szerint globálisan eltüntetjük, tehát innen is. Nem szeretnénk a figyelmet megzavarni, tehát hagyjuk őket fizetni, így a teljes szélességű kosár oldalt javasoljuk.

Pénztár oldal

A “Kosár” oldalhoz hasonlóan ezen az oldalon pláne a teljes szélesség javasolt, hiszen ez az utolsó lépés, itt történik a kifizetés.

A mi általunk használt Pénztár oldal a Beauty Land webshopban így néz ki:

Köszönöm szépen, hogy elolvastad ezt a cseppet sem rövid cikket.

Ezúton szeretném a figyelmedbe ajánlani a Beauty Land webshop felépítéséről írt esettanulmányunkat.

Ebben a tanulmányban bővebben írok a Beauty Land webshop felépítéséről, általunk használt marketingmegoldásokról.

A letöltés linkje lentebb található.  Addig is a legjobbakat kívánom!

Üdv.
Mészáros Csaba

TÖLSD LE A BEAUTY LAND ESETTANULMÁNYT

INGYENES STRATÉGIAI MEGBESZÉLÉS