Dat ik graag gebruik maak van het WordPress thema Astra zal geen verrassing zijn. Eerder schreef ik al eens een lovende recensie over Astra waarin ik je vertel waarom dit thema mijn favoriete WordPress thema is. Ook heb ik al eens een blog geschreven over hoe je een WordPress webshop maakt met WooCommerce. In dat artikel behandel ik echter niet een specifiek thema in tegenstelling tot deze blog post en gaan we dus een WordPress webshop maken met Astra. Hoe bouw je een WordPress webshop met Woocommerce en Astra? En waarom zou je voor Astra moeten kiezen? In dit artikel leg ik je uit hoe je een WordPress webshop kunt bouwen met Woocommerce en Astra.
Waarom Astra als WordPress thema kiezen?
Voordat je een webshop gaat bouwen met Woocommerce en Astra is het misschien wel handig om te weten waarom Astra zo’n fijn thema is. Ten eerste is het een licht thema. Dit betekend dat er niet allerlei onnodige functies zijn ingebakken. Astra biedt wel veel functies, maar heeft ook de mogelijkheid om uit te zetten wat je niet gebruikt.
Een ander groot voordeel, vooral voor ondernemers en mensen die niet de technische en grafische know-how hebben, vind ik de starter sites. Standaard heeft Astra al een aantal gratis starter sites, maar heb je de Agency bundel dan heb je toegang tot nog meer starter sites. Met deze starter sites heb je de basis al in handen. Het enige wat jij hoeft te veranderen zijn foto’s en teksten, je logo toevoegen en hooguit wat kleuren veranderen. Je hebt dus binnen no-time een website online staan.
Ben je meer een gevorderde gebruiker? Dan heb je de starter sites natuurlijk niet nodig en kun je zelf lekker aan de slag gaan om een mooie, unieke site te bouwen. Astra heeft veel opties om je website te customisen.
Tenslotte kan ik ook niets dan goeds melden over de support. Natuurlijk zit je wel met een tijdsverschil waardoor het iets langer kan duren voordat je een reactie krijgt. Ik heb echter altijd binnen 24 uur een reactie gehad en mijn problemen werden gelijk opgelost. Je kunt ook aangegeven wanneer je een support ticket aanmaakt hoe dringend je probleem is. Des te dringender je probleem, des te vlugger je een reactie kunt verwachten.
Waarom een webshop bouwen met Woocommerce en Astra?
Hopelijk heb ik je er van overtuigt dat Astra een prima keuze is. Dit betekend natuurlijk niet automatisch dat een thema goed overweg kan gaan met Woocommerce. Ik kan uit persoonlijke ervaring vertellen dat het bouwen van een webshop met Astra en Woocommerce goed werkt. Er zijn ook hier weer veel onderdelen die je kunt customisen. Ik heb ook met andere thema’s webshop gebouwd en moet zeggen dat ik Astra hier echt bovenuit vindt steken. Het is vaak lastig om toch een unieke look te creëren, maar dankzij de vele opties van Astra is een unieke look toch redelijk makkelijk te realiseren. Ook vind ik de afbeeldingen in je webshop een stuk duidelijk dan in bijvoorbeeld X Theme.
Astra heeft ook een gratis versie. Hiermee krijg je simpelweg de benodigde elementen om een webshop te bouwen. Persoonlijk zou ik Astra Pro aanraden. Hierbij krijg je namelijk veel meer opties. Voor de rest van dit artikel ga ik er dan ook vanuit dat je Astra Pro hebt aangeschaft. Natuurlijk is kun je natuurlijk met de gratis versie van het thema eerst het e.e.a. testen. De goedkoopste bundel kost $59, maar persoonlijk zou ik eerder voor de Mini Agency bundel kiezen. Deze kost weliswaar $169, maar biedt veel meer waarde voor je geld. Naast dat je meer starter sites tot je beschikking hebt, kun je namelijk ook kiezen uit extra add-ons voor Elementor (zou mijn keuze ook zijn) of Beaver Builder.
Heb je nog niet Astra Pro en wil je deze wel aanschaffen? Klik op onderstaande button.
Een webshop bouwen met Woocommerce en Astra
Laten we beginnen met het opzetten van onze webshop. Voordat je begint, moet je een aantal dingen in orde hebben:
Nadat je WordPress hebt geïnstalleerd en Astra hebt gekocht, kun je Astra downloaden bij je account op de Brainstorm Store pagina. Ga naar Account > Downloads en download alles bij Astra Pro. Download ook de Premium Starter Templates en Ultimate Add-ons for Elementor.
Wanneer je het Astra Child theme wilt dowloaden, wordt je doorgestuurd naar een volgende pagina. Klik simpelweg op “Generate” om het child thema te downloaden. Een child thema kun je aanpassen zonder dat je de aanpassingen verliest nadat je update naar een nieuwe versie. Daarom is het dus aan te raden altijd gebruik te maken van een child thema.
Eerst uploaden we het Astra thema (dus niet het child thema). Ga naar Weergave > Thema’s > Nieuw thema toevoegen. Klik op de button Thema toevoegen, kies het .zip bestand Astra.zip en klik op Nu installeren. Klik vervolgens op Activeren om het thema te activeren. Herhaal deze stappen voor de installatie van het Child thema.
Nu gaan we de add-ons installeren. Ga naar Plugins > Nieuwe Plugin > Plugin uploaden > Choose File. Kies voor het bestand astra-addon.zip en klik op Nu installeren. Klik na installatie op de knop Activeren. Ga naar Weergave > Astra Opties. Hier moet je je license key invoeren. Deze vindt je bij je account (op de Brainstorm Force store website). Ga naar Account > Licenses. Kopieer de key voor Astra Pro en vul deze in en klik op Activeer Licentie.
Herhaal dit voor Astra Pro Site. Klik na installatie op Activate License, vul je key en klik op de button. Voordat je de Ultimate Add-ons for Elementor kunt installeren, moet je eerst Elementor zelf installeren. Ga naar Plugins > Nieuwe plugin. Zoek op Elementor, installeer en activeer deze. Vervolgens kun je de Elementor Addons installeren en activeren.
Als laatste plugin moeten we Woocommerce installeren. Volg dezelfde stappen als bij het installeren van Elementor. Ga vervolgens naar Weergave > Astra Opties. Scroll naar beneden totdat je Woocommerce tegenkomt en klik op Activeren.
Starter website installeren en webshop bouwen
We gaan nu een starter website installeren. Ga naar Weergave > Starter Templates. Selecteer in de volgende stap Elementor als Page Builder. Klik op All en selecteer eCommerce om alle voor eCommerce geschikte templates te zien. Kies een template. Het maakt in principe niet zo veel uit welke je kiest. Persoonlijk vind ik Furniture Store mooi, dus deze ga ik installeren. Klik op Import Complete Website om de gehele website te importeren. De benodigde modules en plugins worden aangezet en geïnstalleerd. Wil je na installatie toch liever wisselen van template? Geen probleem. Installeer simpelweg een nieuwe, maar vink wel “Delete previous template” aan. Na het importeren staat de gehele website voor je klaar.
Je webshop vullen en instellingen
In principe heb je nu een webshop! Alle basics van het vullen van je webshop en instellingen heb ik al eerder beschreven in de blog Zo bouw je een WooCommerce webshop in WordPress. Al deze stappen zijn namelijk voor ieder thema exact hetzelfde. Ook ga ik in dit blog artikel dieper in op het koppelen van Mollie om gemakkelijk en veilig betalingen te ontvangen.
Omdat dit artikel gaat over hoe bouw je een webshop met Woocommerce en Astra ga ik in deze blog meer in op de specifieke bijzonderheden van Astra.
Je shop customizen
Ga naar Customizer > Woocommerce > Algemeen. Hier kun je bijvoorbeeld de sale notificatie aanpassen. Je kunt bijvoorbeeld de tekst aanpassen naar wat je zelf wil, bijvoorbeeld het aantal procenten dat je korting geeft op een artikel of een andere tekst. Je kunt ook de vorm van de sale notificatie aanpassen naar een vierkant, of omlijnde cirkel of vierkant. Hier kun je ook het icoon veranderen van je winkelwagentje.
Ga een stapje terug en kies voor Productcatalogus. Hier kun je o.a. kleuren aanpassen. Ook interessant is de off-canvas functie waarbij je bijvoorbeeld filters kunt instellen. Verder kun je instellen of er oneindig gescrollt kan worden of juist niet. Hoe je pagina nummers er uit komen te zien en nog veel meer. Mijn advies is om lekker een beetje te spelen met alle opties en te behouden wat je aanspreekt.
Op de productpagina kun je ook het e.e.a. aanpassen, maar dit is niet zo spannend. Leuker is de afreken pagina. Hier geeft Astra je echt veel opties. Afrekenen in stappen en Afleidingsvrije afrekenpagina zijn hierbij de meest interessante opties. Het afrekenen in stappen heeft als voordeel dat de klant kan zien hoe ver hij in het bestelproces zit. Afleidingsvrij is echt heel fijn, omdat klanten vaak tijdens het afrekenen afhaken. Door deze optie aan te vinken zorg je er voor dat de menu balk verdwijnt. Hierdoor kunnen klanten in het bestelproces dus niet direct naar een andere pagina navigeren waardoor de kans weer iets groter is dat ze hun bestelling afronden en betalen.
Ben je klaar met alle aanpassingen? Vergeet dan natuurlijk niet om op Publiceren knop te klikken om je aanpassingen op te slaan en live te zetten. Wil je tussentijds je aanpassingen opslaan, maar niet publiceren? Klik op het tandwieltje en sla als concept op.
Off-canvas sidebar
Ik heb het al even gehad over de off-canvas sidebar. Hier kun je dus allerlei handige filters toevoegen. Wanneer bezoekers dan op de button Filter klikken, komt de sidebar te voorschijn. Voor een goede werking moet je dan natuurlijk wel eigenschappen aan je producten toevoegen. Denk hierbij aan afmetingen, kleuren, maten, etc. Een voorbeeld van een webshop die gebruik maakt van een off-canvas sidebar is About You.
We hebben de off-canvas bar al aangezet, dus ga (na het publiceren van je aanpassingen) terug naar het Dashboard. Ga naar producten > Eigenschappen. Hier vul je een eigenschap in, zoals bijvoorbeeld kleur. Vervolgens klik je op Voorwaarden instellen. Hier vul je de verschillende kleuren in.
Nu ga je deze eigenschappen koppelen aan je producten. Ga naar Producten > Alle Producten. Kies een product, ga naar Eigenschappen en klik op de dropdown. Selecteer Kleur (of andere eigenschap) en kies de bijpassende kleur. Klik op Eigenschappen opslaan en werk je product bij. Doe dit voor al je producten. Ga vervolgens naar Weergave > Widgets. Hier kun je namelijk de verschillende filters een naam geven. Klik op Off-canvas Sidebar. Verander de titel bijvoorbeeld in “Filter op Kleur” of simpelweg “Kleur“. Sla op en ga naar je webshop. Klik op Filter. Nu verschijnt de Off-canvas sidebar met de gekozen widgets.
Hoe verder?
Ben je helemaal tot hier gekomen? Gefeliciteerd! Je hebt nu een volledig werkende webshop. Natuurlijk stopt het hier niet. Het beveiligen van je website is namelijk ook erg belangrijk. Ook is het handig om te weten hoe je je webshop zo snel mogelijk kunt houden. Daarom is dit wat aanvullend leesvoer zodat je van jouw webshop een succes kunt maken:
- Veel voorkomende webdesign termen uitgelegd
- 5 stappen die je moet ondernemen voordat je je website bouwt
- Complete checklist voor een succesvolle website lancering
- Trage WordPress website? Zo los je dit op!
- Astra WordPress thema review: gebruiksvriendelijk WordPress thema
- 8 tips om je website te NU verbeteren
- Een WordPress webshop bouwen? Zo zet je een webshop op met WooCommerce
- Reken af met spam op je website met anti-spam plugin CleanTalk
- Hoe houd je je WordPress website veilig? 6 maatregelen die je nu kunt nemen om jouw website te beveiligen
- De documentatie op de website van Astra
Zo bouw je een webshop met WooCommerce en Astra
Hoe bouw je een webshop met Woocommerce en Astra? Door dit stappenplan te volgen maak je op deze manier relatief eenvoudige manier een WordPress webshop. Astra maakt het je super gemakkelijk met de starter sites. Natuurlijk hoef je hier geen gebruik van te maken. Zeker wanneer je al wat ervaring hebt met het bouwen van websites met WordPress kun je er voor kiezen om zelf je website en webshop te bouwen.
Deze blogpost bevat affiliate links. Dit betekend dat ik een vergoeding krijg wanneer jij via deze links wat aanschaft. Uiteraard kost dit jou niets extra en beveel ik alleen producten aan die ik zelf gebruik en waarover ik meer dan tevreden ben.
