Hoe maak je een fantastische online winkel met WooCommerce, Divi en SiteGround (augustus 2019)

Meer dan 74 miljoen sites zijn afhankelijk van het WordPress-platform om hun blogs te hosten, hun producten te verkopen of gewoon hun dagelijkse overpeinzingen voor de wereld te schrijven. Wanneer u begint met het bouwen van uw e-commerce website je hebt zeker veel keuzes te maken, en WordPress sluit hier op aan.

Welke van de opvallende e-commerce platforms zal je kiezen? Ben je van plan een thema te pakken om je producten te verkopen of is er iemand die je kunt betalen om de site vanaf nul te bouwen? Wat denk je zelfs van verkopen via je e-commerce website?

Noot van de redacteur: dit bericht is oorspronkelijk gepubliceerd in januari 15, 2015 en volledig vernieuwd en bijgewerkt voor nauwkeurigheid en volledigheid.

Er zijn duizenden tot miljoenen WordPress-thema's om uit te kiezen wanneer u op zoek bent naar de structuur van de frontend en de backend om online te verkopen. Bijna hetzelfde met hosting (maar wij geven er de voorkeur aan SiteGround or Bluehost).

De beste thema's zijn snelle en eenvoudige tools voor e-commercebeheer, zodat u producten kunt uploaden en dingen zoals kortingen, beloningen, knoppen en productpagina's kunt beheren. Uw thema is ook het eerste dat mensen te zien krijgen wanneer zij uw site bezoeken. Het begeleidt hen door het proces en draagt ​​echt het verschil tussen iemand die tevreden is met de ervaring of niet.

Kortom, WordPress-thema's zijn cruciaal, en de Divi WordPress-thema van Elegant Themes is een nogal mooie optie voor u om te overwegen. Het kan worden gebruikt voor een standaardbedrijfswebsite, maar het bevat ook integraties voor e-commerceverkoop en snelle verkoopprocessen. Laten we leren hoe we een online winkel kunnen creëren met het Divi WordPress-thema.

Krijg eerst je domein en hosting

????De eerste stap in het maken van een website is het grijpen van een hostingaccount, domeinnaam en het installeren van WordPress op de site. Divi is niet anders. Er zijn tal van manieren om hosting en domeinnamen te krijgen, maar persoonlijk denk ik dat SiteGround een van de meest veilige en betrouwbare opties is. (Voor meer informatie bekijk onze uitgebreide Siteground beoordeling).

Wat echt cool is, is dat SiteGround een specialist biedt beheerde WooCommerce-hosting servicepakket met vrijwel alles wat u nodig hebt om online te gaan verkopen. Binnen het pakket kunt u genoegen nemen met de Start Up Plan voor beginners, GrowBig Plan voor groeiende bedrijven, of GoGeek voor gevestigde WooCommerce-winkels.

Elk van deze biedt geavanceerde functies voor het optimaliseren van uw WooCommerce-site tegen een redelijke prijs.

Dat gezegd hebbende, is een andere hostingservice die we ten zeerste aanbevelen voor Divi WooCommerce-winkels BlueHost. Hoewel de functies hier niet overeenkomen met die van SiteGround, krijg je nog steeds WooCommerce-gerichte hosting via het WordPress e-commercepakket. De plannen kunnen comfortabel een Divi WooCommerce-winkel aan, maar helaas krijg je geen managed services.

👉 Laten we voor de duidelijkheid doorgaan met SiteGround ...

Hoe begin je eraan?

Naar de SiteGround Managed WooCommerce Hosting pagina, selecteer een ideaal plan en klik Krijg plan.

Naar mijn mening, de GoGeek-plan lijkt de meest geschikte optie omdat het onbeperkte WooCommerce-websites ondersteunt met geavanceerde e-commerce-mogelijkheden. Afgezien van meer serververmogen, krijgt u prioriteitsondersteuning, WordPress-staging, back-up op aanvraag en superchacher-bronnen, evenals gratis site-transfers en Cloudflare CDN, naast andere solide functies.

👉 En wat de toelagen van middelen betreft, biedt dit plan de volgende mogelijkheden:

  • 6GB-mailbox
  • 1 GB-databaseopslag
  • SSD-opslag
  • Niet-gemeten gegevensoverdracht
  • 30GB opslagruimte
  • Tot 100,000 maandelijkse bezoeken

Houd in gedachten dat deze service begint bij $ 11.95 per maand, en het lijkt erg op hoe u een normale WordPress-site op een BlueHost-hostingaccount zou installeren.

Maar vergeet niet, dat is een speciale prijs voor beginners. Verwacht dat het zal toenemen tot $ 34.95 bij toekomstige vernieuwingen, wat nog steeds een redelijke vergoeding is als je alle functies over de lange termijn bekijkt.

Nadat u uw gewenste abonnement heeft geselecteerd, SiteGround zal u naar de domeinregistratiepagina leiden. Als u al een domein bezit, kiest u de tweede optie en voert u de details in. Ga anders door met de registratie van een nieuwe domeinnaam voor $ 15.95 per jaar.

Hierna volgt de laatste fase, waarin u de gewenste hostingopties kiest en uw betalingsinformatie en persoonlijke gegevens invoert voordat u het account aanmaakt.

Nou, natuurlijk zijn dit basisspullen die je al vaker hebt behandeld. U zou dus geen problemen moeten hebben om uw telefoonnummer, land, naam, e-mailadres, accountwachtwoord, enz. In te voeren.

Voor het betalingsgedeelte moet u uw creditcardgegevens invoeren. U kunt doorgaan met beide Ontdek, MasterCard or Visa.

En nogal interessant, SiteGround vermeldt PayPal niet, ondanks de groeiende populariteit bij WooCommerce-verkopers. Maar gelukkig blijken ze PayPal-betalingen te kunnen accepteren, hoewel indirect.

Als dit uw voorkeursmodus is, laat dan de velden leeg en neem contact op met de verkoopagenten van SiteGround via de live chat-tool. Ze helpen u het proces via PayPal te voltooien.

Het laatste gedeelte bevat verschillende opties voor uw hostingservice, waaronder de locatie van uw voorkeursdatacenter, plus de abonnementsperiode.

Kies nu de datacenterlocatie die het dichtst bij uw doelgroepgebied ligt om de gegevensoverdrachtsafstand tussen de Siteground-servers en de bezoekers van uw WooCommerce-site te minimaliseren.

Kies vervolgens extra add-on-services die u in uw pakket wilt opnemen, en voila! Dat is alles wat nodig is om een ​​Siteground-account in te stellen.

Als u klaar bent, logt u in op uw account en gaat u rechtstreeks naar uw cPanel-gebied. U vindt een standaard automatisch WordPress-installatieprogramma. Dus selecteer het, voer uw WordPress-inloggegevens in en klik op de knop Installeren.

Nou, je zult merken dat het WordPress-installatieproces een paar seconden duurt, omdat het allemaal geautomatiseerd is. En nadat alles is ingesteld, geeft SiteGround u de juiste domeinnaam voor toegang als u dingen in de backend van uw site wilt wijzigen.

Uw online winkel creëren met Divi

Wat is Divi?

Ok, als je het niet hebt geprobeerd, ik wed dat je er al over hebt gehoord. Divi is geen gewoon WooCommerce-thema. Het is trouwens een van de meest populaire WordPress-thema's op Elegante Thema's. En, interessant, is Divi Elegant themaHet vlaggenschipproduct.

Wat is er zo speciaal aan dit thema? En is er iets opmerkelijks aan Divi's WooCommerce?

Nou, in tegenstelling tot typische WordPress-thema's, is Divi meer een uitgebreid pakket. Dat betekent dat het standaard themafuncties combineert met extra functionaliteiten die handig zijn voor Divi WooCommerce-winkels.

wat is divi

Begrijp me echter niet verkeerd. Hoewel Divi's WooCommerce-ondersteuning hier de belangrijkste focus is, is het thema veel meer dan dat. In wezen kan Divi naadloos worden geïntegreerd met elk type site, dankzij het brede scala aan website-indelingen. Niet alleen e-commerce.

Om het af te maken, heeft Divi zijn eigen intuïtieve plug-in voor het bouwen van WordPress-pagina's. Je kunt het gebruiken om je Divi WooCommerce-winkel vrij aan te passen zonder enige codering.

Divi is zelfs ontwikkeld voor beginners. U kunt dus verwachten een netjes bedieningspaneel te vinden met vrijwel geen leercurve. Het kost slechts een paar minuten om het hele Divi-ecosysteem onder de knie te krijgen, in te stellen en Divi's WooCommerce-lay-outs aan te passen.

👉 Uiteindelijk zult u dus kunnen profiteren Divi'S:

  • Serie van aanpasbare lay-outs voor elk type WordPress-website, inclusief WooCommerce online winkels.
  • Gebruiksvriendelijke Page Builder, die een groot aantal website-elementen en ontwerpmogelijkheden biedt.
  • Flexibel aanpassingsproces zonder enige vorm van codering. Zelfs beginners kunnen comfortabel functionele Divi WooCommerce-winkels opzetten en aanpassen.
  • Eenvoudige WordPress-integratie. Divi is een van de weinige externe WordPress-thema's die naadloos kunnen worden geïnstalleerd zonder complexe aanpassingen.
  • Voor e-commerce geoptimaliseerde WooCommerce-sjablonen.

Divi Drag and Drop Page Builder

Zoals we al zeiden, Divi komt in twee verschillende smaken. Wanneer u betaalt voor lidmaatschap op Elegante thema's, u vindt het standaard Divi-thema op het dashboard, vergezeld van de Divi WordPress Page Builder-plug-in.

Maar het is vermeldenswaard dat deze bouwer niet exclusief gebonden is aan het Divi-thema. Het komt als een extra plug-in voor elk thema dat is verkregen van Elegante Thema's.

Dat gezegd hebbende, de Divi WordPress Page Builder is een editor voor slepen en neerzetten met geavanceerde aanpassingsmogelijkheden. Hiermee kunt u elementen, kolommen, rijen en modules verplaatsen en definiëren zonder enige codeerervaring. Met andere woorden, het is het type bouwer een Divi WooCommerce beginner zou hopen te krijgen.

divi-instellingen

Maar vergis je niet. Hoewel de Divi Page Builder zich richt op beginners, is het een editor die ook ervaren ontwikkelaars faciliteert. Ze kunnen de visuele functies systematisch combineren met CSS-besturingselementen om hun Divi WooCommerce-websites naar een hoger niveau te tillen.

Nu ik erover nadenk, u hebt geen ontwikkelaar nodig om alle elementen in uw Divi WooCommerce-winkel te ontwerpen. U kunt alleen vertrouwen op visuele functionaliteiten.

En weet je wat?

Divi probeert zelfs het hele proces veel eenvoudiger te maken door de lay-outmodules te labelen en met kleuren te coderen.

En waarover gesproken, een andere opmerkelijke bepaling hier is Divi's algehele vereenvoudiging van het lay-outaanpassingsproces. Als u bijvoorbeeld een nieuwe sectie wilt introduceren, volstaat een enkele klik. Dan kost het dupliceren, verwijderen en invoegen van modules voor uw Divi WooCommerce store slechts een paar klikken op de knop.

Ondertussen geeft het bewerkingsvenster van Divi de lay-outwijzigingen van uw site in realtime weer. Je kunt elke aanpassing visueel volgen en zien hoe deze het algemene vooruitzichtenontwerp van je Divi WooCommerce-winkel beïnvloedt.

Vooraf ontworpen Divi WooCommerce website-indelingen

Om u te redden van het pijnlijk veeleisende proces om een ​​website helemaal opnieuw te maken, wordt Divi WordPress Theme geleverd met een groot aantal vooraf ontworpen sitesjablonen. En omdat u mogelijk verschillende lay-outopties van dezelfde sjabloon nodig heeft, biedt Divi zijn website-ontwerpen aan als uitgebreide pakketten. Bijgevolg krijgt u verschillende sjabloonlay-outs en kleuren.

Om precies te zijn, Divi biedt ongeveer 7-8 verschillende vooraf ontworpen lay-outs op elk afzonderlijk websitepakket. Gezien het feit dat elk volledig gebouwd is, kunt u de lay-outs gemakkelijk overnemen zonder hun onderliggende structuur uitgebreid te bewerken. Je hebt hier en daar een paar tweaks.

divi website-indelingen

Om nu de perfecte te vinden voor uw WooCommerce online winkel, bladert u eenvoudig door de verschillende sitecategorieën op het Divi-thema. Of gebruik sleutelwoorden om alle opties tegelijk te doorzoeken.

Nou, al met al duurt het niet lang om een ​​geschikte te identificeren Divi online winkel lay-out. Je hoeft het alleen maar te integreren met WooCommerce en je bent op weg om een ​​aantrekkelijke WordPress e-commerce site op te zetten.

Wat verder opvalt, is een bijzonder opvallend ding dat Divi zich niet alleen op uiterlijk richt. De WooCommerce-lay-outs die bij het Divi-thema horen, zijn ook gebouwd met functionaliteit in gedachten.

Dus, naast typische winkelpagina's zoals afrekenen, producten en winkelwagentje, bevat Divi standaard e-commercemodules. Meer specifiek krijgt u secties zoals aanbevolen producten, uitverkoopartikelen en nog veel meer.

Is Divi geschikt voor WooCommerce?

Alles bij elkaar genomen is Divi steeds populairder omdat het fundamenteel een alles-in-één WordPress-themaoplossing is.

Gecombineerd, de Divi Page Builder en Divi-thema biedt vrijwel alles wat je nodig hebt om elk type WordPress-site op te zetten. En dat omvat een volledig functionele WooCommerce-winkel met alle essentiële e-commerce-mogelijkheden.

👉 Kortom, Divi is een optie die het overwegen waard is voor uw WooCommerce-site omdat:

  • U kunt uw WooCommerce-website aanpassen via een visuele editor met slepen en neerzetten.
  • Met Divi kunt u uw tweaks opslaan als globale elementen in alle lay-outs.
  • Het wordt geleverd met meer dan 20 goed ontworpen, vooraf gebouwde website-indelingen.
  • U kunt de lay-outs eenvoudig exporteren en deze vervolgens op andere websites gebruiken.
  • U kunt uw WooCommerce-winkel ontwerpen met meerdere kolommen, rijen en inhoudselementen.
  • Alle WooCommerce-lay-outs zijn geoptimaliseerd voor mobiele apparaten.
  • Net als MS Word, het bewerken van tekstinhoud is net zo eenvoudig als klikken en typen.
  • Het volledige aanpassingsproces van de site wordt in realtime gevolgd, waardoor een live preview van alle ontwerpwijzigingen wordt gegeven.
  • WooCommerce-lay-outs worden geleverd met primaire online winkelpagina's en modules.

Stap 1: aanmelden met elegante thema's om toegang te krijgen tot Divi

Begin door naar de Elegante thema's productpagina voor het Divi WordPress-thema. Deze pagina biedt de mogelijkheid voor een themedemo en een snelle downloadknop. Elegant Themes verkoopt zijn thema's met behulp van een jaarlijkse of eenmalige betalingsstructuur die leuk is voor ontwikkelaars met meerdere klantensites of mensen die meerdere e-commerce websites draaien. Je kunt niet echt maar één thema kopen, maar het Persoonlijk plan voor $ 67 per jaar is vergelijkbaar met wat u voor een normaal thema zou kunnen betalen, en u kunt de jaarlijkse betalingen stopzetten als u de ondersteuning niet meer nodig heeft. Voel je vrij om rond te spelen met het thema voordat je je committeert aan de betaling.

Divi WordPress-thema

Stap 2: Installeer Divi op uw WordPress-site

Nadat je je hebt aangemeld, klik je op de downloadknop voor het thema. Hiermee wordt het thema als een zipbestand op uw computer geplaatst. Ga naar het tabblad Uiterlijk op de backend van uw WordPress-site en klik op de optie Thema's.

Wordpress nieuw thema

Stap 3: Klik op de knop Nieuw toevoegen

Wordpress voegt nieuw thema toe

Klik op de knop Thema uploaden. Zoek en upload het thema-zipbestand. Doorloop het proces om het thema volledig te activeren en dan zou u het thema op de frontend van uw site moeten kunnen zien.

Wordpress-thema-upload

Stap 4: stel uw WooCommerce Store in

Als je naar de Divi Theme documentatiepagina je zult zowat elke tool en functie vinden waarmee je aan het thema kunt werken, maar we gaan ons vooral richten op het opzetten van een e-commerce website. Het Divi-thema is volledig compatibel met WooCommerce, zodat u al uw producten daaruit kunt weergeven.

Wat geweldig is, is dat de eerste aanmelding bij SiteGround WooCommerce al op je WordPress-website heeft geïnstalleerd, zodat je je geen zorgen hoeft te maken over het installeren of instellen ervan. Het zou al beschikbaar moeten zijn in uw dashboard.

Stap 5: voeg uw eerste producten toe aan WooCommerce

Technisch gezien heb je de e-commercesite al helemaal in gebruik, maar we willen een aantal producten toevoegen om het op een e-commercesite op de frontend te laten lijken. Ga naar je WordPress-dashboard, klik op het tabblad Producten onder WooCommerce en klik op het item Product toevoegen.

WooCommerce nieuw product toevoegen

Stap 6

Hiermee wordt een nieuwe productpagina weergegeven die u kunt invullen. Het lijkt erg op elke WordPress-pagina-editor, behalve dat je een productnaam, beschrijving en een uitgelichte afbeelding kunt toevoegen, zodat mensen kunnen zien hoe het product eruit ziet op je website.

E-commerce voegt nieuwe productvelden toe

Stap 7: ontdek de WooCommerce-functies

Als je onderaan het beschrijvingsgebied naar beneden scrolt, vind je alle mogelijke WooCommerce-functies om mee te spelen. U kunt dingen zoals SKU-nummers, voorraad, prijzen, verzending en kenmerken wijzigen. De functies zijn veel te uitgebreid voor mij om ze allemaal hier te schetsen, maar je kunt naar de WooCommerce documentatiepagina om alles te begrijpen wat u kunt instellen op uw e-commercesite.

WooCommerce-functies

Stap 8: maak de startpagina

Het hele punt hiervan is om maak een startpagina of een normale pagina met al uw producten wanneer mensen op uw site komen. Ga daarom naar Pages> Add New aan de linkerkant van je WordPress-dashboard.

Wordpress nieuwe pagina

Stap 9: voeg een titel toe voor uw Divi-pagina

Maak een titel voor uw pagina. Klik bovenaan op de knop Paginabuilder gebruiken en tik op het gebied Modules invoegen om een ​​koptekst met de volledige breedte op te nemen. U hoeft geen koptekst met de volledige breedte te kiezen, maar we gaan deze tutorial gebruiken.

Paginabuilder wordpress

Stap 10

Klik op de knop Volledige breedte koptekst.

Voeg een kop toe

Stap 11

Vul de details in voor uw Sitetitel, Subkopertekst en Tekstkleur. U kunt zelfs het beheerderslabel wijzigen, dat hoofdzakelijk voor uw eigen referentie is. Druk op de knop Opslaan als je klaar bent.

Headeraanpassing

Stap 12

Tik op de drie balken links van de koptekstmodule Volledige breedte om meer instellingen te wijzigen.

WordPress woocommerce setup

Stap 13

Hier kunt u de koptekst een mooie achtergrondkleur geven en zelfs een video voor uw bedrijf opnemen.

Tweak deze knoppen rond

Stap 14

Nu de kop is voltooid, kunnen we de e-commercemodule opnemen door op het gebied Kolommen invoegen te klikken.

Instelling van Wordpress-e-commerce

Stap 15

Kies het aantal gewenste kolommen en klik vervolgens op de optie Modules invoegen die verschijnt. Selecteer onderaan de winkelknop.

Instelling van Wordpress-e-commerce

Stap 16

U kunt de manier waarop u uw producten wilt weergeven, wijzigen. U wilt misschien uw recente producten laten zien, samen met 12-items op de pagina, enkele kolommen en hoe u ze wilt laten bestellen. Klik op de knop Opslaan.

Instelling van Wordpress-e-commerce

Stap 17: Preview en publiceren

Zodra dit is voltooid, kunt u op de knop Voorbeeld of Publiceren klikken om wijzigingen op de frontend te bekijken. Zoals u ziet, worden de producten mooi weergegeven en kunt u altijd teruggaan om uw producten of storefront-instellingen te wijzigen in de WordPress-backend. Gefeliciteerd!

Als u vragen hebt over het instellen van de Divi WordPress-thema, laat het ons weten in de comments hieronder.

Conclusie

En dat is alles wat nodig is om uw te krijgen Divi WooCommerce online winkel in gebruik met een SiteGround hostingaccount.

In de toekomst kunt u er zeker van zijn dat SiteGround alle kritieke technische zaken zoals WordPress-updates en afhandelt WooCommerce veiligheid. Dat is het fundamentele verschil tussen managed WooCommerce-hosting en reguliere shared hosting-oplossingen. Het geeft u dus de broodnodige tijd en ruimte om u te concentreren op uw WooCommerce-winkelbeheer.

En zoals we al hebben gezien, zou dat een briesje moeten zijn met het Divi-thema. U hebt altijd toegang tot uw Divi WooCommerce-lay-out vanuit uw WordPress-backend om deze verder aan te passen. Als je wilt, kun je het hele ontwerp zelfs helemaal veranderen door naar een andere lay-out te gaan die ook een WooCommerce-winkel aankan. De keuze is aan jou.

Als je vragen hebt over het instellen van het Divi WordPress-thema, laat het ons dan weten in de opmerkingen hieronder.

Divi Rating: 5.0 - Beoordeling door

Catalin Zorzini

Ik ben een blogger voor webdesign en ben dit project gestart na een paar weken worstelen om erachter te komen welke dat is het beste e-commerceplatform voor mezelf. Bekijk mijn huidige top 10 bouwers van e-commerce-sites.