02. Webshop maken met WordPress + WooCommerce

Met de plugin WooCommerce verander je jouw WordPress website in een waanzinnige webshop.

Vandaag leren we de basis van WooCommerce door onze CV/Portfolio pagina om te toveren naar een webshop. Aan het einde van deze les heb je de volgende handelingen en begrippen ontdekt:

– WordPress permalinks (debuggen)
– WooCommerce Setup Wizard
– WooCommerce geavanceerde instellingen en aanpassingen
– Producten toevoegen
– Menu’s maken en wijzigen
– Betaalmiddelen toevoegen aan WooCommerce

Naslagwerk

‘WooCommerce is een enorm krachtige en uitgebreide plugin. WooCommerce is gemaakt voor kleine zelfstandige ondernemers, grote bedrijven en alles daartussenin. Wil je gebruik maken van alles wat WooCommerce te bieden heeft of loop je vast? Hieronder enkele links met alle informatie over WooCommerce:

Webtalis handboek WooCommerce >

Webtalis WooCommerce Setup Wizard >

Hostnet’s WooCommerce voor beginners introductie >

WooCommerce Getting Started Documentation >

PLAN VAN AANPAK

0. Inloggen WordPress

0.1
Log in op je eigen *jouwURL*.TwaanLab.academy webpagina via: *jouwURL*.TwaanLab.academy/wp-admin.academy/wp-admin

 

0.1.1 Let Op!
Het kan zijn dat je ipv jouw Dashboard je bij de Setup Wizard van WooCommerce komt. Klik dan nogmaals in op je adresbalk en typ jouw persoonlijke wp-admin inlog link weer in. Als het goed is kom je nu terecht op het Dashboard.

 

Wil je *jouwURL wijzigen naar een makkelijkere link zoals jan.TwaanLab.academy? Aan het einde van de les kan je bij Toine je persoonlijke URL aan laten passen.

1. WordPress herstellen

Soms gaat er iets mis met jouw WordPress website waardoor hij niet meer werkt. Door het geregeld maken van een backup kan je je website in no-time weer up-and-running hebben.

Afgelopen week is de website door onbekende reden gecrashed. De geuploade backup heeft alles teruggeplaatst maar jouw website werkt helaas nog niet helemaal. Hiervoor moeten we iets herstellen. Als je je website bekijkt lijkt alles in orde, totdat je op een link klikt, dan krijg je een ‘URL not found’ melding. Er lijkt dus een probleem te zijn met de interne links van de pagina’s. Dit is een veel voorkomend probleem bij het verhuizen of herstellen van WordPress websites. Dit kunnen we simpel verhelpen door WordPress zijn interne linkstructuur te herstellen.

 

1.1
Ga naar Settings > Permalinks

 

1.2
Hier vind je de instellingen hoe WordPress jouw pagina’s aan elkaar linkt. Verander de structuur van Day and Name naar Plain en bewaar de instellingen. Staat de structuur al op Plain, wijzig hem dan naar Day and Name, sla op, verander weer terug naar Plain én sla hem nogmaals op.

 

1.3
Bekijk je pagina. Nu zal je zien dat jouw WordPress site weer helemaal werkt!

Webshop opzetten met WooCommerce

2. WooCommerce instellingen

We gaan een webshop opzetten met de WooCommerce plug-in. Bij de installatie van de plug-in krijg je automatisch een Setup Wizard die jou door alle WooCommerce instellingen loodst. De WooCommerce plug-in is al geïnstalleerd op jouw website dus moeten we deze Setup Wizard handmatig uitvoeren.

 

2.1
Ga in je Dashboard naar WooCommerce

 

2.2
Om de Setup Wizard handmatig te doen ga je naar de link helemaal rechtsbovenin je scherm Help > Setup Wizard en dan Setup Wizard

 

2.3
De Setup Wizard helpt je met het instellen van de basis gegevens van je webshop én maakt voor jou de pagina’s aan die WooCommerce nodig heeft om te werken op jouw website. Vul de volgende gegevens in naar wens in de Setup Wizard:
Store Setup (adres e.d.)
Payment (welke betalingen ontvang je)
Shipping (verzendkosten)

3. WooCommerce aanpassen

Je hebt zojuist de basis instellingen van WooCommerce gemaakt. Vaak wil je meer instellen zoals het niet verzenden naar het buitenland of welke emails er verzonden worden na een bestelling.

 

3.1
Als je meer controle wilt over de instellingen van WooCommerce kan je gaan naar WooCommerce > Settings

 

3.2
Blader door alle tabbladen én subtabbladen om te bekijken wat je kan aanpassen. Pas aan wat jij anders wilt hebben.

Webshop vullen met producten

4. Producten toevoegen

Nu alles van onze webshop is ingesteld moeten we onze winkel gaan vullen met producten die te kopen zijn.

 

4.1
Onderzoek hoe je zelf producten kan toevoegen aan WooCommerce. In deze tutorial van Hostnet vind je alles over de instellingen van jouw producten, het toevoegen van producten en de verzendmethodes.

Wordpress Menu aanpassen

5. Menu aanpassen

Nu alles van onze webshop is ingesteld moeten we onze winkel gaan vullen met producten die te kopen zijn.

 

5.1
Ga naar Appearance > Menu

 

5.2
We moeten eerst een eigen Menu aanmaken. Typ Main in het vakje Menu Name en klik op Create Menu.

 

5.3
Geef het Main menu als locatie Primary en sla het Menu op.

 

5.4
In de linkerbalk staan de pagina’s die we toe kunnen voegen aan ons eigen gemaakte Menu. Voeg je CV/Portfolio pagina, Shop én Checkout pagina toe aan het Main Menu. Sla het Main Menu weer op.

 

5.5
Maak een tweede menu aan genaamd Submenu.

 

5.6
Voeg Cart en My Account toe aan het Submenu en geef hem de locatie Social mee.

 

5.7
Sla ook dit Menu op en bekijk waar alles terecht gekomen in door je website weer te bekijken. Zie je je links niet staan in het één of beide Menu’s? Dan zijn ze waarschijnlijk niet goed toegevoegd. Voeg ze dan nogmaals toe aan de Menu’s.

 

5.8
Wil je de volgorde van de links in de Menu’s aanpassen? Dat kan via Appearance > Menu, selecteer het Menu dat je wilt aanpassen, verschuif de pagina’s in de volgorde waarin jij hem wilt en sla het menu op.

 

5.9
Hier kan je ook de namen van de Menu links veranderen. Verander de naam in het Menu van Shop naar Winkel en van Checkout naar Afrekenen

Betaalmogelijkheden instellen

6. Mollie instellen

Onze winkel is bijna klaar. We moeten alleen nog zorgen dat we de betalingen van onze gebruikers kunnen ontvangen. Standaard heeft WooCommerce PayPal en Stripe als betaalmiddelen. In Nederland maken we veel meer gebruik van iDeal. Om iDeal op onze website te integreren maken we gebruik van de plugin Mollie.

 

6.1
Webtalis heeft een geweldige en uitvoerige uitleg over het instellen van Mollie. Je kan zijn video bekijken of de pagina doorlezen voor alle informatie, let wel op, je hebt hiervoor een Mollie Account nodig.

Extra: Abonnementen verkopen en betalingen ontvangen

§ Subscription (abonnement) toevoegen

Onze winkel is bijna klaar. We moeten alleen nog zorgen dat we de betalingen van onze gebruikers kunnen ontvangen. Standaard heeft WooCommerce PayPal en Stripe als betaalmiddelen. In Nederland maken we veel meer gebruik van iDeal. Om iDeal op onze website te integreren maken we gebruik van de plugin Mollie.

 

§.1
Met de plugin Subscription is het mogelijk geworden om abonnementen te verkopen via je webshop. Dit kan een abonnement zijn op een maandelijkse nieuwe wisky of een digitaal abonnement voor toegang tot jouw website. Hier vind je een uitgebreide video over abonnementen in WooCommerce met de Plugin Subscription. De Subscription plugin is al geïnstalleerd en kan je dus direct gebruiken.

Volgende week gaan we verder met het maken van onze wordpress website door het toevoegen van een menu, webshop en portfolio pagina. In de tussentijd is de website van jou, geef hem vorm, verander de inhoud en maak hem zo groot als jij wilt. Note: kom je erachter dat je een specifieke plugin of thema nodig hebt voor jouw wensen? Dit kan via Toine.

Volg ons!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *