Hoe maak je een fantastische online winkel met WooCommerce, Divi en Bluehost (januari 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 je begint met het bouwen van je e-commerce website, heb je zeker veel keuzes te maken, en WordPress sluit hier op aan. Welke van de opvallende ecommerce-platforms kies je? Bent u van plan om een ​​thema te pakken om uw producten te verkopen of is er iemand die u kunt betalen om de site vanaf nul te bouwen? Wat denk je zelfs van verkopen via je e-commerce website? 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 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 redelijk mooie optie die u kunt 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 ik persoonlijk denk dat Bluehost een van de meest veilige en betrouwbare opties is (kijk voor meer informatie over mijn Bluehost-beoordeling).

Wat echt cool is, is dat Bluehost biedt een WordPress + WooCommerce-integratieplan dat geeft je alles wat je nodig hebt om online te verkopen.

Hoe kom je aan de slag?

Naar de Bluehost-pagina die spreekt over de integratieen klik vervolgens op de knop Nu aan de slag.

Houd er rekening mee dat deze service begint bij $ 11.95 per maand, en het lijkt sterk op hoe u een gewone WordPress-site op een Bluehost-hostingaccount zou installeren.

Het grootste verschil is dat WooCommerce is al geïnstalleerd. Bovendien ontvangt u het volgende:

  • Positieve SSL-e-commercebeveiliging
  • Een speciale ondersteuningslijn
  • Ten minste 100 GB aan websitaruimte
  • Ongemeten bandbreedte
  • 100 e-mailaccounts
  • Gratis domeinen
  • Een speciale IP

woocommerce_and_wordpress

Verderop kunt u het plan kiezen waarvoor u wilt betalen en naar de volgende pagina gaan.

choose_your_plan

Daarna kunt u nieuwe domeinnamen uitproberen om erachter te komen of wat u zoekt nog steeds beschikbaar is. Zodra u een beschikbare domeinnaam vindt die bij uw merk past, gaat u naar de volgende pagina.

BlueHost-domeinregistratie

Hierna typt u al uw persoonlijke gegevens, betalingsgegevens in en beslist u welk type jaar- of maandelijks hostingplan u wilt gebruiken. Het wordt goedkoper naarmate je je vanaf het begin aanmeldt.

package_information

U kunt doorgaans alle extra add-on-rommel overslaan, tenzij u er echt op gebrand bent om te betalen om een ​​back-up van uw site te maken of te betalen voor privacybescherming. Over het algemeen heb je dit niet nodig of kun je het later gratis krijgen. Daarna kunt u uw inloggegevens voor uw Bluehost-account maken, die u vervolgens naar het CPanel brengt. Nadat u bent ingelogd op het CPanel, navigeert u naar het gedeelte Website Builders, klikt u op WordPress en doorloopt u het proces om WordPress op uw site te krijgen.

BlueHost-website-bouwers

Dit duurt meestal maar vijf minuten, want het is allemaal geautomatiseerd en u hoeft alleen maar enkele inloggegevens in te voeren om u aan te melden bij de backend van uw site. Nadat alles is ingesteld, krijgt u de juiste domeinnaam om toegang toe te krijgen als u dingen aan de achterkant van uw site wilt wijzigen.

Uw online winkel creëren met Divi

Stap 1

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

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

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 Bluehost-aanmelding WooCommerce al op uw WordPress-website heeft geïnstalleerd, zodat u zich geen zorgen hoeft te maken over de installatie of het instellen ervan. Het zou al in je dashboard beschikbaar moeten zijn.

Stap 5

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 uw 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

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

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

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

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.

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.