Hoe u een fantastische online winkel kunt maken met WooCommerce, Divi als SiteGround (Sep 2021)

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 op 15 januari 2015 en is 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 vrij mooie optie om te overwegen. Het kan worden gebruikt voor een standaard zakelijke website, maar het bevat ook integraties voor e-commerceverkoop en snelle verkoopprocessen. Laten we leren hoe u een online winkel kunt maken met de 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 aan hosting- en domeinnamen te komen, maar persoonlijk denk ik SiteGround is een van de meest veilige en betrouwbare opties. (Voor meer details bekijk onze uitgebreide SiteGround beoordelen).

Wat echt cool is, is dat SiteGround biedt een gespecialiseerd beheerd 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, een andere hostingservice die we ten zeerste aanbevelen Divi WooCommerce winkels is BlueHost. Hoewel de functies hier niet overeenkomen met SiteGround's, je krijgt nog steeds WooCommerce-gerichte hosting via zijn WordPress e-commercepakket. De plannen kunnen comfortabel omgaan met een Divi WooCommerce store, maar helaas krijg je geen managed services.

👉 Laten we nu voor de duidelijkheid verder gaan SiteGround...

Hoe begin je eraan?

Ga naar uw 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 onbeperkt ondersteunt WooCommerce websites met geavanceerde e-commercemogelijkheden. 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 onder WooCommerce kooplieden. Maar gelukkig blijkt dat ze PayPal-betalingen kunnen accepteren, zij het indirect.

Als dit uw voorkeursmodus is, laat de velden dan gewoon leeg en neem contact op SiteGroundverkoopagenten van 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.

Nu, om de gegevensoverdrachtafstand tussen Siteground's servers en uw WooCommerce bezoekers van de site, kiest u de datacenterlocatie die het dichtst bij uw doelmarktgebied ligt.

Kies vervolgens eventuele extra aanvullende services die u in uw pakket wilt opnemen, en voila! Dat is alles wat nodig is om een Siteground account.

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 installatieproces van WordPress een paar seconden duurt, omdat het allemaal geautomatiseerd is. En nadat alles is ingesteld, SiteGround geeft u de juiste domeinnaam om toegang te krijgen als u dingen aan de achterkant 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 niet gewoon WooCommerce thema. Het is trouwens een van de meest populaire WordPress-thema's op elegante thema's. En, interessant genoeg, Divi is Elegant themaHet vlaggenschipproduct.

Dus, 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, Divi is meer een uitgebreid pakket. Dat betekent dat het standaard themafuncties combineert met extra functionaliteiten die van pas komen Divi WooCommerce winkels.

wat divi

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

Om het af te maken, Divi wordt geleverd met zijn eigen intuïtieve plug-in voor het maken van WordPress-pagina's. U kunt het gebruiken om uw Divi WooCommerce opslaan zonder enige codering.

Eigenlijk, Divi is ontwikkeld voor beginners. U kunt dus een keurig bedieningspaneel verwachten met bijna geen leercurve. Het duurt maar een paar minuten om het geheel onder de knie te krijgen Divi ecosysteem, stel het in en pas het aan Divi's WooCommerce lay-outs.

👉 Uiteindelijk zult u dus kunnen profiteren Divi'S:

  • Een reeks 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 volledig functioneel instellen en aanpassen Divi WooCommerce winkels.
  • Eenvoudige WordPress-integratie. Divi is een van de weinige externe WordPress-thema's die naadloos kunnen worden geïnstalleerd zonder ingewikkelde aanpassingen.
  • E-commerce geoptimaliseerd WooCommerce sjablonen.

Divi Page Builder slepen en neerzetten

Zoals we hebben gezegd, Divi komt in twee verschillende smaken. Wanneer u voor lidmaatschap betaalt op Elegante thema's, je vindt de standaard Divi Thema op het dashboard, vergezeld van de Divi Plug-in voor WordPress Page Builder.

Maar het is vermeldenswaard dat deze bouwer niet exclusief is gebonden aan de Divi Thema. Het wordt geleverd als een extra plug-in voor elk afzonderlijk thema dat is verkregen van Elegant Themes.

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 a Divi WooCommerce beginner zou hopen te krijgen.

divi settings

Maar vergis u niet. Hoewel de Divi Page Builder richt zich op beginners, het is 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.

Nu ik erover nadenk, je hebt geen ontwikkelaar nodig om alle elementen in je Divi WooCommerce op te slaan. 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 daarover gesproken, een andere opmerkelijke bepaling is hier Divide algehele vereenvoudiging van het proces voor het aanpassen van de lay-out. Als u bijvoorbeeld een nieuwe sectie wilt introduceren, zou een enkele klik voldoende moeten zijn. Vervolgens dupliceren, verwijderen en invoegen van modules voor uw Divi WooCommerce store kost u slechts een paar klikken op de knop.

Ondertussen DiviIn het bewerkingsvenster van uw site worden de lay-outwijzigingen van uw site in realtime weergegeven. U kunt elke afzonderlijke aanpassing visueel volgen en zien hoe deze het algehele outlook-ontwerp van uw Divi WooCommerce slaan.

Vooraf ontworpen Divi WooCommerce website lay-outs

Om u te behoeden voor het pijnlijk veeleisende proces van het maken van een geheel nieuwe website, is de Divi WordPress-thema wordt geleverd met een groot aantal vooraf ontworpen sitesjablonen. En aangezien u mogelijk verschillende lay-outopties van dezelfde sjabloon nodig heeft, Divi biedt zijn website-ontwerpen aan als uitgebreide pakketten. Bijgevolg krijgt u verschillende sjabloonlay-outs en kleuren.

Nou, om preciezer te zijn, Divi biedt ongeveer 7-8 verschillende vooraf ontworpen lay-outs voor elk afzonderlijk websitepakket. Aangezien ze allemaal volledig gebouwd zijn, kunt u de lay-outs gemakkelijk overnemen zonder de onderliggende structuur uitgebreid te herwerken. Je hebt maar een paar kleine aanpassingen hier en daar.

divi website-indelingen

Nu om jezelf een perfecte te vinden voor jou WooCommerce online winkel, bladert u eenvoudig door de verschillende sitecategorieën op het Divi Thema. Of gebruik trefwoorden om alle opties tegelijk te doorzoeken.

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

Verderop, een bijzonder opmerkelijk ding dat je opvalt, is dat Divi concentreert zich niet alleen op uiterlijk. De WooCommerce lay-outs die bij de Divi Thema is ook gebouwd met functionaliteit in gedachten.

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

Is Divi Geschikt voor WooCommerce?

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

Gecombineerd, de Divi Page Builder en Divi thema bieden vrijwel alles wat u nodig heeft om elk type WordPress-site op te zetten. En dat omvat een volledig functionele WooCommerce winkel met alle kernmogelijkheden voor e-commerce.

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

  • U kunt uw aanpassen WooCommerce website via een visuele editor met slepen en neerzetten.
  • Divi stelt u in staat uw tweaks op te slaan 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 met meerdere kolommen, rijen en inhoudselementen.
  • Alles 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: Meld u aan met elegante thema's om toegang te krijgen Divi

Begin door naar de Elegante thema's productpagina voor de Divi WordPress-thema. Deze pagina biedt de mogelijkheid voor een themademo en een snelle downloadknop. Elegant Themes verkoopt zijn thema's met behulp van een jaarlijkse of eenmalige betalingsstructuur, wat handig is voor ontwikkelaars met meerdere klantensites of mensen die talloze e-commerce websites runnen. Je kunt niet echt één thema kopen, maar de 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: installeren 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

Als je naar de Divi Thema documentatie pagina 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 daar al uw producten van kunt laten zien.

Wat geweldig is, is dat de initiaal SiteGround aanmelding al geïnstalleerd WooCommerce op uw WordPress-website, zodat u zich 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 ingesteld, maar we willen eigenlijk enkele producten toevoegen om het eruit te laten zien als een e-commercesite op de frontend. 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: Verken The WooCommerce Functies

Als u onder het beschrijvingsgedeelte naar beneden scrolt, vindt u alles wat mogelijk is WooCommerce functie om mee te spelen. Voel je vrij om zaken als SKU-nummers, voorraad, prijzen, verzending en attributen aan te passen. De functies zijn veel te uitgebreid om ze hier allemaal te beschrijven, maar je kunt naar het WooCommerce documentatiepagina om alles te begrijpen wat u kunt instellen op uw e-commercesite.

WooCommerce functionaliteiten

Stap 8: maak de startpagina

Het hele punt hiervan is om maak een startpagina of een gewone pagina met al uw producten wanneer mensen uw site bezoeken. Ga daarom naar Pagina's> Nieuw toevoegen 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 actief met een SiteGround hostingaccount.

Vooruitkijkend, kunt u erop vertrouwen SiteGround zal alle kritieke technische zaken afhandelen, zoals WordPress-updates en WooCommerce veiligheid. Dat is het fundamentele verschil tussen beheerd WooCommerce hosting en reguliere shared hosting-oplossingen. Daarom geeft het u de broodnodige tijd en ruimte om u op uw WooCommerce winkel management.

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

Als u vragen hebt over het instellen van de Divi WordPress-thema, laat het ons weten in de comments 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 mijzelf. Bekijk mijn huidige top 10 bouwers van e-commerce-sites.