Hogyan készítsünk online e-kereskedelmi áruház webhelyet a WordPress segítségével

Az e-kereskedelem nagyon forró, mert hihetetlenül könnyű havonta 6 számot keresni anélkül, hogy tégla- és habarcsüzlet indulna, őrülten magas általános költségekkel.


De sok ember számára a legtöbb e-kereskedelmi platform, mint például a Shopify drága havi díjai. Ha csak most indul, akkor olcsóbb megoldást szeretne, így többet költene olyan dolgokra, mint a marketing és a reklám.

A jó hír az, hogy nem kell fizetnie magas havi díjakat a Shopify-val, hogy online termékeket tudjon értékesíteni. Ha Shopify vagy eBay alternatívát keres, akkor ez a lépésről lépésre egy fantasztikus online boltot kínál Önnek ingyen.

Csak egy webtárhely-fiókra és egy kis erőfeszítésre van szükséged, és Ön gyorsan képes lesz e-kereskedelmi webhely létrehozására..


Kezdjük el!

Szüksége van:

  • Tárhely. Ajánlom a SiteGround alkalmazást.
  • A domain név.
  • WordPress téma. Ehhez az oktatóanyaghoz az ingyenes Astra témát használjuk.
  • WordPress oldalkészítő. Ehhez az ingyenes Elementor oldalkészítőt használjuk.
  • WooCommerce, a legjobb e-kereskedelem WordPress plugin.

1. lépés. Vásároljon webtárhelyet és domain nevet.

Ha még nem ismeri az egész webhely-készítő vállalkozást, először hadd tisztázjam, mi a webtárhely és a domain név, és miért van szüksége rájuk?.

Mi a tárhely és a domain név??

A webtárhely egy olyan hely az interneten, ahol webhelye fog élni. Olyan, mint egy fizikai ház, ahol megtalálhatók a dolgok. A domain név viszont a webhely címe. Ez olyan, mint a címe, amelyet adsz az embereknek, hogy otthonuk meglátogathassanak. A „Facebook.com”, „Google.com” és „WordPress.com” mind példák a domain nevekre.

A domain nevet szinte bármilyen domain nevet árusító webhelyen megvásárolhatja. Csak a legjobb árat kell keresnie. Ami a webhely-tárhelyet illeti, feltétlenül fontos, hogy a webhelyet csak megbízható cégtől szerezzük. Mert ha a tárhely lassú vagy megbízhatatlan, akkor webhelyének sebessége és működési ideje szenvedni fog, és végül árt az e-kereskedelem vállalkozásának.

Webhelytérkép, Preferált web hosting szolgáltatás

Bármely magas színvonalú web hosting szolgáltatást felhasználhat e-kereskedelmi webhely létrehozására, de ebben az oktatóanyagban a Siteground-ot fogjuk használni.

A SiteGround egy erősen ajánlott internetes fogadó, mivel kiszolgálták a WordPress felhasználókat, és mégis megfizethető árakat kínálnak. Leginkább a gyors teljesítményükről és ugyanolyan gyors támogatásáról ismertek.

Íme a SiteGround legfontosabb jellemzői:

  • Ingyenes SSL tanúsítvány
  • FAST knowledgable támogatás
  • WordPress átmeneti környezet
  • Ingyenes weboldal-migráció
  • 30 napos biztonsági mentés

A SiteGround egy szilárd választás az Ön web hosting igényeihez. Ezek kiszolgálják a WordPress webhelyeket, és kevesebb erőforrást kínálnak, mint versenytársaik, de nagyobb megbízhatóságot kínálnak.

Csodálatos üzletet kötöttem velük, hogy 70% -os árengedményt biztosítson mindenkinek, aki feliratkozik a felhasználásra ez a link. Tehát ha pénzt akar megtakarítani a tárhelyén, kattintson erre a linkre és vásárolja meg most a hostját.

Ha belép a honlapjára, négy különféle típusú tárhelyet fog látni:

válasszon helyszíni tervet

Válassza a WordPress tárhely szolgáltatást, majd kattintson a gombra Fogj neki. Ezután három árképzési tervet fog látni:

siteground wordpress tárhely árazás

Válasszon egyet az Ön igényei és költségvetése szerint. Azt is megnézheti a az egyes tárhely-tervek összehasonlítása hogy jobb képet kapjon arról, hogy melyik terv felel meg legjobban az Ön igényeinek.

Miután elhatározta a tervet, kattintson a gombra Szerezd meg a tervet. Ezután arra az oldalra kerül, ahol kiválasztania kell a domaint. Ha már vásárolt egy domain nevet, válassza az “Már van domain” elemet. De ha még nem rendelkezik ilyennel, válassza a „Új domain regisztrálása” lehetőséget a domain vásárlásához a Webhelytérben.

válasszon egy domaint

Miután megvan neked egy elérhető domain név, amely elérhető, kattintson a gombra Folytassa. A következő lépés a személyes és számlázási adatainak megadása a vásárlás befejezéséhez. Adja meg pontosan adatait és kattintson Fizess most. Most megbízható web hosting és domain névvel rendelkezik.

Második lépés Telepítse a WordPress alkalmazást.

A WordPress egy nyílt forráskódú, ingyenes eszköz, amely lehetővé teszi webhelyek készítését akkor is, ha nincs tudomása a kódolásról. Ez a mai napig a legegyszerűbb és legerősebb webhely-tartalomkezelő rendszer. Van egy csomó dolog, amit szeretek a WordPress-szel kapcsolatban, és ha többet olvas az oktatóimból vagy megnézem videóimat, megtudhatja többet arról, hogy miért gondolom, miért a WordPress a legjobb eszköz webhelyek létrehozására.

A Siteground valójában egy kattintással telepíti a WordPress programot, amely elvégzi a WordPress telepítésének és beállításának minden nehéz munkáját.

Miután befejezte a tárhely-vásárlást, megjelenik egy képernyő, amelyben egy link található “Folytassa az ügyfél területére”. Kattintson erre, és eljut egy oldalra, ahol beállíthatja új tárhely-fiókját. Alatt Állítsa be webhelyét, választ Indítson el egy új webhelyet.

Ezután megjelenik a telepíthető szoftverek listája. választ WordPress.

telepíteni a WordPress-t

Ezt követően meg kell adnia az új webhely adminisztrátori bejelentkezési adatait, például az e-mail címét, a felhasználónevét és a jelszavát. Feltétlenül biztosítsa ezeket a részleteket, mert ezeket használja a webhelyére való bejelentkezéshez.

Ha kész, kattintson megerősít > Teljes telepítés. És most van egy élő, saját üzemeltetésű WordPress webhely.

A webhely testreszabásának megkezdéséhez be kell jelentkeznie a WordPress háttérrendszerébe. Ehhez lépjen a Siteground irányítópultjára, és váltson a Saját számláim fület. Kattints a Telepítés lapon, és itt látható a regisztrált domain név. Az egész zöld Lépjen a Rendszergazda portálra gomb. Kattintson erre a gombra, hogy belépjen a WordPress bejelentkezési oldalára.

lépjen a WordPress admin irányítópultjába

A WordPress bejelentkezési oldalainak általában a következő formátumai vannak: yourdomain.com/wp-admin és yourdomain.com/wp-login. Ne felejtse el a bejelentkezési oldal URL-jét, hogy legközelebb csak az URL-cím gépelésével és a Sitegroundba való bejelentkezés nélkül férjen hozzá hozzá..

A WordPress bejelentkezési oldal így néz ki:

WordPress bejelentkezési oldal

Írja ide ide felhasználónevét és jelszavát, hogy először jelentkezzen be a webhelyére.

3. lépés: Telepítse az Astra téma és az Astra webhelyeket.

Az Astra téma az a téma, amelyet arra használunk, hogy az e-kereskedelemről szóló weboldalunkat a lehető leggyorsabban nézzük ki nagyszerűnek és profinak. Használhat más témákat is, ha úgy akarja, de ehhez az oktatóanyaghoz az Astra témát használjuk.

Az Astra egy ingyenes WordPress téma, amely kiváló sebességgel és egyszerűséggel rendelkezik. Párosítsd az Astra Sites-tel (ingyenes plugin), és bárki rendelkezhet gyönyörű weboldalakkal néhány egérkattintással. Van egy Pro verzió is, amely az Astra-t tökéletes témává teszi.

Az alábbiakban bemutatom azokat a funkciókat, amelyeket legjobban szeretek az Astra iránt:

  • Az egyik leggyorsabb elérhető téma
  • Több mint 100 kezdőhely (a legtöbb 100% -ban ingyenes)
  • Rugalmas Mega menü funkció
  • Erőteljes kiegészítő csomag
  • Széles körű WooCommerce támogatás

Az Astra téma kiváló választás bármely WordPress webdesign projekthez. Valójában ezt a témát használom ezen a weboldalon, és az összes weboldal-projektemben.

Teljes mértékben bízom a fejlesztőben, és nagyon lenyűgözött a téma kódoltsága.

De ennél is inkább, a téma annyira egyszerűen használható, mert minden odafigyelés és gondolat belemerült bele. A legtöbb esetben a használt eszközök alapján konfigurálja magát.

Az Astra telepítéséhez keresse fel a Megjelenés > Téma > Új hozzáadása. Keressen Astra-ra, kattintson a gombra Telepítés, és Aktiválja.

az Astra téma telepítése

Egy másik dolog, amit szeretek az Astra-nak, az a tény, hogy van egy nevű pluginja Az Astra kezdőhelyei előre elkészített ingyenes és prémium sablonok könyvtárával. Néhány kattintással felhasználhatja ezeket a sablonokat saját webhelyére. Az Astra Site sablont használjuk fel, hogy felére csökkentsük a webhely létrehozásának idejét.

Az Astra telepítése után a következő üzenet jelenik meg az irányítópulton:

Az Astra webhelyek elkezdenek

kettyenés Fogj neki. Ez telepíti az Astra Starter Sites az Ön számára.

Az oldalkészítő kiválasztása

Ezután megkérdezik tőle, melyik oldalépítőt szereti jobban, és ebben az oktatóanyagban az Elementort fogom használni. Az Elementor egy WordPress oldal-készítő, amely vihar által átvette a WordPress webdesignját. A legmélyebb funkciókkal rendelkezik, mégis nagyon könnyen kezelhető és kezelhető. Az Elementor a legteljesebb szabad oldalak készítője. Van még egy Pro-kiegészítő, amely további fejlesztői funkciókat kínál.

Fő elem jellemzői:

  • Élő kezelőfelület-szerkesztő
  • Webhely testreszabási szolgáltatások
  • Sablon és blokk könyvtár
  • Széles körű mobil érzékeny lehetőségek
  • A legerősebb popup építő
  • PRO: Egyéni fejlécek / láblécek létrehozása
  • PRO: Postai típusú elrendezések létrehozása

Az Elementor a jelenleg elérhető legerősebb oldalkészítő. Folyamatosan új funkciókat bocsátanak ki, amelyek összhangban vannak a jelenlegi tervezési trendekkel. Ez azt jelenti, hogy képes lesz megőrizni webhelyét. Ha úton szeretne hozzáférni a fejlett funkciókhoz, frissítheti az Elementor Pro-ra, ami szerintem hihetetlen érték, figyelembe véve az összes kiegészítő modult és tápellátási funkciót, amelyeket magában foglal.

Az Astra webhely témájának kiválasztása

Miután kiválasztotta az oldalkészítőt, elkerül az Astra Sites sablonok könyvtárába. Rengeteg gyönyörű sablon használható. Szánjon rá időt a kívánt sablon kiválasztására. És vegye figyelembe, hogy ezek a sablonok teljes mértékben szerkeszthetők a kiválasztott oldalkészítővel, azaz testreszabhatja a weboldal minden részét és elemét, például a címsort, képeket, színeket, logót stb..

Ehhez az oktatóanyaghoz az Egyedi nyomtatás sablont fogom használni, mert csodálatosnak és nagyon e-kereskedelem-orientáltnak tűnik.

A téma telepítéséhez csak rá kell rákattintania, hogy az előnézetbe kerüljön. Ha tetszik, amit lát, kattintson a Téma importálása gombot, és ellenőrizze, hogy a négyzetek be vannak-e jelölve.

Ha észreveszi, van egy doboz, amelyen fel van tüntetve: „Telepítse a szükséges plugineket”. A négyzet bejelölésével telepíti a téma összes szükséges pluginjét, hogy pontosan úgy néz ki, ahogy van. Az Egyéni nyomtatás témához telepíti az Elementor, a WooCommerce és a WPForms fájlokat. Ez annyi időt takarít meg, mert nem kell többé ezeket a bővítményeket telepítenem. Minden értem megtörtént.

astra webhely témájának importálása

A téma importálása eltarthat egy ideig. Ne zárja be a böngészőt, és ne nyomja meg a frissítést. Várja meg, és amikor elkészült, kék színt fog látni Webhely megtekintése gomb. Kattintson erre a gombra, hogy eljuthasson az Ön webhelyére, amelynek a témája most éppen importált.

4. lépés. Szabja testre webhelyét.

Webhelye most már lenyűgözőnek tűnik, de szeretné, ha sajátja lenne. Az első dolog, amit meg szeretne választani, válassza ki a színpalettát. Ha már rendelkezik márkájának színével, ez könnyebb lesz.

Színpaletta kiválasztása

A webhelyek általában 3 színből állnak: az elsődleges, az ékezetes és a pop szín. Az elsődleges szín a webhely domináns színe, és valószínűleg a márka színe. Az ékezetes színt általában a címsorokon vagy a címsorokon használják, ha azt akarja, hogy ezek kissé másképp nézzenek, és feléjük húzzák a szemüket. Végül a pop színnek meg kell kontrasztania a többi színt, hogy a weboldal fontos elemei kiemelkedjenek, például a cselekvésre ösztönző gombok.

A weboldal színpalettájának kiválasztásához két eszközt használok. Az első az Coolors.co ahol böngészhet a különböző színpaletták között, és kiválaszthatja, hogy mit kíván használni a webhelyén.

coolors honlap

Ha lát egy tetszetős palettát, vigye az egérmutatót rá, kattintson a gombra Kilátás, és egy új ablakba kerül, ahol láthatja az egyes színek Hex-kódjait.

színpaletta hex kóddal

Ezek a Hex kódok szükségesek ezekhez a színekhez a webhelyén. Később megmutatom neked, hogyan kell ezeket a Hex-kódokat használni a WordPress háttérrendszerén.

Egy másik kiváló eszköz a Colorzilla, a Google Chrome kiterjesztése, amely lehetővé teszi bármilyen színű hexadecimális kód megszerzését, amelyet bármilyen webhelyen lát, így önmagában is felhasználhatja. Ha meg akarja szerezni a Colorzilla kiterjesztést, kattints ide. Ezután kattintson a gombra Hozzáadás a Chrome-hoz.

ColorZilla

Eltarthat egy ideig, de ha elkészült, eszköztáron ezt az ikont fogja látni:

colorzilla ikonra

Tehát most, ha olyan színt lát valamelyik webhelyen, amelyet kipróbálni szeretne a saját webhelyén, akkor csak rá kell kattintania erre az ikonra, és kattintson a másolni kívánt színre. A Hex kódot ezután automatikusan lemásolja, amelyet beilleszthet a webhely hátterére. Olyan egyszerű. Ez egy praktikus eszköz, amely egy kattintással lehetővé teszi a kiváló színek használatát.

A tipográfia testreszabása

A saját tipográfiáját is szeretné használni, hogy webhelye kitűnjön. A webhelyek általában 2-3 betűkészlettel rendelkeznek. Lesz egy betűtípust a címsorokhoz vagy a menühöz, egy betűtípust a testhez és egy extra „pop-betűtípust”. A színekhez hasonlóan nem használhat csak egyetlen betűtípust. Győződjön meg arról, hogy jól néznek ki együtt, és elküldik a megfelelő üzenetet a márkájáról.

Szeretem használni Fontpair.co amely egy webhely, amely megmutatja, hogyan néz ki két különböző betűtípus együtt.

a fontpairs.co használatával

Ha lát valamit, ami tetszik, csak vegye figyelembe, hogy hívják, így eljuthat a WordPress-hez, és közvetlenül hozzá tudja adni.

Azt is szeretem használni a WhatFont nevű Google Chrome kiterjesztést, amely megmondja, hogy milyen betűtípust használnak bármely webhelyen. A WhatFont telepítése, kattints ide majd kattintson a gombra Hozzáadás a Chrome-hoz. Akkor ezt az ikont látja az eszköztáron:

whatfont ikonra

Ha meg akarja tudni a betűkészlet nevét, akkor csak kattintson erre az ikonra, és vigye az egérmutatót a szöveg fölé. A WhatFont megmondja ennek a betűkészletnek a nevét, és ha rákattint, látni fogja a betűméret, szín, család, stílus, súly és még sok más.

amitfont használunk

Logó beszerzése

Szüksége van egy márkás logóra is, hogy elkülönítse webhelyét, és megteremtse a márka identitását. Számos módon lehet elérni a logót. Kipróbálhatja és csinálhatja magát egy csodálatos tervező eszköz segítségével, az úgynevezett Canva. Nagyon népszerű, mivel megkönnyíti a tervezést még a kezdők számára is.

A Canva sok logósablonnal rendelkezik, amelyeket módosíthat saját elkészítéséhez. Ne feledje azonban, hogy ha átlátszó háttérrel szeretné exportálni a logót, akkor frissítenie kell a Pro-ra (amely egy hónapos ingyenes próbaverzióval rendelkezik). Bármikor beléphet a Photoshopba vagy a Photopea a háttér eltávolításához, de ez csak egy további lépést jelent a folyamathoz.

canva logók

Ha időt akar megtakarítani, bérelhet fel egy szabadúszó logótervezőt, aki elvégzi az Ön számára. Kipróbálhat olyan webhelyeket, mint a Fiverr.com vagy a 99design, de óvatosan kell választania az előadót stílusuk, múltbeli adatok, vélemények, értékelések és egyebek alapján.

Weboldal testreszabása

Ideje használni ezeket a színeket, betűtípusokat és logókat a webhelyén. Ha a WordPress háttér irányítópultján tartózkodik, ugorjon a Megjelenés > Testreszab hogy megnyissa a téma testreszabót.

testreszabhatja a témát

Ha a webhely előlapján tartózkodik, és felül van egy fekete sáv, akkor rákattinthat Testreszab a testreszabó eszköz megnyitásához.

testreszabhatja a témát

Így néz ki a téma-testreszabó:

téma testreszabó

Itt feltöltheti logóját, megváltoztathatja a weboldal színét és tipográfiáját, testreszabhatja a gombokat és még sok más. Az itt elvégzett változások valós időben jelennek meg a webhelyén, így azonnal láthatja, hogyan néz ki. Mindegyik téma különböző testreszabási lehetőségekkel rendelkezik, így ha az Astra-tól eltérő témát használ, itt különböző lehetőségeket láthat..

Az Astra oldalán a webhely színének megváltoztatásához keresse fel a Színek és háttér. Lehetősége van az alapszínek, a zsemlemorzsa, a fejléc és a lábléc színének megváltoztatására.

színes háttér szerkesztő

Az alapszínek a weboldal témája, linkje, szövege és linkjeinek lebegő színei. Ha meg akarja változtatni például a téma színét, kattintson a gombra Válassza a Szín lehetőséget. Kétféle módon választhatja meg a színt. Először illessze be a Hex kódot egy mezőbe. Tehát, ha megtalálta a színt a Coolors.co-ban vagy más helyeken, ide illesztheti a Hex kódot. A színt a beépített kiválasztó eszközben is kiválaszthatja.

alapszín-szerkesztő

A webhely tipográfiájának megváltoztatásához menjen vissza a testreszabó eszköz főmenüjébe, és kattintson a gombra Tipográfia. Megváltoztathatja az alap, a zsákmány, a tartalom és a blog tipográfiáját.

tipográfia testreszabás

Ezután hozzáadja a logóját. A logó feltöltéséhez keresse fel a Elrendezés > Fejléc > Webhely-azonosság. A Logó szakaszban kattintson a gombra Logo módosítása gombot, és töltse fel logóját.

feltöltési logó

Az Astra lehetővé teszi a logó szélességének beállítását is, így megváltoztathatja, hogy milyen nagy vagy kicsi megjelenjen. Ha lefelé görget, akkor megváltoztathatja a webhely címét, hozzáadhat egy webhely címkéjét és egy webhely ikont vagy egy favicont.

Sokkal többet tehet az Astra testreszabási területén, például megváltoztathatja a webhely tartalmának szélességét, megváltoztathatja a blogbejegyzés szerkezetét, testreszabhatja a lábléc és a fejléc stb. Fedezze fel lehetőségeit itt, hogy megtudja, mi a legjobban tetszik webhelyéhez.

Miután elvégezte a testreszabást, ne felejtse el kattintani közzétesz hogy a változások megjelenjenek webhelyén.

5. lépés. Webhelyének testreszabása az Elementor segítségével.

Ezen a ponton megvan a testreszabás alapjai, például a weboldal színének megváltoztatása, a tipográfia, a logó hozzáadása és az összes ilyen cucc. Itt az ideje, hogy lemenjen a szemtelen részletekre és kezdje el használni az Elementor (vagy bármely más oldalszerkesztő, amelyet tetszik), hogy teljesen megváltoztassa webhelyének megjelenését..

Mint már említettem, ebben az oktatóanyagban az Elementort fogom használni, mert egyszerűen azt hiszem, hogy ez a legjobb, de bármilyen oldalkészítőt használhat, amely kényelmesebb..

Az Elementoron belül bármit megtehetsz webhelyével weboldal fejlesztője kódolása vagy bérbeadása nélkül. Elemek hozzáadása egy egyszerű drag and drop folyamat.

Kétféle módon szerkesztheti az oldalt az Elementor segítségével. Először, ha a WordPress háttérképp van, kattintson a gombra Oldalak és látnia kell a webhely összes oldalának listáját, beleértve azokat is, amelyeket automatikusan létrehoztak az Astra Site sablonnal. Azokat az oldalakat, amelyeket egy adott oldalkészítővel (például Elementor) készítettek, ilyenként kell megcímkézni:

oldalak

Ha szerkeszteni szeretne egy oldalt az oldal készítőjével, vigye az egérmutatót rá, és kattintson a gombra Szerkesztés (oldalkészítővel). Az én esetemben lesz Szerkesztés az Elementor segítségével.

szerkesztés az elementorral

Ha rákattint, bekerül az Elementorba.

Egy másik módszer az, ha a webhely előlapján tartózkodik, lépjen a szerkeszteni kívánt oldalra, és kattintson rá Szerkesztés az elementorral a felső fekete sávban:

szerkesztés az elementorral

Ezek egyike eljuthat az Elementorba. Miután belépett az Elementorba, különféle képeket használhat fejlécéhez, szövegek megváltoztatásához, ikonok megváltoztatásához és még sok máshoz. Először megváltoztathatja a fejlécben található szöveget és képet, hogy az megfeleljen az üzleti vállalkozásának. Néhány dolog, amit megtehetsz az Elementor belső szövegeivel:

szövegek szerkesztése az elementorban

Mint láthatja, megváltoztathatja a szöveget közvetlenül a tartalomszerkesztő területen, megváltoztathatja a méretét, súlyát, színét és tipográfiai családját. Hozzáadhat olyan animációkat is, mint az egyszerű elhalványulások, a nagyítás és így tovább. Rengeteg dolgot lehet tenni, hogy fűszert adjon a webhelyéhez.

Azt is meg szeretné változtatni a webhely képeit, hogy az megfeleljen vállalkozásának jellegének. A képek megváltoztatása az Elementoron nagyon könnyű. Csak rá kell kattintania a képre, és a beállítások megjelennek a bal oldalsávban. Feltölthet egy új képet, megváltoztathatja annak méretét, szegélyt vagy árnyékot adhat hozzá, animációt és még sok más.

képek szerkesztése az elementorban

Az Elementoron belül módosíthatja a gombszövegeket, testreszabhatja az ajánlások területét, további elemeket / blokkokat adhat hozzá, mint például szövegek, képek, gombok, videók és még sok más.

Az Elementor Pro sokkal több olyan funkcióval rendelkezik, mint például az űrlapok hozzáadásának képessége (amely általában egy harmadik féltől származó plugint igényel), a saját betűtípusok feltöltése, csúszkák hozzáadása, ár táblázatok és árlisták hozzáadása, a fejlécek és láblécek testreszabása ( ami a legtöbb oldalépítő számára korlátozott), és még sok minden más.

Ha meg akarja vásárolni az Elementor Pro szoftvert, és ezzel egyidejűleg ingyenes hozzáférést szeretne kapni az Elementor Pro tanfolyamokhoz, kattintson ide a linkre.

5. lépés: Állítsa be a WooCommerce alkalmazást.

Itt az ideje, hogy beállítsuk a WooCommerce szoftvert, amely a WordPress bővítmény, amely bármely webhelyet online áruházmá változtat. Ez lehetővé teszi termékek hozzáadását, online fizetések elfogadását, kuponok létrehozását, szállítási és adóbeállítási lehetőségeket, és még sok minden mást.

A WooCommerce szoftvert már telepítette nekem a Custom Print Astra Site téma, tehát most be kell mennem és beállítanom. Ha még nincs telepítve a WooCommerce, csak lépjen a következő oldalra: Dugó > Új hozzáadása és keressen a WooCommerce-ra.

Az első dolog, amit tennünk kell, hogy menjünk WooCommerce > Beállítások. 7 lap jelenik meg: Általános, Termékek, Szállítás, Fizetések, Fiókok és adatvédelem, E-mailek és Speciális.

Vessen egy pillantást a Tábornok fület. Ezen a lapon beállíthatja üzlet címét, mely országokban fogja eladni és szállítani, és engedélyezheti az adómértékeket.

woocommerce általános beállítások

Ha lefelé gördít, látni fogja a kuponok engedélyezésének lehetőségeit és testreszabhatja az árak megjelenítését a webhelyén, ideértve a pénznemet, a megjelenítés helyét stb..

Következő a Termékek lap, ahol beállíthatja a termékekkel kapcsolatos beállításokat. Beállíthatja, hogy melyik oldal lesz a Bolt oldal, mi történik, amikor a látogatók hozzáadnak egy terméket a kosárba, beállíthatják a termék méretét, engedélyezhetik és konfigurálhatják az ügyfelek véleményét, és engedélyezhetik a csillagbesorolást..

woocommerce termékbeállítások

Ennek a szakasznak a felső részén lehetősége van a következőkre is Leltár és Letölthető termékek. A Készlet részben jelölje be a melletti négyzetet Készletkezelés engedélyezése, látni fogja azon lehetőségek listáját, amelyek segítenek a készlet kezelésében. Beállíthatja például az alacsony készletküszöböt úgy, hogy amikor készlete eléri ezt a számot, értesítést küld Önnek. Azt is választhatja, hogy elrejtse-e raktárkészleteit a webhelyén.

készletbeállítások woocommerce

Ami a Letölthető termékek szakasz, ez csak akkor releváns, ha letölthető tartalmat értékesít a webhelyén, így ha pusztán fizikai termékeket árul, akkor ezt kihagyhatja. Lehetősége van arra, hogy a vásárlók bejelentkezését kérje, mielőtt letöltheti termékeit. Fizetés után hozzáférést is biztosíthat a letöltésekhez.

letölthető termékopciók

A következő fül Szállítás. Ez csak akkor releváns, ha fizikai termékeket ad el, amelyeket kiszállítanak a vásárlóknak. Ezen a lapon három alszakasz található: Szállítási övezetek, szállítási lehetőségek és szállítási osztályok.

A Szállítási zónákban hozzá kell adnia szállítási zónákat, és hozzá kell rendelnie a rendelkezésre álló szállítási módszereket ezekhez a zónákhoz. Ez eltart egy ideig, ha több országba szállít.

hajózási övezetek

Ha további segítségre van szüksége a szállítási zónákkal kapcsolatban, akkor nézd meg a WooCommerce szállítási zónáját dokumentáció.

Következő a Szállítási lehetőségek szakasz. Ebben a szakaszban szabályozhatja, hogy a szállítási díjak hogyan jelenjenek meg a webhelyén, és beállíthatja az alapértelmezett vagy a szükséges szállítási rendeltetési helyet.

szállítási lehetőségek

A szállítás utolsó szakasza Szállítási osztályok. A szállítási osztályokkal különféle szállítási díjakat rendelhet egy termékcsoporthoz, például a nehezebb termékekhez, amelyek nagyobb postaköltséget igényelnek.

szállítási osztályok

A szállítási díjak beállításához lépjen a következőbe: Szállítási zónák és létrehozhat vagy szerkeszthet egy meglévő szállítási módszert, például “Flat Rate”.

adj hozzá szállítási költséget

Ha rákattint szerkesztése, megjelenik egy felugró ablak. Itt felveheti az átalánydíjat és a hozzáadott költségeket az éppen létrehozott szállítási osztályhoz.

egy szállítási osztály szállítási költsége

Ha további segítségre van szüksége a szállítási beállítások konfigurálásában, akkor nézd meg a WooCommerce szolgáltatásait szállítási dokumentáció.

Most menjünk tovább kifizetések. Ezen a lapon engedélyezheti vagy letilthatja a fizetési átjárókat, például a PayPal, a közvetlen banki átutalás, a kézbesítés és még sok más. Miután engedélyezte a módszert, kattintson a gombra Beállít a fiókok összekapcsolásához és a fizetések elfogadásához.

fizetési módok

Ha szeretné elfogadni a Stripe-kifizetéseket, telepíthet egy úgynevezett plugint WooCommerce csíkos fizetési átjáró. Csak menj ide Dugó > Új hozzáadása és keresse meg a bővítményt. A plugin telepítése és aktiválása lehetővé teszi a Stripe fizetési módot a WooCommerce-ban, de be kell lépnie WooCommerce > Beállítások > kifizetések hogy felállítsam.

Ban,-ben Fiókok és adatvédelem lapon konfigurálhatja a fiók létrehozásával és a felhasználói adatvédelemmel kapcsolatos beállításokat. Dönthet úgy, hogy a vendégek fiók létrehozása nélkül vásárolhatnak, beállíthatják az adatvédelmi oldalt és az irányelv oldalakat, és kiválaszthatják, hogy a felhasználói adatok mennyi ideig kerüljenek megőrzésre..

fiókok és adatvédelem

Következő a e-mailek lapon, ahol megjelenik az e-mailek listája, amelyeket a WooCommerce automatikusan küld bizonyos feltételek alapján. Például, ha új megrendelést készít, akkor e-mailt küldhet a választott e-mail címre. E-maileket is láthat az ügyfelek megrendeléseivel kapcsolatos frissítésekkel, például visszatérített vagy teljesített megrendelésekkel.

Email Értesítések

Végül a Fejlett lapon, amely felváltotta az API fület, lehetővé teszi a további műszaki részletek konfigurálását, például az oldal beállításait, ahol megmondhatja a WooCommerce-nak, hogy melyik oldal fog működni kosár- vagy fizetési oldalként.

oldalbeállítás woocommerce

Ha lefelé gördít, akkor módosíthatja azt, amit a WooCommerce végpontnak hív, amely az URL melléklete, amely lehetővé teszi számukra, hogy eltérő tartalmat jelenítsenek meg új oldal nélkül..

6. lépés. Adjon hozzá termékeket.

Miután elkészült a WooCommerce alapbeállításaival, itt az ideje, hogy termékeket adjon hozzá. Az Astra Site témája, amelyet ebben az oktatóanyagban használtunk, már a mintatermékekkel együtt érkezik, és így néz ki egy termékoldal az előlapon:

termékoldal

Nézzük meg most, hogyan változtathatjuk meg ezt, és hozzáadhatjuk saját termékeinket a háttérképhez.

Új termék hozzáadásához vagy egy meglévő termék szerkesztéséhez kattintson a menüpontra Termékek a WordPress irányítópultjának bal oldalsávján. Ekkor megjelenik az összes termék listája. Alternatív megoldásként, ha egy termékoldal előlapján tartózkodik, akkor rákattinthat Termék szerkesztése az oldal tetején lévő fekete sávon. Ez közvetlenül a termékszerkesztőbe viszi Önt.

termék szerkesztő

Itt módosíthatja a termék címét és leírását. Ha lefelé gördít, látni fog egy szakaszt Termék adatok. Itt tölti az idő nagy részét. Itt kiválaszthatja a termék típusát, és onnan konfigurálhatja a termék egyéb beállításait.

A WooCommerce lehetővé teszi az alábbi típusú termékek hozzáadását:

  • Fizikai, letölthető, virtuális. A virtuális terméket nem feltétlenül kell letölteni. Példa erre egy találkozó vagy egy egy-egy coaching munkamenet.
  • Egyszerű termék. Ez egy termék.
  • Csoportos termék. Ez egy csomó különböző termék.
  • Külső termék. Azok a termékek, amelyeket a webhelyén kívül vásárolnak, mint egy kapcsolt link.
  • Változtatható termék. Egy változó terméknek variációi vannak, például a színek és a méretek.
terméktípusok

Amikor új terméket hoz létre, az első lépés a típusának kiválasztása. Minden típushoz különféle lehetőségek tartoznak. Például egy letölthető termék a következő lehetőségekkel rendelkezik:

letölthető termékopciók

E szakasz bal oldalán további lehetőségeket talál a készletre, a szállításra, a kapcsolódó termékekre és egyebekre.

Ban ben Leltár, Ön hozzáadhatja az SKU-t, megadhat bizonyos számú készletet ehhez az adott termékhez, beállíthatja a készlet állapotát és így tovább.

Ban ben Szállítás, meghatározhatja a termék tömegét és méreteit, valamint hozzárendelheti a szállítási osztályt, amelyet az előző lépésben készítettünk.

szállítási adatok

Ban ben Kapcsolódó termékek, hozzárendelhet egy terméket eladási és keresztértékesítési tételhez. Az upsell egy olyan termék, amelyet a jelenlegi termék helyett ajánl, mert magasabb az ára. A keresztirányú értékesítés olyan termékek, amelyeket az aktuális termék alapján a kosárban javasol. Ha eladót vagy keresztirányú eladást szeretne hozzáadni, írja be a termék nevét a megfelelő mezőkbe.

kapcsolódó termékek

A termékekhez attribútumokat is hozzáadhat a attribútumok szakasz. Lehet méret, szín, súly stb. Ha változó terméket készít, akkor először hozzá kell adnia egy attribútumot. Ha többet szeretne megtudni egy változó termék létrehozásáról, nézd meg A WooCommerce útmutatója itt található.

Ha görgetsz le Termék adatok mezőben egy olyan területet fog látni, amelyhez hozzáadhat egy rövid termékleírást. Ez a leírás megjelenik a termék mellett és az ár mellett. Tartsa rövid és édes. A jobb oldalon adhat hozzá egy termék képet. Ha további termékképei vannak, felveheti azokat a Termék galéria szakasz.

rövid leírás és termékkép

Fontos továbbá a katalógus láthatóságának beállítása, amely az oldal felső részén található közzétesz. Bizonyos esetekben érdemes elrejteni bizonyos termékeket, mert valószínűleg kölcsönös eladásként ajánlja fel exkluzív kedvezményes áron. Itt teheti meg.

a katalógus láthatósága

Ha elkészült az itt leírtakkal, kattintson a gombra frissítés az összes módosítás mentéséhez.

Ha többet szeretne megtudni a különféle terméktípusokról és arról, hogyan lehet azokat megfelelően létrehozni, akkor ezt WooCommerce útmutató remek hely a kezdéshez. Addig vegyen további termékeket a webhelyére, pontosan ugyanazokkal a lépésekkel, amelyeket itt mutattam neked, amíg el nem készíti a termékinformációit.

7. lépés. Testreszabhatja a pénztárakat.

A WooCommerce egy nagyszerű bővítmény, ahogy eddig látta, ám ez ellen a közös panasz a fizetési lehetőségek hiánya. Nem tudja megváltoztatni a fizetési oldalak megjelenését, és vele nem hozhat létre értékesítési csatornát. Az értékesítési csatorna nagyszerű módja annak, hogy növeljük az ügyfelek vásárlási értékét, tehát ha nincs meg a webhelyed, akkor tényleg pénzt hagy az asztalon.

Ha értékesítési csatornát szeretne létrehozni az e-kereskedelem webhelyéhez, akkor a legjobb plugin segíthet a CartFlows. Egy tölcsérkészítő WordPress-bővítmény, amely lehetővé teszi gyönyörű és rendkívül hatékony csatornák létrehozását közvetlenül a WordPress-ben.

cartflows

Ha többet szeretne megtudni arról, hogyan hozhat létre értékesítési csatornát a CartFlows segítségével, akkor nézd meg ezt az oktatóanyagot, amelyet készítettem.

8. lépés: Maradjon a kocsi elhagyásának tetején.

Mielőtt lezárnám ezt az oktatóprogramot, hadd tegyek még egy dolgot a kosárról való lemondásról. Az e-kereskedelemben tény, hogy sok ügyfél a vásárlás befejezése nélkül el fogja hagyni a kocsit.

Ennek oka sok ok lehet. Lehet, hogy zavartak, a hatalom vagy a kapcsolat kialudt, valami sürgõs felmerült. Bármi is is legyen, ezeknek az elhagyott kocsiknak sokasága elveszíti az értékesítést, ha nem teszel semmit ezzel.

Szerencsére van egy nevű plugin A WooCommerce kosár elhagyásának helyreállítása plugin, amely nyomon követi és automatikusan nyomkövetési e-maileket küld az elhagyott kocsikkal rendelkező ügyfelek számára – mindezt INGYEN!

Ha az Astra Site témát használja, amelyet itt használtam, ezt a bővítményt már telepítette az Ön számára. De ha nem, akkor telepítheti a következőre kattintva Dugó > Új hozzáadása és keresse meg a bővítményt.

Ez létrehoz egy új opciót a WooCommerce alatt Kosár elhagyása. Ha rákattint erre, áttekintést kaphat arról, hogy hány elhagyott kocsi van, hányat helyreállított, és hány elveszett..

megtérülő megrendelések kosár elhagyása

Azt is testreszabhatja a nyomon követési e-maileket, amelyeket a WooCommerce küld, ha átvált a Következő e-mailek fülre, vigye az egeret a szerkeszteni kívánt e-mail fölé, és kattintson a gombra szerkesztése.

követő e-mailek

Ezután az e-mail szerkesztőbe kerül:

a követő e-mailek testreszabása

Csomagolás fel

Az e-kereskedelemhez kapcsolódó WordPress webhely létrehozása bonyolultnak és lenyűgözőnek tűnhet, de remélem, rávilágítottam rá, és megmutattam, hogyan tudsz mindent egyedül elvégezni egy kis segítséggel. Nagyon örülök, hogy hallok a sikertörténeteidről, és ha bármilyen segítségre van szüksége, kapcsolatba léphet velem az alábbi megjegyzés szakaszban..

SiteGround

A SiteGround egy erősen ajánlott internetes fogadó, mivel kiszolgálták a WordPress felhasználókat, és mégis megfizethető árakat kínálnak. Leginkább a gyors teljesítményükről és ugyanolyan gyors támogatásáról ismertek.

Főbb SiteGround szolgáltatások:

  • Ingyenes SSL tanúsítvány
  • FAST knowledgable támogatás
  • WordPress Staging Enviroment
  • Ingyenes weboldal-migráció
  • Napi mentések

A SiteGround egy szilárd választás az Ön web hosting igényeihez. Ezek kiszolgálják a WordPress webhelyeket, és kevesebb erőforrást kínálnak, mint versenytársaik, de nagyobb megbízhatóságot nyújtanak.

Nézze meg a SiteGround szolgáltatást

Astra téma

Az Astra egy ingyenes WordPress téma, amely a sebességre összpontosít. Opcionálisan megvásárolhatja a Pro verziót 59 dollárért, amely néhány további beállítást és opciót felvesz.

Astra főbb jellemzői:

  • Nem a gyorsaságok témája, de ez nem egy zuhanás
  • Rengeteg ingyenes bemutató webhely
  • Rugalmas Mega menü funkció
  • Egyedi elrendezések beállításai
  • WooCommerce támogatás
  • LearnDash támogatás

Az Astra téma méltányos választás bármely WordPress webdizájn számára. Azt hiszem, a legnagyobb kérdés az, ha manapság még egy témát is meg kell vásárolnia, mivel az oldalépítők ugyanazokat a dolgokat csinálják, amire szüksége lenne egy témára. Például az Elementor rendelkezik egy ingyenes Hello témával, amely lehetővé teszi az oldal készítőjének az összes munka elvégzését.

Még mindig vannak jó indokok egy profi téma megvásárlására, de a legtöbb ember számára valószínűleg jól fognak menni egy ingyenes témával.

Számomra azonban azt hiszem, hogy az Astra téma nem tartott lépést a jelenlegi tendenciákkal, és már nem ajánlom.

Sokkal jobb modern témák érhetők el, amelyek beépített fejléc- és lábléc-készítőket kínálnak, szemben a 3 elrendezéssel, valamint rugalmasabb oldal- és utóelrendezéssel..

Nézze meg az Astra témát

Elementor

Az Elementor egy WordPress oldal-készítő, amely vihar által átvette a WordPress webdesignját. Megvan a legmélyebb szolgáltatáskészlete, mégis nagyon könnyen kezelhető és kezelhető. Az Elementor a legteljesebb szabad oldalak készítője. Van még egy Pro-kiegészítő, amely további fejlesztői funkciókat kínál.

Fő elem jellemzői:

  • Élő kezelőfelület-szerkesztő
  • A webhely személyre szabásának jellemzői
  • Sablon és blokk könyvtár
  • Széles körű mobil érzékeny lehetőségek
  • A legerősebb popup építő
  • PRO Egyéni fejlécek / láblécek létrehozása
  • PRO Feladás-típusú elrendezések létrehozása

Az Elementor a jelenleg elérhető legerősebb oldalkészítő. Folyamatosan új funkciókat bocsátanak ki, amelyek összhangban vannak a jelenlegi tervezési trendekkel. Ez azt jelenti, hogy képes lesz megőrizni webhelyét.

Az Elementor Pro hihetetlen érték, figyelembe véve az összes kiegészítő modult és tápellátási funkciót.

Ha ma új weboldal-projektet indítanék, akkor az Elementor lenne az oldalépítő, amelyet választanék. Úgy gondolom, hogy rendelkeznie kell WordPress oldalkészítővel, amelyet öröm használni.

Check out Elementor

CartFlows

A CartFlows értékesítési tölcsérkészítő a WordPress számára. Ez lehetővé teszi, hogy gyorsan és egyszerűen készítsen értékesítési csatornákat a választott oldalkészítő segítségével.

Főbb CartFlow jellemzők:

  • Professzionálisan tervezett sablonok
  • 5 Helymegrendelési pontok
  • Egy kattintással értékesíti
  • Használja a Preferált oldalkészítőt
  • Bővíthető, eltérően a kattintási csatornákon
  • Visszaszámlálók és osztott tesztelés

Ha eladási tölcsér-készítőt szeretne a WordPress-hez, és jól tud önmaga tárolásával, vagy menedzselt WordPress-tárhely használatával, akkor a CartFlows kiváló lehetőség, mert szuperkönnyen használható, de nagyon erős.

Nézze meg a CartFlow-okat

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