Aangepaste velden creëren in het afrekenproces

Wie het afrekenproces in WooCommerce van nader bekijkt ziet dat dit er behoorlijk logisch uitziet. Maar toch zijn er naargelang jouw situatie misschien toch aanpassingen nodig. Als jij in je webshop bvb notebook LCD-schermen verkoopt is de kans groot dat er pc-herstellers in je webwinkel terecht komen. Zij zullen zo'n scherm kopen om hun herstellingen te kunnen doorvoeren. En hiervoor zullen zij een geldige factuur wensen.

Een veld waar zij hun btw-nummer kunnen invullen is standaard niet inbegrepen in WooCommerce. Hiervoor is een handige plugin : Poor Guys Army Knife. In deze post zal ik niet alle mogelijkheden bespreken die deze fantastische plugin aankan. Maar enkel het aanmaken van extra velden in het afrekenproces.

Installeren van de plugin
Het installeren van de plugin is, net zoals alle andere plugins, een fluitje van een cent.

• Download de plugin op de site van Wordpress en bewaar het zip-bestand op je computer.
• In Wordpress ga je naar Plugins >> Nieuwe plugin.
• Kies de optie Uploaden.
• Blader naar het bewuste zip-bestand en kies Nu installeren.
• Wanneer Wordpress klaar is kun je ook meteen Activeren.

Velden creëren
De plugin kun je nu vinden in je WooCommerce -menu :

Vervolgens kies je de optie Checkout Billing Section :

In het volgende scherm zien we alle velden die er reeds aanwezig zijn. Onderaan kunnen we een nieuw veld aanmaken. In ons geval dus om een btw-nummer te kunnen toevoegen.

Eenmaal we het veld hebben ingesteld kunnen we ons nieuwe veld bijwerken. We kunnen aanduiden als we het veld verplicht willen meken; of juist niet. We kunnen het veld een naam geven. En we kunnen teven reeds een zgn. 'placeholder' invullen. De breedte van het veld kunnen we ook bepalen : Wide voor een volledige breedte, First voor de eerste helft van het scherm en Last voor de tweede helft van het scherm.

Tot slot kunnen we het veld ook verslepen met de cursor en zo een logische plaats geven tussen alle andere velden. Net onder het veld 'Bedrijfsnaam' lijkt me logisch. Vergeet niet om je werk te bewaren!
In onze webwinkel zien we het resultaat van onze aanpassingen:

Een variabel product aanmaken in WooCommerce

Het aanmaken van een variabel product is niet zo eenvoudig als het soms lijkt. Er kruipt ook heel wat werk in. Veel beginners lopen verloren in het aanmaken hiervan. Het is belangrijk in WooCommerce om enkele termen goed te kennen:

• Productattribuut: dit is woord dat aanduidt op welk gebied we verschillende varianten willen aanbieden. Bij kleding kan dit 'maat' zijn. Bij een mp3-speler kan dit 'kleur' zijn. En bij een tv bijvoorbeeld, kan dit 'grootte' zijn.
• Voorwaarde: dit geeft aan welke soorten productattributen we allemaal willen verkopen. Voorwaarden voor 'maat' kunnen dus bijvoorbeeld Small, Medium en Large zijn. Voorwaarden voor 'kleur' kunnen dus bijvoorbeeld rood, wit en zwart zijn. En voorwaarden voor 'grootte' kunnen dan bijvoorbeeld 40 inch, 42 inch en 44 inch zijn.

Hoe je deze attributen en de bijhorende voorwaarden instelt, kun je lezen op Productattributen aanmaken.

Hier werken we een voorbeeld uit van een mp3-speler, namelijk een iPod die we gaan verkopen.

• Eerst en vooral moeten we de juiste categorieën hiervoor hebben. Meerbepaald de hoofdcategorie MP3-spelers en de subcategorie iPod.
• Volgende stap is het aanmaken van de productattributen. In dit geval maken we de attributen Kleur en Capaciteit aan.
• Laatste stap is de bijhorende voorwaarden bij de productattributen definiëren. Bij het attribuut Kleur maken we zwart en wit aan. Bij het attribuut Capaciteit: 8GB, 16GB en 32 GB.

In totaal hebben we dus 6 producten te verkopen :

• zwarte iPod met 8GB
• zwarte iPod met 16GB
• zwarte iPod met 32GB
• witte iPod met 8GB
• witte iPod met 16GB
• witte iPod met 32GB

Je zou uiteraard zes verschillende producten kunnen aanmaken, maar dat zou de webshop nogal vol doen lopen als je veel producten verkoopt. Bovendien  houden de meeste klanten wel van het feit dat ze kunnen kiezen op 1 pagina i.p.v. zes verschillende pagina's te moeten bezoeken.

Dus : je (sub)categorieën zijn aangemaakt, je productattributen zijn aangemaakt, je productattributen hebben de juiste voorwaarden? Dan kunnen we aan de slag. Ga in Wordpress naar Producten >> Product toevoegen.

We geven ons artikel een naam:

We duiden aan in de rechterkolom in welke categorie en in welke subcategorie ons nieuw product thuishoort:

Nu komt een belangrijke stap! we gaan aanduiden dat ons product een variabel product is in het vak Productdata:

We vullen de omschrijving in, alsook een verkorte omschrijving:

Nu gaan we naar het tabblad Atrributen en geven we aan dat we het attribuut Kleur willen toevoegen. We herhalen voor het attribuut Capaciteit.

Zodra we een productattribuut hebben toegevoegd opent een scherm waar we één en ander kunnen instellen. Het is eenvoudiger dan het lijkt. We geven de waarden in die we willen gebruiken voor elk attribuut. Kies Alles selecteren. Als er toch waarden zijn die voor dit product niet van toepssing zijn kun je ze makkelijk verwijderen.

Vink ook de twee opties aan : Zichtbaar op de productpagina en Gebruikt voor variaties.

Het volgende is zéér belangrijk: sla nu je product voorlopig op! Dat doe je door te kiezen (bovenaan rechts) voor Opslaan als concept.

Vervolgens gaan we weer naar onze productdata en kiezen nu voor het tabblad Variaties. We slaan alle andere mogelijkheden over en drukken meteen op Koppel alle variaties.

Er zal een waarschuwing komen die ons verwittigt dat alle mogelijke combinaties zullen worden bepaald. Uiteraard willen we doorgaan. In een mum van tijd geeft WooCommerce aan dat alle combinaties zijn aangemaakt:

De zes variaties die we voor ogen hadden, zijn gecreëerd. Nu kunnen we alle parameters voor elk instellen: een afbeelding, de prijs, de voorraad, enz...
Zolang de benodigde parameters niet zijn ingevuld zal het product ook niet te zien zijn in de webwinkel.

Als we een kijkje nemen zien we dat de klant eerst een keuze moet maken in de productattributen die we eerder hebben bepaald, nl. kleur en capaciteit. De prijs heeft zich ook aangepast en toont nu Vanaf xx.xx€.

Je klanten laten kiezen volgens merk

In zowat elke webwinkel is het doodnormaal om je klanten de keuze te geven om hen te laten filteren per merk. Voor bepaalde producten heeft de consument nu eenmaal een voorkeur. Klant A wil bijvoorbeeld enkel een vaatwasser van AEG, terwijl klant B zweert bij een Miele. Op heel veel sites staat een filter in de zijkant om de klant makkelijker te laten filteren.

Raar maar waar: standaard heeft WooCommerce geen optie om dit in je webwinkel te implementeren. Uiteraard kun je op zoek gaan naar een plugin hiervoor, maar deze zijn dan weer betalend.

Maar met een truukje kun je misschien toch een filter aanmaken die je klanten kunnen gebruiken om hun keuze te filteren. De basis is het gebruikmaken van tags.

Een tag is een kernwoord dat aan elk product kon gekoppeld worden. Ga naar het beheergedeelte van Wordpress en kies voor Producten >> Producten in het linkermenu. Je ziet nu een lijst van al je producten. Kies voor Bewerken om een reeds bestaand product aan te passen.

In de rechterkolom van het volgende scherm zien we een vak staan met de naam Tags. Hier kunnen we het merk invullen van ons product; bijvoorbeeld Miele.

Druk daarna op de knop Toevoegen en sla je product opnieuw op via de knop Bijwerken.

Herhaal deze werkwijze voor al je producten. Als je nog nieuwe producten moet toevoegen kun je dit meteen invullen bij de creatie van je nieuw product.

Al onze tags die we toekennen worden bewaard door Wordpress zodat het aanmaken van tags makkelijker wordt voor de volgende keer. Hiervoor druk je in het vak Tags op de link Kies uit de meest gebruikte tags. Je krijgt dan een lijstje te zien met de tags die je reeds eerder hebt aangemaakt.

De volgende stap is om onze tags in een menu te tonen in de zijbalk van onze webshop. Hiervoor gaan we een widget gebruiken.

Ga hiervoor naar Weergave >> Widgets. We komen terecht in een scherm waar alle beschikbare widgets staan in de hoofdkolom. De widget die we zoeken noemt Tagwolk.

Deze kun je verslepen naar de rechterkolom, waar al je andere widgets al staan die je gebruikt. Zodra je de Tagwolk toevoegt aan je zijbalk zal deze je toelaten om een titel te kiezen. Je moet ook de taxonomie kiezen. Let op dat je hier kiest voor producttags. De 'gewone' tags gelden voor de artikels op je blog; en niet voor je producten in je winkel.

Alos we nu naar onze webwinkel gaan kijken zien we dat de merken (die dus eigenlijk tags zijn) nu in de zijkolom staan van onze webshop.

Als je deze widget tè basic vindt, kun je misschien opteren voor het downloaden van een alternatief op de Wordpress-site. Als je het helaaml mooi wil maken kun je voor een héél zacht prijsje de Extended Tags Widget kopen op CodeCanyon.

Een hoofdmenu aanmaken in Wordpress

een goede site heeft een goede structuur als basis. En deze structuur moet meteen duidelijk te zien zijn in ons hoofdmenu. Naargelang het thema dat je hebt gekozen, kunnen we soms meer dan één menu aanmaken.

Maar in dit voorbeeld gaan we tonen hoe we het eerste menu kunnen aanmaken. Eenmaal je dit onder de knie hebt, kun je ook makkelijk het tweede menu aanmaken (als je thema dat toestaat).

Eerst en vooral is het goed om even stil te staan bij de indeling van je hoofdmenu. Denk goed na hoe je klanten doorheen je webshop zouden navigeren. Het is de bedoeling dat alles staat op de plaats die zij verwachten. Stop bvb. je contactpagina niet weg in de footer van je site. Klanten met vragen willen je wellicht makkelijk kunnen contacteren.

Stel dat het volgende menu bovenaan wil zien : Home, Webshop, FAQ, Over Ons en Contact. Dan is het uiteraard eerst nodig dat je deze pagina's aanmaakt. Twee van deze pagina's zullen subpagina's krijgen. Bij de Webshop-pagina zullen we onze winkelcategorieën toevoegen als submenu. Ook bij de Over Ons-pagina willen we enkele subpagina's : Historiek, Ligging en Medewerkers.

In dit voorbeeld gaan we de pagina Over Ons aanmaken en de bijhorende subpagina's : Historiek, Ligging en Medewerkers.

Stap 1 is het aanmaken van de hoofdpagina : Over Ons. Ga naar Pagina's >> Nieuwe Pagina.

Tik nu de gewenste tekst in. Sla daarna de pagina op door op de knop Publiceren te drukken (aan de rechterkant).

Nu kunnen we beginnen aan onze subpagina's. Eerst gaan we aan de slag met de subpagina Historiek. Het aanmaken van een nieuwe subpagina is eigenlijk identiek hetzelfde als het aanmaken van een gewone pagina :

Er is echter 1 belangrijk verschil. In de pagina-attributen aan de rechtrekant geven we een "hoofd" in. Dat betekent dat we Wordpress moeten duidelijk maken dat de pagina Historiek een subpagina is van Over Ons.

Wat hebben we nu gedaan?

• de hoofdpagina Over Ons aangemaakt
• de subpagina Historiek aangemaakt onder het hoofd Over Ons

Op dezelfde manier maken we nu de volgende twee subpagina's aan : Ligging en Medewerkers. Deze hebben dus ook als hoofd Over Ons.
Vergeet niet om je pagina's telkens op te slaan door de knop Publiceren te drukken !

Het hoofdmenu aanmaken in Wordpress

Nu gaan we onze pagina's invoegen in ons hoofdmenu. Hiervoor gaan we in Wordpress naar Weergave >> Menu's.

Als je nog geen menu hebt aangemaakt kies je de optie maak een nieuw menu. Heb je wel al een menu, selecteer dan het menu in het dropdownmenu.

Geef vervolgens je menu een naam. Deze naam zal nergens op je site te zien zijn. Deze dient dus vooral als geheugensteuntje voor jezelf.

Druk dan op de knop Menu aanmaken.

In het vak Pagina's kiezen we Toon alles. Dan zouden we alle pagina's moeten zien die onze webblog heeft.

Vervolgens selecteren we de 4 pagina's die we in ons menu willen zien: Over Ons en de drie subpagina's die erbij horen : Historiek, Ligging en Medewerkers. We drukken nu op de knop Aan menu toevoegen.

Rechts in het scherm kunnen we nu zien dat de pagina's inderdaad zijn toegevoegd in het menu. Echter nog 1 probleem : alle 4 de pagina's zijn op hetzelfde niveau. Ondanks dat we hebben aangeduid dat er 1 hoofdpagina is, en 3 subpagina's. Dit is zeer eenvoudig op te lossen. Je kunt de "blokken" namelijk lichtjes verslepen naar rechts :

Scroll nu terug naar boven en druk op de knop Menu opslaan. Als we nu ons werk gaan controleren in de webwinkel zien we inderdaad de hoofdpagina en de 3 subpagina's staan in ons menu :

Een nieuw thema installeren in Wordpress

Wordpress komt standaard al met een zeer goed en mooi standaardthema. Toch zullen velen onder ons ooit kiezen voor een nieuw thema. Met een mooi en functioneel thema spring je uit de grijze massa.

Als je werkt met de WooCommerce plugin is het al helemaal belangrijk dat je webwinkel een mooie uitstraling heeft. Je kunt hier meer lezen : Een geschikt WooCommerce thema kiezen.

Nu gaan we over naar de volgende stap : het installeren van je nieuwe thema. In dit voorbeeld kiezen we gewoon een thema van de Wordpress-website : Tiny Forge. Een mooi, clean en minimalistisch ontwerp dat toch klasse uitstraalt.

Ga naar de website van Wordpress en tik "tiny forge" in het zoekveld.

In de zoekresultaten zal het eerste resultaat ons leiden naar het (gratis) thema. Druk op de knop om het bijhorende zip-bestand naar onze pc te downloaden.

Schakel nu over naar het beheergedeelte van je Wordpress site. Ga naar Weergave >> Thema's en druk op de knop Nieuwe toevoegen.

Klik up Uploaden en kies het bestand op je computer door op de knop Bladeren te klikken. Vervolgens kun je meteen installeren.

Wanneer Wordpress klaar is, kun je meteen je thema activeren.

Ziezo, je hebt een nieuw thema geïnstalleerd en je website of webwinkel ziet er meteen een stuk anders uit.

Gratis verzending via een coupon

Een reden waarom sommige klanten een gewone winkel nog steeds verkiezen boven een webshop is het vermijden van verzendkosten. Somiggen daarvan kun je dus zeker en vast over de schreef trekken met gratis verzending. Deze methode kun je op meerdere manieren toepassen.

Eerder zagen we reeds hoe we WooCommerce zodanig kunnen instellen dat de optie 'gratis verzenden' wordt ingeschakeld vanaf een bepaald aankoopbedrag. Dat kun je nogmaals nalezen in de post Instellen van gratis verzending.

We zagen eerder ook hoe je kortingscoupons kunt gebruiken in WooCommerce. Dat kun je terugvinden in de post Kortingen toestaan via een coupon.

De volgende stap is nu bepaalde klanten proberen te overtuigen dat ze geen verzending moeten betalen, zolang ze je kortingscoupon daarvoor gebruiken. Het is misschien ook een idee om bestaande klanten terug naar je winkel te lokken d.m.v. een nieuwsbrief en hen een coupon aan te bieden voor gratis verzending.

Het instellen van gratis verzending via een coupon

De eerste stap is om een coupon aan te maken die gelijk is aan onze verzendkosten. We zorgen ervoor dat de optie Gratis verzending inschakelen in het coupon-gedeelte is aangevinkt.

Volgende stap is om Gratis verzending als verzendmethode in te schakelen. Daarvoor gaan we naar WooCommerce >> Instellingen >> Tabblad Verzending.

Belangrijk is om de optie Gratis verzending verplicht... te wijzigen naar Een geldige gratis verzendingscoupon.

Als je de optie van gratis verzending vanaf xx € wil behouden kies je beter voor de optie Een minimum bestellingsbedrag OF een coupon.

Sla je wijzigingen op en test je webwinkel :

We zien dat de klant toch geniet van gratis verzending na het invoeren van de couponcode. Ook klanten zonder coupon maar die voor een minimumbedrag bestellen zullen de gratis verzending bekomen.

Kortingen toestaan via een coupon

Wie een webwinkel runt moet manieren proberen zoeken om potentiële klanten over de schreef te trekken. Een korting kan dan een interessante optie zijn. Je zou een korting ook kunnen gebruiken voor bestaande klanten te bedanken en hen te overtuigen terug te komen shoppen in je webwinkel.

Het instellen van een kortingsbon in WooCommerce noemt een 'coupon' en is helemaal niet moeilijk in te stellen. Zorg er wel voor dat de optie Coupons aangevinkt is bij je algemene instellingen. Dit controleer je op WooCommerce >> Instellingen >> Tabblad algemeen.

Ga in je Wordpress site naar WooCommerce >> Coupons >> Coupon toevoegen.

De eerste stap is een code toekennen die onze klanten kunnen gebruiken om de gewenste korting te verkrijgen in het afrekenproces. Hou het simpel en gebruik geen hoofdletters en kleine letters door elkaar. Een voorbeeld zou kunnen zijn: sint. We kunnen de coupon ook een interne naam geven voor onszelf. Handig als je meerdere coupons tegelijk hebt lopen.

Nu kunnen we alle parameters beginnen instellen:
Kortingstype : we kunnen verschillende soorten korting geven : een bedrag op het totale winkelbedrag, een procentuele kortingen op het totale winkelbedrag, een korting op 1 product (of meerdere), of een procentuele korting op 1 product (of meerdere). In ons voorbeeld gaan we een korting geven van 5% op het totale winkelbedrag in de categorie speelgoed.

Gratis verzending inschakelen : deze optie dient om een coupon aan te maken om de klant gratis verzenden aan te bieden. Hoe je dit soort coupons aanmaakt kun je hier lezen.

Individueel gebruik: De naam is misschien wat misleidend, maar deze optie dient om te vermijden dat de klant meer dan 1 coupon op hetzelfde winkelmandje kan gebruiken.

Toepassen voorop belasting: Deze optie kan voor heel wat kopbrekens zorgen. Het is best dat je de optie ALTIJD aan zet.
Opgelet ! Als je een bepaald bedrag als korting geeft, geef dan als waarde het bedrag inclusief BTW in.

Sale item uitsluiten: deze optie kun je aanvinken als je de producten die reeds in promotie staan wil uitsluiten.

Minimumbedrag: als je wil dat je korting pas geldig is vanaf een bepaald bedrag, dan kun je dit hier instellen.

In de volgende velden kunnen producten en categorieën toevoegen of uitsluiten van de coupon. In ons geval wilden we 5% korting geven opde categorie Speelgoed.

E-mail beperkingen: hier kun je mailadressen intikken die de coupon mogen gebruiken. Op deze manier kun je vermijden dat klanten die recht hebben op een korting, de code zouden doorgeven aan anderen.

Gebruikslimiet: Als je wil vermijden dat dezelfde klant steeds maar dezelfde coupon gebruikt, dan kun je hier het aantal keren instellen dat de coupon kan gebruikt worden.

Vervaldatum: Geef hier de datum in waarop je de coupon wil laten vervallen.

Als alle parameters zijn ingesteld, kunnen we gaan testen in onze webwinkel.

Een eenvoudig product toevoegen in WooCommerce

Wie Wordpress in combinatie met WooCommerce gebruikt zal al vlug de diepgang van WooCommerce ontdekken. Aan werkelijk alles is gedacht. Maar de basis om te verkopen via een webwinkel is uiteraard het toevoegen van producten. De meest eenvoudige vorm noemt een 'eenvoudig product'.
Dit wil zeggen dat dit een product is zonder variabelen (zoals kleur, kledingmaat, capaciteit,...). Gewoon een product zoals het is. Ook gegroepeerde producten zijn een categorie apart.

Een voorbeeld van een eenvoudig product zou bvb. een teddybeer kunnen zijn. Er is maar 1 soort, 1 maat, 1 kleur, 1 grootte,... Dat gaan we dus toevoegen.

Eerst en vooral moeten we een paar zaken op orde hebben:

• De juiste catalogusinstellingen
• Een categorie waarin het product thuishoort
• Een korte omschrijving van het product
• Een uitgebreide beschrijving van het product
• Een afbeelding (of meerdere) van het product
• De prijs van het product

Een eenvoudig product toevoegen doe je via Producten >> Product Toevoegen in het beheergedeelte van Wordpress.

Aan de slag!

Catalogusopties
Eerst en vooral moeten we ervoor zorgen dat onze Catalogusopties correct zijn. Ga hiervoor naar WooCommerce >> Instellingen >> Tabblad Catalogus. Scroll naar beneden tot Productvelden. Vink af wat je niet gebruikt. In de allereenvoudigste vorm hebben we geen SKU, Dimensies of Gewicht nodig. Deze kun je dus gerust afvinken.

Productcategorieën aanmaken
Vervolgens moeten we nagaan als we de juiste categorie reeds hebben gecreëerd. Is dit niet het geval, dan kun je hier leren hoe je zoiets aanpakt. Een voorbeeld zou kunnen zijn dat we Speelgoed als hoofdcategorie nemen met als subcategorie Teddyberen.

Korte omschrijving
Nu kunnen we aan de slag in het scherm om nieuwe producten toe te voegen. De korte omschrijving is wellicht moeilijker dan de lange omschrijving. Hier moet je woorden neerpennen waarop je klanten jouw artikel gaan zoeken (in Google). De korte omschrijving vul je helemaal bovenaan in.

Uitgebreide omschrijving
In de uitgebreide omschrijving probeer je je product zo goed mogelijk te beschrijven. Geen detail is te veel. Let er ook op om je klanten echt aan te overtuigen waarom jouw product zo goed is. De concurrentie is maar een klik verder! Als het mogelijk is, geef dan ook een lijstje met voordelen of goede redens waarom je klanten het product moeten kopen.

Een videofilmpje toevoegen is steeds een troef! Beelden kunnen soms meer zeggen dan 1.000 woorden. Het houdt de bezoeker ook op je site. Het is helemaal een troef als je het filmpje ook zelf hebt gemaakt.

Een afbeelding toevoegen
Het toevoegen van een afbeelding in WooCommerce doen we aan de rechterzijde van het scherm, helemaal onderaan.

Klik op de link van Stel uitgelichte afbeelding in. Nu kun je een bestand kiezen dat op je computer staat.Dit zal je hoofdafbeelding worden van het product.

Als je nog meerdere afbeeldingen wil toevoegen, doe je dat via Productgallerij, net boven de optie Uitgelicht Afbeelding.

De juiste categorie kiezen
De categorieën heb je reeds aangemaakt. Nu moet je aanduiden in welke categorie we ons product willen indelen. In ons geval is dat de hoofdcategorie Speelgoed met als subcategorie Teddyberen.

De prijs van het product toevoegen
Nu gaan we de prijs en eventueel andere data toevoegen. Maar voorlopig houden we ons enkel aan de prijs. In ons geval geven we prijzen in exclusief belasting (btw). Als je niet zeker weet hoe jouw instellingen hieromtrent zijn, kun je dit controleren via WooCommerce >> Instellingen >> Tabblad Belasting.

Wij willen een prijs van € 99.00 inclusief btw.

Het product online zetten
Nu hebben we alles ingevuld wat nodig is. Uiteraard zijn er nog veel meer opties, maar dat is voor later. Nu kunnen we drukken op de knop Publiceren, bovenaan rechts. Als we een kijkje gaan nemen in onze webshop lijkt alles gelukt te zijn.