WordPress Webshop Tutorial

Ben je handig met WordPress en wil je graag een eenvoudige webshop opzetten? Dat kan, technisch gezien. Waarom deze tutorial? Om vervuiling van het Nederlandse webshop-landschap te stimuleren, óf – en zo bekijk ik het zelf liever – te zorgen dat de WordPress Webshops díe gemaakt worden, correct in elkaar zitten.

Tip: in april 2011 heb ik een geheel herziene tutorial geschreven op basis van commerciële plugin Shopp: “WordPress Webshop mét iDeal in 5 stappen”.

In deze tutorial leg ik je uit hoe je dat doet – een basic WordPress Webshop opzetten. Met iDEAL, enzo. Te beginnen met het selecteren van de juiste tools.

• Ik ga er van uit dat je ervaring hebt met WordPress.
• Ik ga er van uit dat je weet wat je wilt verkopen, en enigszins nagedacht hebt over een structuur waarin je producten wilt indelen.
• Deze tutorial is geschreven in april 2010. Ik heb de op dit moment meest actuele plugins gebruikt. Het is raadzaam regelmatig de gebruikte plugins te updaten.

Tools:

• WordPress 2.9.2 (website of direct in het Nederlands website);
• Thema: Vanilla Cart (oorspronkelijk bron – ShoppingThemes.com - biedt ‘m niet meer aan. Hier een mirror (niet doorvertellen): download);
• Plugin: WordPress e-Commerce Plugin 3.7.6 (website);
• Plugin: Contactform 7 (website);
• Script: iDEAL Basic/Lite Gateway (website).

Stap 1: installeer WordPress

Ik ga er vanuit dat dit je lukt. Zo niet, kijk dan even op de WordPress Website.

Zorg ervoor dat je de optie permalinks aan hebt staan, voor de zoekmachine-vriendelijke URL’s. Je doet dat hier:

WordPress Back-End > Instellingen > Permalinks

Stap 2: Thema’s en Plugins op de juiste locatie uploaden (via FTP)

Thema’s altijd in de map “/wp-content/themes/” & Plugins altijd in de map “/wp-content/plugins/”. Doe dit met een FTP-programma. Je ziet dan – na het juist geüpload te hebben – dit:

Stap 3: Inloggen op WordPress, enzo. Handen in de modder.

Ga naar de beheer-URL van de WordPress-installatie:

http://www.uwwebsite.nl/wp-login.php (bookmarken kan handig zijn)

Stap 3.1: activeer de plugins (e-Commerce, Contact Form 7)

Bezoek in de WordPress Back-end de pagina “Plugins (#)”. Naar waarschijnlijkheid tref je het volgende aan:

Activeer beide relevante plugins: “Contact Form 7″ & “WP Shopping Cart”. Dat lukt je naar ongeëvenaarde waarschijnlijkheid probleemloos, waarna je dit ziet:

Twee dingen merk je direct op (en één iets later):

1. De geactiveerde plugins zijn wit gekleurd
2. In de primaire navigatie van de Back-end zijn twee knoppen toegevoegd: “Store” & “Contact”.
3. Valt later op: er zijn drie pagina’s aangemaakt (Zie “Pagina’s > Bewerken”). Schrik daar van (want het is in eerste opzicht niet gebruikelijk voor een plugin. Wees kritisch) maar gooi ze zeker niet weg. Later meer hierover.

Over de configuratie van de plugins (welke verantwoordelijk zijn voor deze knoppen) meer in stap 4 (Ik heb er over nagedacht: “In stap 3 alleen écht WordPress gelieerde zaken”).

Stap 3.2: activeer & configureer het thema (Vanilla Cart, bijvoorbeeld)

Daar je het thema (Vanilla Cart in dit geval) in de juiste map gesleept hebt, kun je deze activeren door te navigeren naar

WordPress Back-End > Weergave > Thema’s” (in het Engels: “Appearence > Themes”)

Daar kies je onder het juiste thema op “Activeer”. Er verschijnt een popup met rechts boven een “ja-ik-wil”-knop. Done!

De tussenstand op Front-End gebied is nu (als je dit niet wilt zien en mij, je hostingprovider, je browser en jezelf vertrouwt, ga dan verder naar de volgende tekstregel):

Configureren

Ik kies nu voor Vanilla Cart omdat dat een gratis, clean thema is mét Dynamische Sidebar. Dat is nodig om gebruik te kunnen maken van Widgets. Jij weet wat een Widget is. We gaan de zijbalk voorzien van 3 widgets. Deze:

1. Een overzicht van de pagina’s (zit standaard in WordPress);
2. Een overzicht van de productcategoriën (zit in de Plugin WordPress e-Commerce Plugin 3.7.6);
3. Een winkelwagen (zit óók in de Plugin WordPress e-Commerce Plugin 3.7.6).

Het is heel makkelijk. Ook het toevoegen van meer of andere Widgets is heel makkelijk.

WordPress Back-End > Weergave > Widgets

Je ziet links de te gebruiken Widgets en rechts de te gebruiken Sidebar. Ik sleep “Pagina’s”, “Product Categories” & “Shopping Cart” naar “Sidebar” – omdat ik dat op dit moment een relevante combinatie vind. Stel de Widgets naar gelangen in. Ik laat het wat het is, voor nu. Voel je vrij te wijzigen waar gevoel of ervaring zegt dat dit relevant is:

Het is mogelijk een Thema te kiezen of (laten) ontwikkelen met meerdere Dynamische Sidebars. Dit werkt – in principe – hetzelfde.

Kijk eens naar wat gemaakt is, bezoek: http://www.uwwebsite.nl, en geniet van dat wat zichtbaar is. Misschien vind je de huidige structuur mooi, maar kans bestaat dat je – kwa indeling – wat wensen hebt. Widgets en Thema’s met één of meer Dynamische Sidebarsgeven vrijheid te schuiven met structuur.

Stap 4: WordPress Webshop Plugin configureren

Twee Plugins worden geïnstalleerd. Focus ligt gedurende de Tutorial op de Webshop-plugin & functionaliteiten. In deze stap aandacht voor instellingen, structuuropzet (d.m.v. categoriën) en (handmatige) productinvoer.

Stap 4.1: Instellingen

De instellingen van de Webshop Plugin beheer je hier:

WordPress Back-End > Store > Settings (> General – dit is de standaard setting pagina die getoond wordt. Er zijn meer configuratiepagina’s zoals je ziet.)

Configureer basiselementen als land van verkoop, valuta, weergave van bedragen en belastinggroep hier. Mijn instellingen op dit moment:

Vergeet niet na instellingen in de Store-sectie te wijzigen áltijd onderaan de pagina op “Update >>” te klikken. Altijd.

Stap 4.2: Categoriën aanmaken

Zoals inmiddels misschien duidelijk. Ik bouw een Online Viswinkel. Op domein http://www.heerlijkevis.nl. Ik heb gekozen voor een hoofdcategorie “Heerlijke Vis” met daaronder vissoorten als subcategoriën: “Paling”, “Makreel”, “Zalm” en meer. Zelf vermijd ik categoriën als “Diversen” of “Overige”. Het is een noodgreep; als het niet anders kan.

Aanmaken van Categoriën doe je op de pagina “Store > Categories”. Ik heb de voorbeeldcategorie gewijzigd in “Heerlijke Vis” (mijn hoofdcategorie) en de Subcategoriën aangemaakt door in de rechterkant van het Categorie-wijzig-scherm op + Add new category to the current Group te klikken. Allerhande instellingen kunnen gemaakt worden:

• Naam en beschrijving: voorspelbaar;
• Category Parent: de categorie waaronder de nieuw aan te maken categorie valt, zo breng je hierarchie aan in de winkel);
• Category Image: een categorie-afbeelding, met resize mogelijkheid.
• Target Market Restrictions: laten staan
• Catalog View: Default View. Andere opties kunnen vrij gekocht worden. Of creatiever opgelost, dat geniet mijn voorkeur.
• Thumbnail Size: het formaat van de Thumbnails van toebehorende producten in het categorieoverzicht.

Mijn structuur ziet er – zoals gewenst – zó uit:

Stap 4.3: Producten aanmaken

Is heel makkelijk, indien gewenst. Een product kan je zo uitgebreid maken als je wilt. Ik beperk tot: naam, beschrijving, prijs, categorie & foto. Schroom niet te spelen met gewicht, formaat, verzendkosten per product, voorraadbeheer, productvariaties, productpersonalisering (hoewel ik deze afraad – afbeeldingen door de gebruiker … liever niet in een configuratie als deze) en meer …

Stap voor stap de additie van product “Noorse Zalmfilet”. Ik heb al een product – Hollandse Garnalen – toegevoegd.

WordPress Back-End > Store > Products

Het zien van volgende vier screenshots stelt in staat zelf producten toe te voegen:

Merk op dat:

• Ik niet de hoofdcategorie selecteer maar alleen de relevante subcategorie (mogen er meerdere zijn). Meeselecteren van de hoofdcategorie kan (als de consequentie – alle subproducten op één pagina – wenselijk is). Selectief meeselecteren kan bijvoorbeeld gebruikt worden om de hoofdcategorie-pagina als “onder de aandacht”-pagina te gebruiken.
• Ik niet alle invulvelden invul. Basisprincipe hier is: vul in waarvan je weet wat het is, en het nodig hebt. Keep It Simple, Stu#$%.
• Voor sommige functionaliteiten is een premiumpakket van de WordPress e-Commerce Plugin vereist. Mijn devies: “Software sluit nooit 100% aan op jouw wens. Ook niet een premium-pakket”.

Stap 5: Installeer iDeal op WordPress

Partij Ideal-Simulatie heeft een script geschreven voor acceptatie van iDEAL-betalingen in WordPress Webshops met de configuratie die ik hier beschrijf.

Download de iDEAL Basic/Lite Gateway corresponderend met de juiste WordPress & e-Commerce Plugin versie. http://www.ideal-simulator.nl/ideal-gateway-voor-wordpress-en-wordpress-shopping-cart-wpsc.html

Stap 5.1: Uploaden

Uploaden van de Gateway beschrijf ik hier, omdat dit afwijkt van de “normale” WordPress Methode (zoals bij Plugins en Thema’s). Het .zip-pakket dat iDeal-Simulatie aanbiedt bevat de volgende bestandstructuur:

Upload de directory ideal en het bestand ideal_lite_install.php in de basismap van de WordPress installatie. Upload het bestand ideal_lite.php (je vindt het: wp-content > plugins > wp-e-commerce > merchants – de map voor betaalmethodes). Upload deze file in de corresponderende map op de server (dus overschrijf NIET grofweg de map wp-content, dat zou alle andere wp-content data verwijderen. Zoek het corresponderende mapje op en plaats de file er. Tussen andere betaalmethode-bestanden als PayPal & Google Checkout).

Het FTP-programma zou de volgende moeten tonen als je de map “[DOMEIN]/wp-content/plugins/wp-e-commerce/merchants” bezoekt:

Alle benodigde bestanden zijn geüpload.

Stap 5.2: Installeer iDEAL en biedt haar aan als betaalmethode

Start het script “ideal_lite_install.php” in je browser. Bezoek dus:

http://www.uwwebsite.nl/ideal_lite_install.php

Bezoek aan deze pagina respondeert u “IDEAL LITE INSTALL LOG” & “No warnings found”. De initiële configuratie is gedaan. Het is van belang direct (nu) dit bestand van de server te verwijderen.

Terug naar WordPress, de Back-End. Navigeer naar:

Store > Settings > Payment Options

iDEAL Basic/Lite staat waar ze eerder niet stond. Tussen de payment options:

Goed kijkend naar het tweede screenshot hierboven ontdek je dat je rechts, bij Payment Gateway, de betaalmethodenaam voor de Front-End kan herdefinieren; raadzaam daar elke optie normaliter tot “Credit Card” gedoopt is. En … “Update >>”!

Eureka. iDeal – en het kunnen laten betalen daarmee – is daar. Tenminste, met de testomgeving. Voel vrij een testje te wagen op eigen winkel.

Ik heb trek in Noorse Zalmfilet. Hmmm:

Dat is de Orderflow. Eens; nog een aantal schuurpuntjes, maar niet slecht voor – hoe lang zijn we bezig, een paar uur – toch?

Configuratie met het mapje papieren dat de bank je toestuurt verschilt per bank. Doe het in deze file:

/ideal/library/ideallite.cfg.php

In dit bestand komen een aantal gegevens en – niet onbelangrijk – de pagina’s bij het wel of niet slagen van de iDEAL-transactie:

Er zijn drie mogelijke scenario’s na het starten van een iDEAL-transactie:

• Cancel;
• Error;
• Success.

Belangrijk is dat de route tekstueel duidelijk is, in alle gevallen. URL’s van de pagina’s die je hiervoor schrijft vul je absoluut (dus inclusief “http://…”) in in het bovengenoemde iDEAL-configuratiebestand.

Stap 6: De losse eindjes (a.k.a. de belangrijkste stap)

Technisch gezien staat de Webshop. Een klopje op de schouder waardig. Bedenk echter (hier volgt een mening, geen feit):

Techniek is – bij benadering – iets binairs. Het werkt wel of het werkt niet.

De afwerking – detailering – is waarop alle Webshops gebouwd na het lezen van deze (toch voornamelijk technische) Tutorial zullen scoren. Ik definieër daarin vier gebieden:

• Taal;
• Teksten & Tekstpagina’s;
• Thema;
• Test, Test & Test.

Stop het volgende in je zak. Deze vlakken zijn stuk voor stuk investering(en) waard. Goede uitvoering maakt verschil.

Stap 6.1: Taal

Na alle noeste arbied kan het betreurenswaardig werken dat alle Webshop-elementen in Engels gepresenteerd worden in de Front-End. Hier komt het:

WordPress is – ik meen sinds versie 2.9 – overgestapt op een nieuwe bestandnaamvoering van taalbestanden. Waar vertaling voorheen uit de files “nl_NL.mo” & “nl_NL.po” (te vinden in /wp-content/languages/) bestond is dat nu “nl.mo” & “nl.po” – wel op dezelfde plek. In het WordPress 2.9.2 configuratiebestand wordt Nederlandse taal dan ook op de manier “nl” aangeduid, waar dat voor WordPress 2.9 “nl_NL” was.

Ter illustratie; Zie regel 67 in het WordPress configuratiebestand (/wp-config.php):

Waar multilanguale plugin WordPress e-Commerce Plugin 3.7.6 nog de “Pre 2.9 notatie” in haar bestanden hanteert (te vinden in map /wp-content/plugins/wp-e-commerce/languages/):

Let op: alle ongebruikte taalbestanden verwijderde ik. Een esthetische overweging. Probeer dit thuis ook.

Mijn workaround (een mooi woord voor “niet zoals God het bedoelde, maar het werkt”); ontdoe de bestandsnamen waarin nl voorkomt van de underscore en “NL”. Je krijgt dan dit (ik werk zelf met kopiën van de bestanden) – bekijk daarna de Front-End en zie:

Doe er goed aan de invoervelden bij afronding van bestelling te vertalen. Te vinden op deze locatie:

WordPress Back-End > Store > Settings > Checkout

In de Back-End is het roeien het met een (mijns inziens niet storende) melange tussen de Engelse & Nederlandse taal. Te wijzigen door in het eerder genoemde taalbestanden zelf wijzigingen aan te brengen.

Stap 6.2: Teksten & Tekstpagina’s

Neem de klant aan zijn of haar handje mee. Wat moet gezien, wat te ondernemen om de gebruiker zich niet stom te laten voelen? Welke routes kan een klant door de Webshop volgen? Prent deze vragen in het hoofd en vul met volledige overgave aan behulpzaamheid ALLE tekstelementen van de WordPress Webshop:

E-mails en E-mailadressen: Store > Settings > Beheer (voorheen “Admin”):

iDEAL pagina’s: Losse pagina’s in WordPress. Succes kan – en gaat – naar de “Transaction Results”-pagina. Voor de stata “Cancel” & “Error” moet zelf een pagina aangemaakt worden. Verstandigst is deze te eindigen met een link naar de checkout pagina, waar opnieuw de betaalstap doorlopen kan worden (of deze elementen includeren op de pagina zelf).

Zie dit als een checklist – controlleer na update(s) de lijst opnieuw.

Stap 6.3: Thema (& Call-to-Action)

Het thema van de Webshop is het gezicht naar buiten. De term mooi is niet het meest relevant en tevens nogal smaakafhankelijk. Functioneel en gebruiksvriendelijk is waar het om gaat. Kan de gebruiker snel vinden of doen wat gevonden of of gedaan moet? Kies één van de legio templates die online te vinden zijn of investeer in een uitgedacht Thema op maat. Let bij het kiezen of ontwikkelen van het Thema op de aanwezigheid van deDynamische Sidebar (zie Stap 3.2: activeer & configureer het thema).

Denk hierbij niet vanuit de technologie, maar probeer volgende volgorder te omarmen:

• vanuit de mensen die het gaan gebruik (People);
• vanuit dat wat je bereiken wilt (Objectives);
• je strategie, hóe ga je dat bereiken (Strategy);
• de juiste tool(s). WordPress is nu gekozen, maar welke functionaliteiten en randtools te gebruiken? (Technology).

Schaamte voor een andere (of a-synchrone) aanpak is niet nodig en ongepast. Verklaar het als een weldoordachte manier van reversed engineering.

Call-to-Action: vrij vertaald “de roep tot actie” is een toverwoord in Theming. Hoe maak je het verleidelijk de klant te laten klikken waar wenselijk is (een gebruikelijke keus kan zijn de aandacht te leggen op “Aan winkelwagen toevoegen” & “Afrekenen”)?

Zie het volgende voorbeeld: Zelf heb ik de Widgets ”Pagina’s”, “Product Categories” & “Shopping Cart” toegevoegd, terwijl je wellicht opmerkte dat rechtsboven in het Vanilla Cart al de “Shopping Cart” verscheen, echter opgemaakt. Twee keer “Shopping Cart” naast elkaar:

Screenshot 1: de winkelwagen-informatie, zonder buttons, met tekstlinks.

Screenshot 2: dezelfde informatie – zelfs meer. Nu mét gebruik van knoppen – buttons.

Dit is geen uitnodiging te kiezen voor “de mooiste”, maar let wel: als ontwerpen heb je invloed op waar de aandacht van de gebruiker te leggen. Gebruik deze wetenschap bij het (laten) ontwikkelen of kiezen van het Thema – het gezicht.

Stap 6.4: Test, Test & Test

…

Tot slot

Er is een WordPress geïnstalleerd en relevante aangekleed. Zorgvuldig geselecteerde Plugins, welke vervolgens correct geconfigureerd zijn.

Wat hierboven beschreven is, is een neusje van de spreekwoordelijke zalm van wat WordPress en de Plugins te bieden hebben. Bedenk echter dat je functionaliteiten niet toevoegt omdat het kán, maar omdat het iets toevoegd; voor exploitant en klant.

Wordt vervolgd, indien daar animo voor is … :)