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 WordPress-hez hasonlóan ugyanúgy ingyenes és nyílt forráskódú rendszer.
A Woocommerce a WordPress legnépszerűbb e-kereskedelmi bővítménye.
Teljesen testre szabható.
Gyorsan feltelepül.
Bármely WordPress webdizájnhoz, témához, elrendezéshez illeszkedik.

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

Bemutatom, hogyan építettem fel a Beauty Land 16 termékes koreai kozmetikumok webshopot az Online jelenléttől az utolsó símításokig
Megismerheted közelebbről a technikai platformot, bővítményeket, beállításokat, oldal elrendezést, funkciókat
Személyre szabott termékek, ajánlatok, marketing eszközök, amelyeket a webshop tulajdonosok sokszor figyelmen kívül hagynak, vagy nem használnak

Mit árulhatsz WordPress + WooCommerce áruházban?

digitális termékeket (pl. szoftver, letölthető formátumban bármi, pl.: e-könyvek),
fizikai termékeket
Szolgáltatásokat
foglalásokat (pl. MeetUp, rendezvény vagy bármi, amit le lehet foglalni),
feliratkozásos termékeket (pl.: megújuló tagság)
mások termékeit (affiliate),

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

Cím első sora, Város, Ország / Állam, Irányítószám: a bejegyzett vállalkozásunkra vonatkozó adatok
Értékesítés helye: célszerű kiválasztani az "Értékesítés az adott országokba" opciót és alatta megadni az adott országot. Így ha pl. csak Magyarországra értékesítünk, kizárhatjuk a külföldre szállítás lehetőségét
Szállítási hely(ek): "Szállítás az összes értékesítési helyre" legyen kiválasztva
Vásárló alapértelmezett címe: "Üzlet címe"
Adók engedélyezése: Csak abban az esetben kell bepipálni az "Adókulcsok és kalkulációk engedélyezése" opciót, ha ÁFA kötelesek vagyunk, KATA vállalkozás esetén hagyjuk üresen a jelölőnégyzetet
Kuponok engedélyezése: Amennyiben használni kívánunk kuponkódot, akkor a fenti lehetőséget mindenképp pipáljuk be, és annak elkerülése érdekében, hogy egyszerre több kupont is fel tudjanak használni, nem árt a "Kuponkedvezmények szekvenciális számítása" lehetőséget is engedélyezni
Pénznem: magyar vállalkozás esetén "Magyar forint"-ot választjuk ki
Devizanem pozíció: "Jobb"
Ezres-elválasztó: ezt a helyet hagyjuk üresen
Tizedesjel: ide csak egy vesszűt " , " írunk
Tizedesjegyek száma: "0"

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).

Általános "fül" . Itt állíthatjuk be az árat és az akciós árat.
Készlet "fül": A WooCommerce lehetővé teszi a készletek cikkszám szerinti kezelését.
Szállítás: Itt beállíthatjuk a termékünk súlyát és méreteit.
Kapcsolódó termékek: Upsell - Cross-sell értékesítésre nyílik lehetőségünk, pl.: ha egy terméket megvettek, ajánlhatunk hozzá egy másikat, stb.
Attribútumok: Ennek a fülnek a "variálható termékeknél" jobban van jelentőssége. Pl.: Terméken belüli típusokat, színeket állíthatunk be úgy, hogy nem új termékként tartjuk nyilván, hanem un. "altípusként".
Haladó: Nem igazán használjuk, de opcionális megoldásként megjegyzést tudunk egy-egy termékhez rendelni.

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?

Letisztultnak kell lennie, semmilyen módon nem szeretnénk összezavarni a vásárlóinkat. Néha egy egyszerűbb elrendezés vagy színkombináció sokkal jobban teljesít, mint ha csilli-villi elemekből építenénk fel webshopunkat.
A legfontosabb tartalmi blokkoknak azonnal fel kell hívniuk a látogatók figyelmét, miután weboldalunkra érkeztek. Ezeken a felületeken a termékeink lesznek.
Az oldalsávokat a legtöbb esetben le kell tiltanunk, hogy ne vigye el a figyelmet és a fókuszt a termékeinkről.
Reszponzív, mobilra optimalizált elrendezést szeretnénk. Kutatások támasztják alá, hogy az internetezők 80%-a rendelkezik okostelefonnal. Egy másik kutatás szerint a mobil telefonon "szörföző" felhasználók 61%-a rögtön elhagyja a zavaros és nem áttekinthető oldalakat. Tehát, törekedjünk arra, hogy webshopunk mobiltelefonra is optimalizálva legyen.
Atlátható navigációs menü, könnyű navigálás. Az a cél, hogy a látogatóink könnyen megtalálják a keresett oldalt.

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:

A termékoldalunkat részletesen kidolgozzuk.
Az ajánlatainkat személyre szabjuk: „Add ajándékba másoknak!”, vagy díszcsomagolás, és egyedi felirat lehetősége
Előre megválaszoljuk a vásárlók fejében felmerülő kérdéseket, ezzel a „Talán” fázisból az „Igen”-re billentjük át.
Un. rövid bullet pointokban fogalmazzuk meg a termékeink előnyeit, így jóval átláthatóbb és olvashatóbb szöveget kapunk
Leírjuk a termék használatát
Bemutatjuk használat közben, Influencerek segítségével.

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