Hoe u een online eCommerce-winkelwebsite maakt met WordPress

E-commerce is bloedheet omdat het ongelooflijk gemakkelijk is om 6 cijfers per maand te verdienen zonder een fysieke onderneming op te zetten met waanzinnig hoge overheadkosten.


Maar het probleem voor velen zijn de dure maandelijkse kosten van de meeste e-commerceplatforms zoals Shopify. Als je net begint, wil je een goedkopere oplossing, zodat je meer kunt uitgeven aan zaken als marketing en reclame.

Het goede nieuws is dat u bij Shopify geen hoge maandelijkse kosten hoeft te betalen om producten online te kunnen verkopen. Als u op zoek bent naar een Shopify-alternatief of een eBay-alternatief, laat deze stapsgewijze zelfstudie u gratis een geweldige online winkel achter.

Het enige dat u nodig heeft, is een webhostingaccount en een beetje inspanning en u zult in een mum van tijd een e-commerce website kunnen maken.


Laten we beginnen!

Dingen die je nodig hebt:

  • Hosting. Ik raad SiteGround aan.
  • EEN domeinnaam.
  • WordPress-thema. Voor deze tutorial gebruiken we het gratis Astra-thema.
  • WordPress Page Builder. Hiervoor gebruiken we de gratis Elementor-paginabuilder.
  • WooCommerce, de beste e-commerce WordPress-plug-in.

Stap 1. Koop een webhosting en domeinnaam.

Als u nieuw bent bij dit hele websitebouwbedrijf, laat me dan eerst verduidelijken wat een webhosting en domeinnaam zijn en waarom u ze nodig heeft.

Wat is een hosting- en domeinnaam?

Een webhosting is een plek op internet waar uw website zal wonen. Het is net een fysiek huis waar je spullen te vinden zijn. De domeinnaam is daarentegen het adres van uw website. Het is net als uw adres dat u aan mensen geeft, zodat ze u thuis kunnen bezoeken. “Facebook.com”, “Google.com” en “WordPress.com” zijn allemaal voorbeelden van domeinnamen.

U kunt een domeinnaam kopen op vrijwel elke website die domeinnamen verkoopt. Je hoeft alleen maar te zoeken naar de beste prijs. Maar wat betreft de website-hosting, het is absoluut belangrijk om alleen hosting te krijgen van een betrouwbaar bedrijf. Want als uw hosting traag of onbetrouwbaar is, zullen de snelheid en uptime van uw website eronder lijden, en uiteindelijk zal het uw e-commercebedrijf schaden.

Siteground, My Preferred Web Hosting Service

U kunt elke hoogwaardige webhostingservice gebruiken om een ​​e-commerce website te maken, maar in deze tutorial gaan we Siteground gebruiken.

SiteGround is een sterk aanbevolen webhost online omdat ze zich hebben toegelegd op WordPress-gebruikers en toch een betaalbare prijs hebben. Ze staan ​​vooral bekend om hun snelle prestaties en even snelle ondersteuning.

Dit zijn de belangrijkste kenmerken van SiteGround:

  • Gratis SSL-certificaat
  • SNEL geïnformeerde ondersteuning
  • WordPress Staging-omgeving
  • Gratis website-migraties
  • 30 dagen back-up

SiteGround is een solide keuze voor uw webhostingbehoeften. Ze spelen in op WordPress-websites en bieden minder bronnen dan hun concurrenten, maar een hogere betrouwbaarheid.

Ik heb een geweldige deal met hen gesloten om 70% korting te geven aan iedereen die zich aanmeldt bij het gebruik deze link. Dus als u geld wilt besparen op uw hosting, klik op deze link en koop nu uw hosting.

Zodra u op hun startpagina terechtkomt, ziet u vier verschillende soorten hosting:

kies een siteground plan

Kies WordPress-hosting en klik op Begin. Je ziet dan drie tariefplannen:

siteground WordPress hosting prijzen

Kies er een volgens uw behoeften en budget. Je kunt ook hun bekijken vergelijking van elk hostingplan om een ​​beter idee te krijgen welk plan het beste bij u past.

Zodra u een plan heeft gekozen, klikt u op Plan krijgen. Je wordt dan naar een pagina geleid waar je een domein moet kiezen. Als u al een domeinnaam heeft gekocht, selecteert u ‘Ik heb al een domein’. Maar als u er geen heeft, selecteert u ‘Registreer een nieuw domein’ om een ​​domein rechtstreeks in Siteground te kopen.

kies een domein

Zodra u een domeinnaam heeft die u bevalt en beschikbaar is, klikt u op Doorgaan. De volgende stap is het verstrekken van uw persoonlijke en factuurgegevens om de aankoop te voltooien. Geef uw gegevens nauwkeurig op en klik op Nu betalen. U heeft nu een betrouwbare webhosting en domeinnaam.

Stap twee. Installeer WordPress.

WordPress is een open-source, gratis tool waarmee je websites kunt bouwen, zelfs als je geen idee hebt van codering. Het is het eenvoudigste en krachtigste contentbeheersysteem voor websites tot nu toe. Er zijn een heleboel dingen die ik leuk vind aan WordPress, en als je meer van mijn tutorials leest of mijn video’s bekijkt, kom je meer te weten over waarom ik denk dat WordPress de beste tool is voor het maken van websites voor niet-techneuten.

Siteground wordt geleverd met een WordPress-installatie met één klik die al het harde werk van het installeren en instellen van WordPress voor je doet.

Zodra u uw hostingaankoop heeft voltooid, ziet u een scherm met een link die zegt ‘Ga door naar de klantruimte’. Klik daarop en u wordt naar een pagina geleid waar u uw nieuwe hostingaccount kunt instellen. Onder Stel uw website in, selecteer Start een nieuwe website.

U ziet dan een lijst met software die u kunt installeren. Selecteer WordPress.

installeer wordpress

U moet dan beheerdersaanmeldingsgegevens voor uw nieuwe website opgeven, zoals uw e-mailadres, gebruikersnaam en wachtwoord. Zorg ervoor dat u deze gegevens beveiligt, omdat u deze gebruikt om in te loggen op uw website.

Zodra dat is gebeurd, klikt u op Bevestigen > Voltooi de installatie. En je hebt nu een live, zelf gehoste WordPress-website.

Om te beginnen met het aanpassen van uw website, moet u inloggen op de WordPress-backend. Om dat te doen, gaat u naar uw Siteground-dashboard en schakelt u naar de Mijn accounts tabblad. Klik op de Installatie tabblad en hier ziet u de domeinnaam die u hebt geregistreerd. Aan de overkant is een groen Ga naar Admin Portal knop. Klik op deze knop om naar uw WordPress inlogpagina te gaan.

ga naar WordPress admin dashboard

WordPress inlogpagina’s hebben meestal deze formaten: uwdomein.com/wp-admin en uwdomein.com/wp-login. Onthoud de URL van je inlogpagina zodat je er de volgende keer toegang toe hebt door de URL rechtstreeks in je adresbalk te typen en zonder dat je je opnieuw hoeft aan te melden bij Siteground.

De inlogpagina van WordPress ziet er als volgt uit:

wordpress login pagina

Voer hier uw gebruikersnaam en wachtwoord in om voor de eerste keer in te loggen op uw website.

Stap 3. Installeer Astra Theme en Astra Sites.

Astra Theme is het thema dat we zullen gebruiken om onze e-commerce website er zo snel mogelijk goed en professioneel uit te laten zien. U kunt desgewenst andere thema’s gebruiken, maar voor deze zelfstudie gaan we met Astra-thema.

Astra is een gratis WordPress-thema met een uitstekende snelheid en eenvoud. Koppel het met Astra Sites (gratis plug-in) en iedereen kan met een paar muisklikken een prachtige website hebben. Er is ook een Pro-versie beschikbaar die Astra het perfecte thema maakt.

Dit zijn de functies die ik het leukst vind aan Astra:

  • Een van de snelste thema’s die beschikbaar zijn
  • Meer dan 100 startersites (de meeste zijn 100% gratis)
  • Flexibele Mega Menu-functie
  • Krachtig uitbreidingspakket
  • Uitgebreide WooCommerce-ondersteuning

Astra Theme is een uitstekende keuze voor elk WordPress-webontwerpproject. In feite is dit het thema dat ik gebruik op deze website en al mijn website-projecten.

Ik heb het volste vertrouwen in de ontwikkelaar en ben erg onder de indruk van hoe goed het thema is gecodeerd.

Maar meer dan dat, het thema is zo eenvoudig te gebruiken vanwege alle zorg en gedachten die eraan zijn besteed. In de meeste situaties configureert het zichzelf op basis van de tools die u gebruikt.

Ga naar om Astra te installeren Verschijning > Thema > Nieuw toevoegen. Zoek naar Astra, klik Installeren, en Activeren.

astra thema installeren

Een ander ding waar ik van houd Astra is het feit dat het een plug-in heeft genaamd Astra-startersites met een bibliotheek met vooraf gebouwde gratis en premium sjablonen. U kunt deze sjablonen met een paar klikken gebruiken voor uw eigen website. We gebruiken een Astra-sitesjabloon om de tijd voor het maken van onze website te halveren.

Na het installeren van Astra, zie je dit bericht op je dashboard:

Astra-sites gaan aan de slag

Klik Begin. Hiermee wordt Astra Starter-sites voor u geïnstalleerd.

Uw paginabuilder kiezen

Vervolgens wordt je gevraagd welke paginabuilder je voorkeur heeft, en in deze tutorial ga ik Elementor gebruiken. Elementor is een WordPress-paginabuilder die het webdesign van WordPress stormenderhand heeft veroverd. Het had de diepste functieset, maar is toch heel gemakkelijk te gebruiken en te beheersen. Elementor is de meest complete gratis paginabuilder. Er is ook een Pro-add-on om extra ontwikkelaarsfuncties toe te voegen.

Belangrijkste Elementor-functies:

  • Live Front End Page Editor
  • Website-personalisatiefuncties
  • Sjabloon- en blokbibliotheek
  • Uitgebreide mobiele responsieve opties
  • Krachtigste Popup Builder
  • PRO: Maak aangepaste kopteksten / voetteksten
  • PRO: Lay-outs voor berichttypen maken

Elementor is de sterkste paginabuilder die momenteel beschikbaar is. Ze brengen consequent nieuwe functies uit die in lijn zijn met de huidige designtrends. Dit betekent dat u uw website relevant kunt houden. Als je onderweg toegang wilt tot geavanceerde functies, kun je upgraden naar Elementor Pro, wat volgens mij een ongelooflijke waarde is gezien alle extra modules en stroomfuncties die het bevat.

Uw Astra-sitethema kiezen

Nadat u uw paginabuilder heeft gekozen, wordt u naar de bibliotheek met Astra Sites-sjablonen geleid. Er zijn een heleboel prachtige sjablonen die u kunt gebruiken. Neem de tijd om de gewenste sjabloon te kiezen. Houd er rekening mee dat deze sjablonen volledig bewerkbaar zijn met de paginabuilder die u hebt geselecteerd, wat betekent dat u elk onderdeel en elk element van de website kunt aanpassen, zoals de kop, afbeeldingen, kleuren, logo, enz..

Voor deze tutorial ga ik de Custom Printing-sjabloon gebruiken omdat deze er geweldig uitziet en erg op e-commerce is gericht.

Om een ​​thema te installeren, hoeft u er alleen maar op te klikken om naar het voorbeeld te gaan. Als het je bevalt wat je ziet, klik dan op Thema importeren knop en zorg ervoor dat de vakjes allemaal zijn aangevinkt.

Als je het merkt, is er een vak met de tekst ‘Vereiste plug-ins installeren’. Als u dit vakje aanvinkt, worden alle vereiste plug-ins geïnstalleerd zodat het thema er precies zo uitziet als het is. Voor het thema Custom Printing installeert het Elementor, WooCommerce en WPForms. Dit bespaart me zoveel tijd omdat ik deze plug-ins niet meer één voor één hoef te installeren. Alles is voor mij gedaan.

astra site-thema importeren

Het importeren van het thema kan even duren. Sluit uw browser niet en klik niet op vernieuwen. Wacht het af en als het klaar is, zie je een blauw Site bekijken knop. Klik op die knop om naar uw website te gaan die nu het thema heeft dat u zojuist hebt geïmporteerd.

Stap 4. Pas uw website aan.

Uw website ziet er nu prachtig uit, maar u wilt er uw eigen website van maken. Het eerste dat u wilt doen, is uw kleurenpalet kiezen. Als u uw merkkleur al heeft, wordt dit gemakkelijker.

Een kleurenpalet kiezen

Een website heeft normaal gesproken een set van 3 kleuren: de primaire, accent- en popkleur. De primaire kleur is de dominante kleur van uw website en hoogstwaarschijnlijk uw merkkleur. De accentkleur wordt normaal gesproken gebruikt op koppen of titels van titels als je wilt dat die er iets anders uitzien om de ogen naar hen toe te trekken. Ten slotte moet de pop-kleur contrasteren met de rest van de kleuren om belangrijke elementen van de website te laten opvallen, zoals call-to-action-knoppen.

Voor het kiezen van een kleurenpalet voor een website gebruik ik twee tools. De eerste is Coolors.co waar u door verschillende kleurenpaletten kunt bladeren en kunt kiezen wat u op uw website wilt gebruiken.

coolors homepage

Als u een palet ziet dat u bevalt, beweeg uw muis erover en klik op Visie, en je wordt naar een nieuw venster gebracht waar je de hex-codes van elke kleur ziet.

kleurenpalet met hex code

Deze Hex-codes zijn wat u nodig hebt om deze kleuren op uw website te gebruiken. Later zal ik je laten zien hoe je deze Hex-codes kunt gebruiken op de WordPress-backend.

Een andere coole tool is Colorzilla, een Google Chrome-extensie waarmee je de hex-code kunt krijgen van elke kleur die je op elke website ziet, zodat je deze zelf kunt gebruiken. Als je de Colorzilla-extensie wilt hebben, Klik hier. Dan klikken Toevoegen aan Chrome.

colorzilla

Het kan even duren, maar als het klaar is, zie je dit pictogram op je werkbalk:

colorzilla icoon

Dus als u nu een kleur op een website ziet die u wilt proberen te gebruiken op uw eigen website, hoeft u alleen maar op dit pictogram te klikken en op de kleur te klikken die u wilt kopiëren. De Hex-code wordt dan automatisch gekopieerd, die u op de backend van uw website kunt plakken. Het is zo makkelijk. Dit is een handige tool waarmee je met één klik geweldige kleuren kunt gebruiken.

Typografie aanpassen

U wilt ook uw eigen typografie gebruiken om uw website te laten opvallen. Websites hebben normaal gesproken 2-3 lettertypen. Je hebt een lettertype voor de koppen of het menu, een lettertype voor de hoofdtekst en een extra ‘poplettertype’. Net als kleuren kun je niet zomaar elk lettertype gebruiken. Je moet ervoor zorgen dat ze er samen goed uitzien en de juiste boodschap over je merk uitzenden.

Ik gebruik graag Fontpair.co dat is een website die je laat zien hoe twee verschillende lettertypen er samen uitzien.

met behulp van fontpairs.co

Als je iets ziet dat je leuk vindt, noteer dan hoe het heet, zodat je naar WordPress kunt gaan en het daar direct kunt toevoegen.

Ik gebruik ook graag WhatFont, een Google Chrome-extensie die je vertelt welk lettertype op elke website wordt gebruikt. WhatFont installeren, Klik hier dan klikken Toevoegen aan Chrome. Dan zie je dit pictogram op je werkbalk:

whatfont icoon

Als je de naam van een lettertype wilt weten, klik je op dit pictogram en beweeg je je muis over de tekst. WhatFont vertelt u de naam van dit lettertype en als u erop klikt, ziet u ook de lettergrootte, kleur, familie, stijl, gewicht en meer.

met behulp van whatfont

Een logo krijgen

U heeft ook een merklogo nodig om uw website te onderscheiden en uw merkidentiteit vast te stellen. Er zijn een aantal manieren om een ​​logo te krijgen. Je kunt het zelf proberen met een geweldige ontwerptool genaamd Canva. Het is behoorlijk populair omdat het ontwerpen zelfs voor beginners heel gemakkelijk maakt.

Canva wordt geleverd met veel logosjablonen die u kunt aanpassen om er zelf een te maken. Houd er echter rekening mee dat als u het logo met een transparante achtergrond wilt exporteren, u moet upgraden naar Pro (met een gratis proefperiode van één maand). Je kunt altijd in Photoshop of Fotopea om de achtergrond te verwijderen, maar dat voegt slechts een extra stap toe aan het proces.

canva logo's

Als je tijd wilt besparen, kun je gewoon een freelance logo-ontwerper inhuren om het voor je te doen. U kunt websites zoals Fiverr.com of 99design proberen, maar u moet voorzichtig zijn bij het kiezen van een artiest op basis van hun stijl, staat van dienst, recensies, beoordelingen en meer.

Uw website aanpassen

Nu is het tijd om die kleuren, lettertypen en logo’s op je website te gebruiken. Ga naar als u zich in het WordPress-backend-dashboard bevindt Verschijning > Aanpassen om de thema-aanpasser te openen.

thema aanpassen

Als u zich aan de voorkant van uw website bevindt en bovenaan een zwarte balk staat, kunt u klikken Aanpassen om de customizer te openen.

thema aanpassen

Zo ziet de thema-aanpasser eruit:

thema aanpassen

Hier kunt u uw logo uploaden, sitekleuren en typografie wijzigen, knoppen aanpassen en nog veel meer. De wijzigingen die u hier aanbrengt, worden realtime op uw website weergegeven, zodat u meteen kunt zien hoe het eruit ziet. Elk thema heeft ook verschillende aanpassingsopties, dus als u een ander thema dan Astra gebruikt, ziet u mogelijk verschillende opties hier.

Ga in Astra naar om de kleuren van uw site te wijzigen Kleuren en achtergrond. Je hebt de mogelijkheid om basiskleuren, broodkruimels, koptekst- en voettekstbalkkleuren te wijzigen.

kleur achtergrondeditor

De basiskleuren zijn het thema, de link, de tekst en de link-zweefkleur van uw website. Als u bijvoorbeeld de themakleur wilt wijzigen, klikt u op Selecteer kleur. Je ziet twee manieren om een ​​kleur te selecteren. Ten eerste kunt u een hex-code in een vak plakken. Dus als je een kleur hebt gevonden in Coolors.co of op andere plaatsen, kun je de Hex-code hier plakken. U kunt ook een kleur selecteren in een ingebouwde selectietool.

basiskleureditor

Om uw sitetypografie te wijzigen, gaat u terug naar het hoofdmenu van de aanpasser en klikt u op Typografie. Je kunt de basis-, broodkruimel-, inhouds- en blogtypografie wijzigen.

typografie-aanpasser

Vervolgens voegt u uw logo toe. Ga naar om uw logo te uploaden Indeling > Koptekst > Site-identiteit. Klik onder het gedeelte Logo op de Logo wijzigen knop en upload uw logo.

logo uploaden

Met Astra kunt u ook uw logobreedte aanpassen, zodat u kunt wijzigen hoe groot of klein u wilt dat het wordt weergegeven. Als u naar beneden scrolt, kunt u ook uw sitetitel wijzigen, een sitetagline en een sitepictogram of favicon toevoegen.

U kunt veel meer doen in het aanpassingsgebied van Astra, zoals het wijzigen van de breedte van uw site-inhoud, het wijzigen van de structuur van blogposts, het aanpassen van uw voettekst en koptekst, en meer. Bekijk hier uw opties om te zien wat u het beste bevalt voor uw website.

Als je klaar bent met aanpassen, vergeet dan niet te klikken Publiceren om uw wijzigingen live te laten gaan op uw site.

Stap 5. Uw website aanpassen met Elementor.

Op dit moment heb je de basisprincipes van het aanpassen, zoals het wijzigen van de sitekleur, typografie, het toevoegen van een logo en al dat soort dingen. Nu is het tijd om de kern van de details te bekijken en Elementor (of een willekeurige paginabuilder) te gebruiken om het uiterlijk van uw site volledig te veranderen.

Zoals ik eerder al zei, ga ik Elementor gebruiken in deze tutorial omdat ik denk dat dit het beste is, maar je kunt elke paginabuilder gebruiken waar je je prettig bij voelt.

Binnen Elementor kunt u vrijwel alles met uw website doen zonder een webontwikkelaar te coderen of in te huren. Elementen toevoegen is een eenvoudig proces van slepen en neerzetten.

Er zijn twee manieren om een ​​pagina met Elementor te bewerken. Klik eerst op als u zich in de WordPress-backend bevindt Pagina’s en u zou een lijst moeten zien met alle pagina’s van uw website, inclusief pagina’s die automatisch zijn gemaakt met de Astra Site-sjabloon. Pagina’s die zijn gemaakt met een specifieke paginabuilder (bijvoorbeeld Elementor), worden als zodanig gelabeld:

Pagina's

Om een ​​pagina te bewerken met je paginabuilder, beweeg je je muis erover en klik je op Bewerken met (paginabuilder). In mijn geval zal dat zo zijn Bewerk met Elementor.

bewerk met elementor

Zodra je daarop klikt, word je binnen Elementor gebracht.

Een andere manier is als u zich op de frontend van uw website bevindt, naar de pagina gaat die u wilt bewerken en klikt Bewerk met elementor op de zwarte balk bovenaan:

bewerk met elementor

Elk van deze brengt je naar Elementor. Eenmaal binnen Elementor kun je verschillende afbeeldingen gebruiken voor je kop, teksten wijzigen, pictogrammen wijzigen en meer. U kunt beginnen door de teksten en afbeeldingen in de kop aan te passen aan uw bedrijf. Hier zijn een paar dingen die je kunt doen met teksten in Elementor:

teksten bewerken in elementor

Zoals u kunt zien, kunt u de tekst rechtstreeks in het gebied voor het bewerken van inhoud wijzigen, de grootte, het gewicht, de kleur en de typografie-familie wijzigen. Je kunt ook animaties toevoegen zoals eenvoudige vervagingen, zoomen en meer. Er zijn een heleboel dingen die u hier kunt doen om kruiden aan uw website toe te voegen.

U zou ook de afbeeldingen van uw website willen aanpassen aan de aard van uw bedrijf. Het wijzigen van de afbeeldingen op Elementor is heel eenvoudig. U hoeft alleen op de afbeelding te klikken en de opties verschijnen in de linkerzijbalk. U kunt een nieuwe afbeelding uploaden, de grootte wijzigen, een rand of schaduw toevoegen, een animatie toevoegen en meer.

afbeeldingen bewerken in elementor

Binnen Elementor kunt u ook knopteksten wijzigen, het gebied met getuigenissen aanpassen, meer elementen / blokken toevoegen zoals teksten, afbeeldingen, knoppen, video’s en meer.

Elementor Pro wordt geleverd met nog veel meer functies, zoals de mogelijkheid om formulieren toe te voegen (waarvoor meestal een plug-in van derden nodig is), de mogelijkheid om uw eigen lettertypen te uploaden, schuifregelaars toe te voegen, prijstabellen en prijslijsten toe te voegen, uw kop- en voetteksten aan te passen ( wat voor de meeste paginabouwers verboden is), en nog veel meer.

Als je Elementor Pro wilt kopen en tegelijkertijd gratis toegang wilt krijgen tot mijn Elementor Pro-cursussen, klik dan hier op deze link.

Stap 5. Stel WooCommerce in.

Het is nu tijd om WooCommerce in te stellen, de WordPress-plug-in die van elke website een online winkel maakt. Hiermee kunt u producten toevoegen, online betalingen accepteren, coupons maken, verzendkosten en belastingen instellen en nog veel meer.

WooCommerce was al voor mij geïnstalleerd door het Custom Print Astra Site-thema, dus nu moet ik naar binnen gaan en het instellen. Als je WooCommerce nog niet hebt geïnstalleerd, ga dan naar Plug-ins > Nieuw toevoegen en zoek naar WooCommerce.

Het eerste wat we moeten doen is naar toe gaan WooCommerce > Instellingen. U ziet 7 tabbladen: Algemeen, Producten, Verzending, Betalingen, Accounts en privacy, E-mails en Geavanceerd.

Laten we eerst eens kijken naar de Algemeen tabblad. Op dit tabblad kunt u uw winkeladres instellen, in welke landen u wilt verkopen en verzenden, en belastingtarieven inschakelen.

woocommerce algemene instellingen

Als u naar beneden scrolt, ziet u ook opties om coupons in te schakelen en aan te passen hoe prijzen worden weergegeven op uw website, inclusief de valuta, waar deze wordt weergegeven, enz.

Vervolgens is de Producten tabblad waar u productgerelateerde opties kunt instellen. U kunt instellen welke pagina uw winkelpagina wordt, wat er gebeurt wanneer bezoekers een product aan het winkelwagentje toevoegen, productafmetingen instellen, klantbeoordelingen in- en configureren en sterbeoordelingen inschakelen.

woocommerce productinstellingen

Bovenaan dit gedeelte heb je ook opties voor Voorraad en Downloadbare producten. In het gedeelte Inventaris, als je het vakje ernaast aanvinkt Voorraadbeheer inschakelen, ziet u een lijst met opties waarmee u uw voorraad kunt beheren. U kunt bijvoorbeeld de lage voorraaddrempel instellen, zodat wanneer uw voorraad dat aantal bereikt, u een melding ontvangt. U kunt er ook voor kiezen om voorraadartikelen van uw website te verbergen.

inventarisinstellingen woocommerce

Wat betreft de Downloadbare producten sectie is dit alleen relevant als u downloadbare inhoud verkoopt op uw website, dus als u puur fysieke producten verkoopt, kunt u deze overslaan. U heeft de mogelijkheid om kopers te vragen zich aan te melden voordat ze uw producten kunnen downloaden. U kunt na betaling ook toegang geven tot downloads.

downloadbare productopties

Het volgende tabblad is Verzending. Dit is alleen relevant als u fysieke producten verkoopt die naar kopers worden verzonden. Binnen dit tabblad zijn er drie subsecties: Verzendzones, Verzendopties en Verzendklassen.

In Verzendzones moet u verzendzones toevoegen en beschikbare verzendmethoden aan deze zones toewijzen. Dit duurt even als u naar verschillende landen verzendt.

verzendzones

Als je meer hulp nodig hebt met verzendzones, kun je de verzendzone van WooCommerce bekijken documentatie.

Vervolgens is de Verzendopties sectie. In deze sectie kunt u bepalen hoe de verzendkosten op uw website worden weergegeven en een standaard of de vereiste verzendbestemming instellen.

verzendopties

De laatste sectie in Shipping is Verzendklassen. Met verzendklassen kunt u verschillende verzendtarieven toewijzen aan een groep producten, bijvoorbeeld zwaardere producten die meer moeten worden gefrankeerd.

verzendklassen

Ga naar om uw verzendkosten in te stellen Verzendzones en maak of bewerk een bestaande verzendmethode zoals “Flat Rate”.

voeg een verzendkosten toe

Zodra je klikt Bewerk, er verschijnt een pop-upvenster. Hier kunt u het vaste verzendtarief en de extra kosten voor de zojuist gemaakte verzendklasse toevoegen.

verzendkosten van een verzendklasse

Als je meer hulp nodig hebt bij het configureren van je verzendinstellingen, kun je WooCommerce’s bekijken documentatie voor verzending.

Laten we nu verder gaan Betalingen. Op dit tabblad kunt u betalingsgateways zoals PayPal, directe overboeking, rembours en meer in- of uitschakelen. Zodra u een methode heeft ingeschakeld, klikt u op Opgericht om uw accounts te koppelen en betalingen te accepteren.

Betaalmethoden

Als u Stripe-betalingen wilt kunnen accepteren, kunt u een plug-in installeren met de naam WooCommerce Stripe betalingsgateway. Ga gewoon naar Plug-ins > Nieuw toevoegen en zoek naar de plug-in. Als u deze plug-in installeert en activeert, wordt de Stripe-betaalmethode in WooCommerce ingeschakeld, maar u moet hier wel op ingaan WooCommerce > Instellingen > Betalingen om het in te stellen.

In de Accounts en privacy tabblad kunt u instellingen configureren met betrekking tot het maken van een account en de privacy van gebruikers. U kunt ervoor kiezen om gasten te laten kopen zonder een account aan te maken, uw privacypagina en beleidspagina’s in te stellen en te kiezen hoe lang gebruikersgegevens worden bewaard.

accounts en privacy

Vervolgens is de E-mails tabblad waar u een lijst met e-mails ziet die WooCommerce automatisch verzendt op basis van bepaalde voorwaarden. Een nieuwe e-mail kan bijvoorbeeld worden verzonden naar een e-mailadres van uw keuze wanneer een nieuwe bestelling wordt geplaatst. U kunt ook e-mails bekijken met updates over bestellingen van klanten, zoals terugbetaalde of voltooide bestellingen.

E-mail notificaties

eindelijk, de Geavanceerd tabblad, dat het API-tabblad verving, laat je meer technische details configureren, zoals pagina-instellingen waar je WooCommerce kunt vertellen welke pagina zal fungeren als je winkelwagenpagina of afrekenpagina.

pagina-instellingen woocommerce

Als je naar beneden scrolt, kun je aanpassen wat WooCommerce noemt als eindpunten, die aanhangsels zijn bij de URL waarmee ze verschillende inhoud kunnen weergeven zonder dat een nieuwe pagina nodig is.

Stap 6. Voeg producten toe.

Als je klaar bent met de basisinstellingen van WooCommerce, is het nu tijd om producten toe te voegen. Het Astra Site-thema dat we in deze tutorial gebruikten, wordt al geleverd met voorbeeldproducten, en zo ziet een productpagina eruit op de frontend:

productpagina

Laten we nu eens kijken hoe we dit kunnen veranderen en onze eigen producten aan de backend kunnen toevoegen.

Klik op de menuoptie om een ​​nieuw product toe te voegen of een bestaand product te bewerken Producten op de linkerzijbalk in het WordPress-dashboard. Je ziet dan een lijst met alle producten die je hebt. Als u zich op de frontend van een productpagina bevindt, kunt u ook klikken Product bewerken op de zwarte balk bovenaan de pagina. Dit brengt u rechtstreeks in de producteditor.

product-editor

Hier kunt u de producttitel en productbeschrijving wijzigen. Als je naar beneden scrolt, zie je een sectie genaamd Productgegevens. Hier breng je de meeste tijd door. Hier kunt u het type product selecteren en van daaruit kunt u andere productinstellingen configureren.

Met WooCommerce kunt u deze soorten producten toevoegen:

  • Fysiek, downloadbaar, virtueel. Een virtueel product hoeft niet per se te worden gedownload. Een voorbeeld is een afspraak of een-op-een coaching sessie.
  • Eenvoudig product. Dit is een product met één artikel.
  • Gegroepeerd product. Dit is een bundel van verschillende producten.
  • Extern product. Producten die buiten uw website zijn gekocht, zoals een gelieerde link.
  • Variabel product. Een variabel product heeft variaties zoals kleuren en maten.
productsoorten

Telkens wanneer u een nieuw product maakt, is de eerste stap het kiezen van het type. Elk type wordt geleverd met een andere set opties. Een downloadbaar product heeft bijvoorbeeld deze opties:

downloadbare productopties

Aan de linkerkant van dit gedeelte ziet u meer opties voor voorraad, verzending, gekoppelde producten en meer.

In Voorraad, kunt u de SKU toevoegen, een specifiek aantal voorraden voor dit specifieke product opgeven, de voorraadstatus instellen en meer.

In Verzending, u kunt het gewicht en de afmetingen van het product specificeren en een verzendklasse toewijzen die we in de vorige stap hebben gemaakt.

verzending in productgegevens

In Gelinkte producten, u kunt een upsell- en cross-sell-item aan een product toewijzen. Een upsell is een product dat u aanbeveelt in plaats van het huidige product omdat het een hogere prijs heeft. Cross-sells zijn producten die u in de winkelwagen aanbeveelt op basis van het huidige product. Als u een upsell of cross-sell wilt toevoegen, typt u de naam van het product in de bijbehorende vakken.

gekoppelde producten

U kunt ook attributen aan uw producten toevoegen in de Attributen sectie. Het kan grootte, kleur, gewicht, etc. zijn. Als u een variabel product maakt, moet u hier eerst een kenmerk toevoegen. Als je meer wilt weten over het maken van een variabel product, ga dan naar WooCommerce’s gids hier.

Als u naar beneden scrolt Productgegevens vak ziet u een gebied waar u een korte productbeschrijving kunt toevoegen. Deze beschrijving verschijnt naast uw product en tegen de prijs. Houd het kort en krachtig. U kunt aan de rechterkant een productafbeelding toevoegen. Als u meer productafbeeldingen heeft, kunt u deze toevoegen in de Product galerij sectie.

korte beschrijving en productafbeelding

Het is ook belangrijk om de zichtbaarheid van de catalogus in te stellen, die u bovenaan de pagina onder kunt vinden Publiceren. In sommige gevallen wilt u bepaalde producten misschien verbergen omdat u het misschien als cross-sell aanbiedt met een exclusieve kortingsprijs. Dit is waar je dat kunt doen.

zichtbaarheid van de catalogus

Als je klaar bent met alles hier, klik je op Bijwerken om al uw wijzigingen op te slaan.

Als u meer wilt weten over de verschillende producttypes en hoe u ze op de juiste manier kunt maken, dan is dit WooCommerce-gids is een geweldige plek om te beginnen. Blijf meer producten aan uw website toevoegen met exact dezelfde stappen die ik u hier heb laten zien totdat u uw productvermeldingen opbouwt.

Stap 7. Pas uw kassa’s aan.

WooCommerce is een geweldige plug-in zoals je tot nu toe hebt gezien, maar een veelgehoorde klacht is het gebrek aan afrekenopties. U kunt niet wijzigen hoe de betaalpagina’s eruit zien en u kunt er geen verkooptrechter mee maken. Een verkooptrechter is een geweldige manier om de aankoopwaarde van een klant te verhogen, dus als u deze niet op uw website heeft, laat u echt geld op tafel liggen.

Als u een verkooptrechter voor uw e-commerce website wilt maken, is CartFlows de beste plug-in die kan helpen. Het is een WordPress-plug-in voor het maken van trechters waarmee u prachtige en zeer effectieve trechters kunt maken in WordPress.

cartflows

Als je meer wilt weten over het maken van een verkooptrechter met CartFlows, kun je deze tutorial bekijken die ik heb gemaakt.

Stap 8. Blijf op de hoogte van het verlaten van de winkelwagen.

Voordat ik deze tutorial afsluit, wil ik nog één ding toevoegen over het verlaten van de winkelwagen. Het is een feit in e-commerce dat veel klanten hun winkelwagentje verlaten zonder de aankoop te voltooien.

Dit kan verschillende redenen hebben. Ze waren misschien afgeleid, de stroom of de verbinding viel uit, er kwam iets urgents naar boven. Wat het ook is, veel van deze verlaten winkelwagentjes gaan verloren als u er niets aan doet.

Gelukkig wordt er een plug-in genoemd WooCommerce Cart Abandonment Recovery plug-in die bijhoudt en automatisch vervolg-e-mails stuurt naar klanten met verlaten winkelwagentjes – allemaal GRATIS!

Als je het Astra Site-thema had gebruikt dat ik hier heb gebruikt, zou deze plug-in al voor je zijn geïnstalleerd. Maar zo niet, dan kunt u het installeren door naar te gaan Plug-ins > Nieuw toevoegen en zoek naar de plug-in.

Het zal een nieuwe optie creëren onder WooCommerce genaamd Verlaten winkelwagen. Als u hierop klikt, ziet u een overzicht van hoeveel verlaten winkelwagentjes u heeft, hoeveel er zijn hersteld en hoeveel verloren zijn gegaan.

herstelbare bestellingen winkelwagen verlaten

Je kunt ook de vervolg-e-mails aanpassen die WooCommerce verstuurt door over te schakelen naar Follow-up e-mails tabblad, beweeg uw muis over de e-mail die u wilt bewerken en klik op Bewerk.

vervolgmails

U wordt dan naar de e-maileditor geleid:

het aanpassen van vervolgmails

Afsluiten

Het maken van een e-commerce WordPress-website lijkt misschien ingewikkeld en overweldigend, maar ik hoop dat ik er een licht op heb geworpen en heb laten zien hoe je het allemaal zelf kunt doen met een beetje hulp. Ik ben benieuwd naar uw succesverhalen en als u hulp nodig heeft, kunt u contact met mij opnemen in de sectie Opmerkingen hieronder.

SiteGround

SiteGround is een sterk aanbevolen webhost online omdat ze zich hebben toegelegd op WordPress-gebruikers en toch een betaalbare prijs hebben. Ze staan ​​vooral bekend om hun snelle prestaties en even snelle ondersteuning.

Belangrijkste kenmerken van SiteGround:

  • Gratis SSL-certificaat
  • SNEL geïnformeerde ondersteuning
  • WordPress Staging Enviroment
  • Gratis website-migraties
  • Dagelijkse back-ups

SiteGround is een solide keuze voor uw webhostingbehoeften. Ze spelen in op WordPress-websites en bieden minder middelen dan hun concurrenten, maar een hogere betrouwbaarheid.

Bekijk SiteGround

Astra-thema

Astra is een gratis WordPress-thema dat is gericht op snelheid. Optioneel kun je de Pro-versie kopen voor $ 59, wat een aantal extra instellingen en opties toevoegt.

Belangrijkste Astra-themafuncties:

  • Niet het Fastes-thema, maar het is geen flauw idee
  • Veel gratis demosites
  • Flexibele Mega-menufunctie
  • Aangepaste lay-outopties
  • WooCommerce-ondersteuning
  • LearnDash-ondersteuning

Astra Theme is een goede keuze voor elk WordPress-webontwerpproject. Ik veronderstel dat de grootste vraag is of je tegenwoordig zelfs een thema moet kopen, omdat paginabouwers allemaal dezelfde dingen doen waarvoor je een thema nodig hebt. Elementor heeft bijvoorbeeld het gratis Hallo-thema waarmee uw paginabouwer al het werk kan doen.

Er zijn nog steeds enkele goede redenen om een ​​pro-thema te kopen, maar voor de meeste mensen zullen ze waarschijnlijk een gratis thema hebben.

Voor mij denk ik echter dat Astra Theme de huidige trends niet heeft bijgehouden en ik raad het niet langer aan.

Er zijn veel betere moderne thema’s beschikbaar die ingebouwde builders voor kop- en voetteksten bieden in vergelijking met drie lay-outs, plus flexibelere pagina- en postlay-outs.

Bekijk Astra Theme

Elementor

Elementor is een WordPress-paginabuilder die het webdesign van WordPress stormenderhand heeft veroverd. Het heeft de diepste functieset, maar is toch heel gemakkelijk te gebruiken en te beheersen. Elementor is de meest complete gratis paginabuilder. Er is ook een Pro-add-on om extra ontwikkelaarsfuncties toe te voegen.

Belangrijkste Elementor-functies:

  • Live Front End Page Editor
  • Website-personalisatiefuncties
  • Sjabloon- en blokbibliotheek
  • Uitgebreide mobiele responsieve opties
  • Krachtigste Popup Builder
  • PRO Maak aangepaste kopteksten / voetteksten
  • PRO Maak berichttype-indelingen

Elementor is de sterkste paginabuilder die momenteel beschikbaar is. Ze brengen consequent nieuwe functies uit die in lijn zijn met de huidige designtrends. Dit betekent dat u uw website relevant kunt houden.

Elementor Pro is een ongelooflijke waarde gezien alle extra modules en vermogensfuncties die het bevat.

Als ik vandaag een nieuw websiteproject zou starten, zou Elementor de paginabuilder zijn die ik zou kiezen. Ik beschouw het als een must-have WordPress paginabuilder die een genot is om te gebruiken.

Bekijk Elementor

CartFlows

CartFlows is een sales funnel builder voor WordPress. Hiermee kunt u snel en eenvoudig verkooptrechters bouwen met uw paginabuilder naar keuze.

Belangrijkste kenmerken van CartFlows:

  • Professioneel ontworpen sjablonen
  • 5 Locatie volgorde hobbels
  • Upsells met één klik
  • Gebruik uw favoriete paginabuilder
  • Uitbreidbaar in tegenstelling tot kliktrechters
  • Afteltimers en split-testen

Als je een sales funnel builder voor WordPress wilt en het prima vindt om jezelf te hosten of beheerde WordPress-hosting te gebruiken, dan is CartFlows een geweldige optie omdat het super eenvoudig te gebruiken en toch zeer krachtig is.

Bekijk CartFlows

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