Met CSS text shadow toevoegen aan je tekst

Je hebt binnen je website een standaard opmaak voor je tekst en uiteraard maak je voor de beste SEO resultaten gebruik van bijvoorbeeld H1- en H2-koppen. Sliders gebruik jij natuurlijk niet, wil je weten waarom stuur ons dan gerust een berichtje, maar een mooie website zul je mogelijk wel voorzien van een headerfoto.

Tekst leesbaar maken met text-shadow in CSS

Let wel op dat je deze niet zo hoog maakt dat het voor je bezoekers niet duidelijk is dat er nog meer te zien is op een pagina, maar dat is het onderwerp gebruiksvriendelijke websites en daar hebben we al meerdere blogs over geschreven, dus dat laten we nu rusten.

Stel je gebruikt een headerfoto van 500 pixels hoog in je website. Daar wil je een tekst in zetten. Alleen wat krijgt de meeste aandacht? De tekst of de foto’s? Je zult zien dat als je de tekst bijvoorbeeld standaard wit maakt, het slecht leesbaar is. Hoe verbeter je die leesbaarheid? Voeg een schaduw toe aan de tekst. Het makkelijkste is als je een class toevoegt aan de titels want dan kun je heel specifiek de schaduw aan die titels toekennen. Hoe dat werkt leggen we hieronder uit.

Je hebt een H2 in de header staan en hier de class ‘header’ aan gekoppeld. Plaats dan deze code in je style.css.

.header h2 { text-shadow: rgba(0,0,0,0.5) 1px 1px 2px !important; }

• De kleur kun je in dit geval vervangen voor een andere rgb kleur, dit is de eerste 0,0,0.
• Met de 0.5 kun je de transparantie aanpassen.
• De afsluitende px-waardes geven aan hoe groot/breed de schaduw moet worden. Dit kun je uiteraard naar wens aanpassen.

Leesbaarheid verbeteren met schaduw

Is dit de beste optie om een tekst leesbaar te maken? Als je tekst over een foto wilt plaatsen en geen achtergrond kleur bij de tekst wilt geven wel. Het is voor iedereen goed te lezen wat er staat en niemand heeft problemen.

Als je meer wilt leren verwijzen we je graag naar ons artikel over CSS.

Een stylesheet specifiek voor mobiel. Dit kan bijvoorbeeld ook een stylesheet zijn voor WooCommerce of voor de styling van Gravity Forms. Bijkomend voordeel is dat je dit voor één website kunt maken en vervolgens bij andere websites kunt integreren. Hiermee bespaar je dus op termijn tijd en ontwikkel je een eenduidige werkwijze binnen je WordPress agency.

Extra stylesheet inladen

We gaan er vanuit dat je een child-theme gebruikt voor de website. Voeg de onderstaande code toe aan je functions.php.

De eerste regel staat er waarschijnlijk al, voeg dan alleen het stukje ‘wp_enqueue’ toe aan de bestaande code.

function theme_enqueue_styles() {
		wp_enqueue_style( 'mobile-style', get_stylesheet_directory_uri() . '/css/mobile.css');
}

Zorg dat je in je child-theme folder een map ‘CSS’ hebt en dat hier een CSS-bestand in staat met de naam die je definieert in de functions.php.

@media screen and (max-width: 600px) {
a {
color: #ff0000;
}
}

De bovenstaande code kun je plaatsen in mobile.css. Alle links zullen dan op schermgroottes tot 600 pixels rood zijn. Als je in je thema opties of een andere stylesheet ook de a gedefinieerd hebt zal vanaf 600 pixels die kleur getoond worden. Eventueel zou je deze nog kunnen overschrijven met !important. Je code zal dan worden.

a {
color: #000 !important;
}
}

Je bent klaar om verder te werken naar een professionelere webdesign standaard.

Er zijn heel veel verschillende plaatsen waar je de CSS kunt plaatsen voor je website. We zullen een aantal opties opsommen waar je de CSS nog meer zou kunnen plaatsen.

CSS in de customizer van WordPress

Deze vind je via het dashboard van je website en dan ga je naar Customizer. Daarin vind je de optie Extra CSS. Hier kun je de code plaatsen die je nodig hebt.

CSS toevoegen in je thema

Eigenlijk ieder WordPress thema heeft een optie om extra CSS toe te voegen.

CSS toevoegen met een plugin

In principe is een extra WordPress plugin absoluut niet nodig om dit soort zaken te verwerken binnen je website. Maar er kunnen redenen denkbaar zijn (denk bijvoorbeeld aan een website of webshop die je niet zelf beheert maar waarin wel aanpassingen gemaakt moeten worden) om wel te kiezen voor een plugin. Je kunt dan bijvoorbeeld de plugin Simple Custom CSS and JS gebruiken.

Simple Custom CSS and JS

In stylesheet child-theme

Ons advies is sowieso om met een child-theme te werken om wijzigingen in de toekomst bij updates van je WordPress website nog steeds te laten werken. Wil je het voor jezelf nog duidelijker maken dan raden we zelfs aan te om bijvoorbeeld een mobile.css aan te maken waarin je alle styling voor de responsive weergave van je website verwerkt. Hierover verderop in deze blog meer.

De beste optie is om te werken in een child theme en dan in de stylesheet.css binnen die map.

Als het Figma design van je WooCommerce webshop klaar is kun je starten met het invoeren van producten. In de meeste webshops die wij bouwen plaatsen wij geen producten. Dit is een behoorlijk arbeidsintensief werk dat na de oplevering alsnog door de klant zelf overgenomen wordt.

De enige uitzondering hierop is als het veel producten zijn die geplaatst moeten worden en wij deze in zijn geheel importeren. Maar dan moet er wel een complete import-file als een CSV beschikbaar zijn.

WooCommerce product maken

Hoe maak je een WooCommerce product? Wij leren onze klanten van linksboven naar beneden te werken en van rechtsonder naar rechtsboven. Klinkt heel simpel, blijkt in de praktijk voor veel mensen best lastig te zijn. We zullen kort benoemen wat je tegenkomt en waar je op moet letten. In dit geval gaan we er vanuit dat je de Yoast SEO plugin al geïnstalleerd hebt. Voor hetzelfde geval kun je ook RankMath SEO gebruiken.

Wat vul je in bij het WooCommerce product?

• Producttitel – Hier voer je zoals de naam al aangeeft de titel van het product in. Verwerk hierin ook direct de zoekterm. Dus gaat het bijvoorbeeld om een zilveren ketting, geef als producttitel dan mee ‘Zilveren ketting 30 centimeter met bedel’ of iets dergelijks.
• Lange productomschrijving – De lange productomschrijving wordt getoond onderaan de productpagina. Dit is mogelijk verwarrend, maar als je het weet dan gaat dit altijd goed. Maak in deze omschrijving gebruik van H2 koppen en goede teksten om de vindbaarheid van je producten te verbeteren.
• Soort product – Maak hier de keuze of het een simpel product is of een variabel product. Als je voor variabel kiest zul je bij eigenschappen ook op moeten geven waar de variaties uit bestaan. Dit laten we voor nu achterwege.
• Reguliere prijs – Een product moet een prijs hebben, anders wordt het niet getoond. Afhankelijk van je decimalen-instellingen zul je een een punt of een komma moeten gebruiken.
• SKU / Artikelnummer – In het tabblad voorraad heb je de mogelijkheid om zelf een SKU nummer in te voeren. Dit moet een uniek nummer per product zijn.
• Voorraadbeheer – Kies onder het tabblad ‘voorraad’ of je wel of geen voorraadbeheer wilt voor dit product.
• Voorraad – Als je gekozen hebt voor voorraadbeheer kun je hier de variabelen voor het voorraadbeheer instellen, waaronder het aantal op voorraad.
• Focus keyword – Dit is onderdeel van de Yoast en ook de RankMath plugin. Hiermee geef je aan wat de belangrijkste zoekterm van je product is. Als je meer wilt weten over de algemene werking van de Yoast plugin en waar je op moet letten verwijs ik je graag naar deze blog over Yoast van Optimus Online.
• SEO Title – Ook onderdeel van de Yoast of de RankMath plugin. Hiermee geef je aan wat je voorkeurstitel in Google is.
• Meta description – De omschrijving vanuit de Yoast of RankMath plugin die in Google getoond gaat worden. Niet belangrijk voor je vindbaarheid, maar wel zeer belangrijk voor de CTR: hoe aantrekkelijk/verleidelijk is dit voor bezoekers die dit lezen en waarom gaan ze doorklikken.
• Korte productomschrijving – Deze wordt in de meeste thema’s getoond tussen de producttitel en de productprijs op de productpagina. Geef hier de belangrijkste kenmerken van je product weer.
• Productgalerij – Heb je meer dan één foto? Dan kun je deze uploaden in de galerij.
• Productafbeelding – De uitgelichte productafbeelding. Wordt als eerste getoond op de productpagina en ook op de overzichtspagina van je webshop.
• Producttags – Deze zijn optioneel in te voeren. Let wel op dat je niet voor ieder product nieuwe tags verzint, maar zorg dat je de producttags kunt hergebruiken waardoor je eenvoudig bepaalde producten kunt groeperen.
• Productcategorieën – Hier vink je aan onder welke productcategorie jouw product getoond moet worden.

Dat is een behoorlijke lijst geworden.

WooCommerce product opties

Heb je hiermee alle mogelijkheden gehad? Nee absoluut niet. We hebben echt de basis gegeven waarmee je simpele WooCommerce producten toe kunt voegen en verschillende productcategorieën kunt vullen. Er zijn nog diverse afwijkingen links of rechts te bedenken.

Een voorbeeld hiervan is bijvoorbeeld een verzendklasse die je aan een product toe kunt voegen. Wat is dit? Stel je verkoopt al je producten tegen verzendkosten van 6,95 euro, maar je verkoopt één product dat alleen per pallet verzonden kan worden. Dat red je meestal niet voor het genoemde tarief.

Als je een verzendklasse ‘pallet’ aanmaakt en je koppelt dit aan het bewuste product dan worden de aangepaste verzendkosten voor dat product gerekend. Zo zijn er nog tientallen uitzonderingen te bedenken.

Een webshop zonder betaalmethodes is geen WordPress webshop. Dat is een simpele conclusie. Er zijn verschillende Payment Service Providers (PSP’s). Wij adviseren onze klanten vaak om gebruik te maken van Mollie als betaalprovider voor hun webshop.

Waarom? Zij ondersteunen veel betaalmethodes, zijn zeer goed en gemakkelijk te koppelen aan WooCommerce en rekenen daarnaast redelijke commissies bij verschillende betaalmethodes.

Mollie betaalmethodes en WooCommerce webshop

Het voordeel van alle betaalmethodes via één betaalprovider is dat je administratie op orde is en blijft omdat je overzicht hebt en kunt houden op je betalingen, credits, etc.

Bij de instellingen van Mollie in je WooCommerce webshop kun je instellen welke betaalmethodes je actief wilt zien.

Let op dat je een betaalmethode sowieso binnen het dashboard van Mollie zelf moet activeren voordat je deze kunt activeren binnen je webshop. Verder kun je hier ook nog instellen wat er moet gebeuren met orderstatussen en dergelijke na een afgeronde betaling.

Als je je webshop nog aan het bouwen bent kun je deze instellen op een testmodus. Hiermee kun je dus onbeperkt testen zoals bezoekers je live webshop ook zullen zien.

Mollie betaalmethodes per land

Een extra toevoeging om je webshop gebruiksvriendelijker te maken is om per land de betaalmethodes te tonen. In België bijvoorbeeld bestaat onze iDEAL niet, verberg deze daarom zodat bezoekers niet twijfelen bij het afrekenen.

Dit kun je eenvoudig doen binnen de Mollie instellingen en als je meer geavanceerde regels wilt maken kun je dit doen met de plugin Country Based Payments.

Je vindt alles rondom verzendkosten in je WooCommerce webshop via deze url https://jouwwebshops.nl/wp-admin/admin.php?page=wc-settings&tab=shipping. Van belang is dat je eerst verzendzones definieert. Je komt dan in de WooCommerce instellingen in het tabblad Verzendmethoden.

Je werkt binnen WooCommerce met verzendzones en binnen deze verzendzones definieer je verzendmethoden.

Verzendzones in WooCommerce

Verzend je naar Nederland en België, voeg dan twee verzendzones toe. Tenzij je voor beide landen dezelfde tarieven hanteert, wat op zich niet direct logisch zou zijn.

Zorg dat je adres van je webshop ook ingevuld is op het tabblad algemeen. Dit zal gebruikt worden voor het berekenen van de verzendkosten van jouw bezoekers.

Als voorbeeld maken we een verzendzone Nederland. De regio’s die we hierin aangeven zijn ook alleen Nederland. Vervolgens maak je hier een aantal verzendmethodes aan. Je kunt bijvoorbeeld pakketpost en brievenbuspost aanmaken. Afhankelijk van de volgorde waarin je de verzendmethodes plaatst zullen ze getoond worden.

Onze ervaring is dat je als je meer verschillende opties wilt aanbieden aan je bezoekers je al vrij snel uitkomt bij een plugin als Tablerate shipping. Hier zijn verschillende varianten voor te vinden, onder andere. WooCommerce zelf biedt er een aan. Hiermee kun je op basis van gewicht, aantal, totaalbedrag, etc. instellen wat de verzendkosten zijn.

Gratis verzending in WooCommerce webshop

Gratis verzending voeg je eenvoudig toe door de verzendmethode ‘gratis verzending’ toe te voegen en het drempelbedrag hiervoor in te stellen. Eventueel kun je nog kiezen om ook gratis verzending te bieden met een kortingscode.

Eventueel heb je nog een mogelijkheid om je webshop zo in te stellen dat je alleen verzendt naar de landen waar je aan verkoopt. Bij de algemene opties van je webshop kun je dit aangeven onder verkooplocatie(s) en verzendlocatie(s). Er is bij verzendzones altijd een verzendzone ‘locaties niet gedekt door je overige zones’. Hier kun je bijvoorbeeld een globaal tarief instellen voor landen waar je weinig aan verkoopt. Als je wilt is dit jouw vangnet.

Als je gebruikt maakt van Myparcel dan is het sterk aan te raden om hun plugin te gebruiken. Hiermee kun je direct vanuit de backend van je webshop verzendlabels aanmaken en je pakket alvast aanmelden bij PostNL. Er zijn diverse aanbieders van pakketten, Myparcel is degene die wij voor onze klanten aanraden.

Veel WooCommerce webshops zullen BTW moeten berekenen aan hun klanten. Aangezien er in Nederland verschillende tarieven voor verschillende producten gerekend worden is het zaak om deze BTW tarieven direct goed in te stellen in je webshop.

Je kunt er ook voor kiezen om producten inclusief of exclusief btw te tonen aan je bezoekers. In Nederland is het wettelijk verplicht om je prijzen inclusief btw te tonen aan consumenten. Dus als je een B2C webshop hebt dan heb je helemaal geen keuze.

WooCommerce BTW instellen

Alle instellingen rondom belastingen vind je terug in je WooCommerce webshop op deze pagina: https://jouwwebshop.nl/wp-admin/admin.php?page=wc-settings&tab=tax

Hier kun je per land invullen wat de BTW tarieven zijn. En de naam die getoond moet worden tijdens het afrekenen of op de PDF factuur bijvoorbeeld.

Een vraag die wij vaak voorbij zien komen is hoe je ervoor zorgt dat er in de winkelmand netjes ‘btw’ komt te staan in plaats van ’tax’, wat er standaard komt te staan. Dit stel je in bij het tarief en dan bij Belastingnaam.

EU VAT Number plugin

Voor een aantal van onze klanten die B2B aan het buitenland verkopen is het van belang dat met een geldig btw-nummer er geen btw berekend wordt. Je moet de BTW verleggen.

Hiervoor adviseren wij de plugin van WooCommerce, dit is de EU VAT Number plugin. Deze plugin controleert of er een geldig btw-nummer is ingevoerd via een grote database met de naam VIES en als dit klopt, wordt er geen btw berekend.

BTW instellen in WooCommerce

In deze video vertellen we je hoe je de WooCommerce BTW kunt instellen.

Op een WooCommerce webshop afrekenpagina heb je standaard geen optie om het aantal producten te wijzigen. Omdat je gebruik maakt van de meest flexibele software voor je webshop heb je natuurlijk de mogelijkheid om dit met een plugin alsnog toe te voegen. Deze plugin vind je hier.

Change Quantity on Checkout for WooCommerce

Een voorbeeld van de plugin in actie zie je in het screenshot hieronder.

WooCommerce checkout aanpassen zonder plugin

Als je liever geen WordPress plugin gebruikt zijn er ook functies te vinden die je bijvoorbeeld toevoegt aan de functions.php van je thema om dit mogelijk te maken.

Tenslotte is het niet noodzakelijk om overal een volledige plugin voor te installeren, om de snelheid van je webshop optimaal te houden is het zelfs af te raden om zomaar allerlei plugins toe te voegen.

Automatisch aantal updaten in winkelmand WooCommerce

Nu heb je de mogelijkheid om het aantal producten aan te passen tijdens het afrekenen. Maar als je het aantal producten wijzigt mis je de knop ‘winkelmand bijwerken’ zoals je die misschien kent. Hoe voeg je die toe? WooCommerce heeft hiervoor de premium betaalde plugin Auto Update Cart for WooCommerce.

Gebruikelijk in een WooCommerce webshop is dat als een bezoeker op de knop ‘in winkelmand’ klikt dat de pagina dan herladen wordt. Je hebt binnen WooCommerce ook de mogelijkheid om je bezoeker direct naar de winkelmand te sturen, dit kun je met een vinkje in de WooCommerce-instellingen aanzetten.

Maar is dit voldoende voor jouw webshop? Wat ons betreft niet voor ieder soort webshop. Je belast een bezoeker die wil afrekenen met een extra stap die je conversie kan beïnvloeden. Bij sommige producten of een zeer beperkt assortiment is dit simpelweg overbodig.

Landingspagina knop

Ons advies is om de knop die je gebruikt op de landingspagina direct door te laten sturen naar de afrekenpagina. Hiervoor zijn verschillende oplossingen te vinden, de eerste is een plugin met de naam WooCommerce Direct Checkout. Een andere optie is een stukje code toevoegen aan de URL van de button als je deze mogelijkheid hebt. Dit is iets ingewikkelder en niet in alle gevallen mogelijk maar heeft wel de voorkeur boven een extra plugin.

Als laatste is er ook de optie om in de WooCommerce-instellingen jouw afrekenpagina in te stellen als winkelmandpagina. Je verwijdert dus in principe de echte winkelmandpagina en vervangt deze voor de afrekenpagina. Dit zijn beiden standaard pagina’s in WooCommerce.

Bij die laatste optie moet je er wel rekening mee houden dat als je deze methode gebruikt, een bezoeker in principe niet meer de mogelijkheid heeft om het aantal te bestellen producten nog te wijzigen. Gelukkig is hier ook een oplossing voor, deze vind je hier.