WooCommerce e-mails aanpassen en stylen met Kadence

Als je de WooCommerce e-mails wilt aanpassen kun je de standaard templates aanpassen, als je deze in je child-theme plaatst kun je ze aanpassen zonder dat ze overschreven worden. Dit is complex en hiervoor heb je kennis van PHP nodig. Een andere optie is om gebruik te maken van de gratis WordPress plugin Kadence WooCommerce Email designer. Hiermee kun je per template de look bepalen en de content die getoond zal worden aanpassen.

Van deze WordPress plugin is alleen een gratis versie die alle functionaliteit bevat.

WooCommerce emails instellen

WooCommerce e-mails?

Er zijn verschillende e-mails die in verschillende fases van een webshop bestelling verstuurd worden. Je kunt hierbij denken aan de e-mail die een klant ontvangt als een bestelling geplaatst is. Op datzelfde moment ontvang jij als webshop beheerder ook een e-mail met de bestelling. Vervolgens zal de klant een e-mail ontvangen als jij de bestelling afgerond en verzonden hebt in je webshop.

Uiteraard wil je dat de styling van deze e-mails aansluit bij jouw huisstijl. Hoe doe je dit? Je kunt handmatig de WooCommerce templates gaan aanpassen/stylen. Als je hiervoor de kennis hebt is dit uiteraard geen probleem, houd er wel rekening mee dat templates van WooCommerce regelmatig aangepast worden en jouw custom werk hierdoor niet meer zal werken.

Onze voorkeur gaat hierom uit naar een plugin om de e-mails vorm te geven. Op dit moment maken wij meestal gebruik van de gratis Kadence WooCommerce Email Designer. Onze mening is dat deze plugin ruim voldoende is en de e-mails er keurig netjes uit zien als ze verzonden worden naar de klant. Op Codecanyon.net zijn er nog diverse betaalde varianten te vinden mocht je daar gebruik van willen maken.

Binnen Kadence kun je iedere e-mail apart vullen. De basistemplate die je kiest wordt toegepast op alle e-mails.

In principe heb je nu alle basis instellingen gemaakt voor een webshop. Wat heb je nog meer nodig? Producten natuurlijk. Want zonder producten is je hele webshop niets waard.

Kadence WooCommerce Email Designer

FacetWP sorteeropties aanpassen

FacetWP is een geavanceerde filtering-plugin die het sorteren en filteren van producten op een WooCommerce-site vereenvoudigt. Het is mogelijk om de sorteeropties aan te passen om beter aan te sluiten bij de behoeften van de website en de verwachtingen van de gebruikers.

Dit artikel illustreert hoe je aangepaste sorteeropties kunt implementeren in FacetWP voor WooCommerce, met behulp van specifieke codes die toegevoegd kunnen worden aan de functions.php van het child-thema of via een plug-in zoals Code Snippets.

Stap 1: Code toevoegen aan functions.php of een plugin

Voor het aanpassen van de sorteeropties, moet je de volgende code toe te voegen aan het functions.php bestand van het child-thema.

FacetWP sorterenAls alternatief kun je een WordPress plug-in zoals Code Snippets gebruiken, die het mogelijk maakt om stukken code toe te voegen zonder direct de thema-bestanden te bewerken.

// change facetwp sort by options
add_filter( 'facetwp_sort_options', function( $options, $params ) {
unset( $options['date_asc'] );
unset( $options['title_asc'] );
unset( $options['title_desc'] );
unset( $options['date_desc'] );
$options['default']['label'] = 'Populariteit';

$options['price_asc'] = [
'label' => 'Prijs laag - hoog',
'query_args' => [
'orderby' => 'meta_value_num',
'meta_key' => '_price',
'order' => 'ASC',
]
];
$options['price_desc'] = [
'label' => 'Prijs hoog - laag',
'query_args' => [
'orderby' => 'meta_value_num',
'meta_key' => '_price',
'order' => 'DESC',
]
];

$options['popularity_new'] = [
'label' => 'Populariteit',
'query_args' => [
'orderby' => 'post_views',
'order' => 'DESC',
]
];

return$options;
}, 10, 2 );

Stap 2: Wat doet de code?

De bovenstaande code gebruikt een filter, facetwp_sort_options, waarmee je de standaard sorteeropties van FacetWP kunt aanpassen.

  1. Opties verwijderen:
    • De unset functies worden gebruikt om de standaardopties zoals datum en titel te verwijderen.
  2. Standaardoptie instellen:
    • De default optie wordt ingesteld op ‘Populariteit’.
  3. Prijs sorteeropties toevoegen:
    • Twee nieuwe sorteeropties worden toegevoegd voor het sorteren op prijs: ‘Prijs laag – hoog’ en ‘Prijs hoog – laag’.
  4. Populariteit sorteeroptie toevoegen:
    • Een nieuwe sorteeroptie wordt toegevoegd om te sorteren op populariteit.

Deze PHP-code maakt enkele aanpassingen in de beschikbare sorteeropties in FacetWP. Allereerst worden de standaard sorteeropties zoals date_asc, title_asc, title_desc en date_desc verwijderd met behulp van de unset() functie. Vervolgens worden er nieuwe sorteeropties toegevoegd:

  1. Prijs laag – hoog: Deze optie sorteert de resultaten op prijs van laag naar hoog.
  2. Prijs hoog – laag: Deze optie sorteert de resultaten op prijs van hoog naar laag.
  3. Populariteit: Deze optie sorteert de resultaten op basis van populariteit.

Stap 3: Aanpassingen testen

Na het toevoegen van de code, is het belangrijk om de werking ervan te controleren. Test de nieuwe sorteeropties uitvoerig om er zeker van te zijn dat ze correct functioneren en dat ze de resultaten in de gewenste volgorde weergeven.

Het aanpassen van de FacetWP sorteeropties in WooCommerce kan een effectieve manier zijn om de gebruikerservaring op de WordPress webshop te verbeteren en om de gebruikers meer controle te geven over hoe de producten worden weergegeven.

Door het volgen van de bovenstaande stappen, kun je eenvoudig aangepaste sorteeropties implementeren die beter passen bij de behoeften van de online winkel.

FacetWP Mobile Flyout

Het toevoegen van een FacetWP filter op mobiele apparaten kan worden bereikt door gebruik te maken van een hulpprogramma genaamd Mobile Flyout. Hier volgt een meer gedetailleerde en uitgebreide uitleg over hoe je dit kunt instellen en implementeren.

Stap 1: download en installeer de Mobile Flyout Add-On
Ga naar de officiële website van FacetWP en download de gratis add-on, Mobile Flyout. Na het downloaden, installeer je de plugin op je WordPress website, net zoals je dat zou doen met andere plugins. Dit voegt een extra functionaliteit toe aan de website waardoor je filters ook op mobiele apparaten zichtbaar worden.

Stap 2: voeg code toe
Na het installeren van de add-on, moet je een stukje PHP code toevoegen aan je website. Dit doe je door de onderstaande code toe te voegen in het bestand functions.php van je child-theme. Plaats deze code op de pagina’s waar je de filters wilt weergeven.

function sk_mobile_facet_filter_button () {
echo'<button class="facetwp-flyout-open">Filter</button>';
}

add_action( 'woocommerce_after_shop_loop', 'sk_mobile_facet_filter_button', 99 );

Stap 3: Aanpassingen
Het is ook mogelijk om de knop aan te passen naar wens. Je kunt de tekst, stijl, en plaatsing van de knop aanpassen met extra CSS of door de PHP-code aan te passen.

Facetwp mobile flyout

Stap 4: Test de functionaliteit
Na het volgen van bovenstaande stappen, is het belangrijk om de functionaliteit te testen. Open de website op een mobiel apparaat en ga naar een pagina waar de filter zou moeten verschijnen. Als alles correct is geïnstalleerd en geconfigureerd, zou je nu een “Filter” knop moeten zien die de FacetWP filters laat zien wanneer je erop klikt.

FacetWP filters op mobiel

Eventueel kun je nog de mobile flyout knop verbergen boven een bepaalde schermgrootte. Op een desktop scherm hoeft de filter namelijk niet getoond te worden.

Het gebruik van de Mobile Flyout add-on is een efficiënte manier om FacetWP filters zichtbaar te maken op mobiele apparaten. Op de Engelstalige documentatie pagina van FacetWP vind je nog meer toepassingen en aanpassingen voor de Mobile Flyout.

Veel zaken in WooCommerce kun je vertalen in WooCommerce met bijv. de Loco Translate plugin. Dit zal vaak zonder problemen werken. Het kan voorkomen dat bij een update je vertalingen weer overschreven worden.

Als je de add to cart text wilt vertalen raden wij daarom aan om dit via de onderstaande code te doen.

Change add to cart textChange add to cart text WooCommerce

De in winkelmand knop kun je ook vertalen met die plugin. Een andere optie is om de onderstaande code in je functions.php van je childtheme te plaatsen of in een plugin als bijvoorbeeld code snippets.


// To change add to cart text on single product page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' );
function woocommerce_custom_single_add_to_cart_text() {
return__( 'In uw winkelwagen', 'woocommerce' );
}
// To change add to cart text on product archives(Collection) page
add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' );
function woocommerce_custom_product_add_to_cart_text() {
return__( 'In uw winkelwagen', 'woocommerce' );
}

Conversie optimalisatie WooCommerce

Het kan een onderdeel zijn van een conversie optimalisatie in je webshop als je bijvoorbeeld deze teksten wilt personaliseren. In JOUW winkelmand geeft een bezoeker al het gevoel dat het gekocht is waardoor deze minder snel zal afhaken. Meer conversietips vind je in onze kennisbank.

FacetWP filters integreren in een sidebar widget

FacetWP is een krachtige tool die een verfijnde filtering en zoeken op je webshop mogelijk maakt. Als je FacetWP gebruikt om specifieke filters te creëren, is het cruciaal dat je weet hoe je deze effectief kunt integreren en weergeven. Een gangbare manier is om een FacetWP filter te laden in een widget in de sidebar van je webshop.

Stap 1: maak een facet

Eerst en vooral, voordat je een filter in je sidebar kunt plaatsen, moet je deze creëren binnen de FacetWP interface. Volg de instructies binnen het platform om een facet te maken dat voldoet aan jouw behoeften. Voor meer uitleg verwijzen we je graag naar de website van FacetWP.

Stap 2: verkrijg de shortcode

Wanneer je een facet hebt gemaakt, zie je binnen FacetWP een unieke shortcode die je kunt gebruiken om de filter op je website te plaatsen. Deze shortcode is te vinden in de instellingen van FacetWP en ziet eruit als volgt: .

FacetWP shortcode

Stap 3: voeg de shortcode toe aan een widget

Om de facet zichtbaar te maken in je webshop, kopieer en plak je simpelweg de shortcode in een HTML-widget van je shop sidebar. Dit kan meestal gedaan worden vanuit het widget-gedeelte van het WordPress-dashboard.

Stap 4: integratie in paginatemplates

Voor diegenen die bekwaam zijn in PHP, is er ook de mogelijkheid om deze shortcodes direct in te laden in je paginatemplates. Dit kan voordelig zijn als je een meer op maat gemaakte integratie van de facetten wenst en biedt meer controle over de plaatsing en weergave van de filters op je site.

Extra tips

  1. Styling: vergeet niet om de styling van je filters aan te passen zodat deze consistent is met het design van je webshop.
  2. Testen: test de werking van je nieuwe facetten grondig om er zeker van te zijn dat ze naar behoren functioneren en de juiste resultaten weergeven.
  3. Gebruiksvriendelijkheid: overweeg de gebruiksvriendelijkheid bij het plaatsen van de filters. Ze moeten intuïtief en toegankelijk zijn voor de gebruikers om de gebruikservaring te optimaliseren.
  4. Onderhoud: houd de FacetWP-plugin up-to-date om te verzekeren dat je gebruikmaakt van de nieuwste functies en om eventuele beveiligingsproblemen te vermijden.

Door deze stappen en tips te volgen, kun je de FacetWP filters naadloos integreren in je webshop en zo een betere webshop te ontwikkelen.

Google Mijn Bedrijf is een kosteloze dienst van Google, speciaal ontworpen voor bedrijven met een fysieke locatie om hun zichtbaarheid te verbeteren. Het is een cruciaal instrument voor iedereen die de online vindbaarheid van hun WordPress website serieus wil nemen. Door middel van dit platform kan elk bedrijf, of het nu een restaurant, winkel, of webdesignbureau is, zich aanmelden en locatiegebaseerde informatie delen.

Hoe werkt het?

Wanneer iemand zoekt naar een specifieke dienst of bedrijf in een bepaalde stad of regio, bijvoorbeeld ‘webdesignbureau den Haag‘, verschijnt er direct onder de advertenties een lijst met bedrijven die aan deze zoekterm voldoen. Als jouw bedrijf gevestigd is in den Haag, is de kans groot dat jouw bedrijf ook in deze lijst verschijnt, mits je Google Mijn Bedrijf correct hebt ingesteld.

Google Mijn BedrijfMogelijkheden van GMB

  • Klantreviews: Bedrijven kunnen klanten vragen om reviews achter te laten. Deze recensies zijn zichtbaar voor iedereen die het bedrijf opzoekt en kunnen potentieel nieuwe klanten aantrekken.
  • Openingstijden: Bedrijven kunnen hun openingstijden zichtbaar maken, zodat klanten weten wanneer ze langs kunnen komen.
  • Posts plaatsen: Het is ook mogelijk om posts te plaatsen over nieuwtjes, aanbiedingen of evenementen. Dit helpt om klanten op de hoogte te houden van de laatste ontwikkelingen.

Voordelen voor WordPress gebruikers

Voor WordPress gebruikers is Google Mijn Bedrijf ook zeker nuttig. Het verbetert de lokale SEO en vergroot de zichtbaarheid van de website in de zoekresultaten van Google, wat essentieel is voor bedrijven die hun online aanwezigheid willen versterken. Door gebruik te maken van dit platform, kunnen WordPress gebruikers de geloofwaardigheid en betrouwbaarheid van hun bedrijf vergroten, wat weer kan leiden tot meer klanten en een grotere omzet.

Hoe aan de slag te gaan?

  1. Aanmelden en verifiëren: Meld je bedrijf aan op Google Mijn Bedrijf en verifieer je locatie door de instructies van Google te volgen.
  2. Informatie toevoegen: Vul alle relevante informatie over je bedrijf in, zoals de bedrijfsnaam, het adres, de openingstijden en contactgegevens.
  3. Foto’s en posts toevoegen: Voeg kwalitatieve foto’s toe van je bedrijf en maak gebruik van de post-functie om updates en aanbiedingen te delen.
  4. Reviews verzamelen: Nodig klanten uit om reviews achter te laten en reageer professioneel op alle feedback, zowel positief als negatief.

Google Mijn Bedrijf is een onmisbare tool voor elke onderneming met een fysieke locatie die de vindbaarheid van hun WordPress website wil optimaliseren. Het biedt een platform voor interactie met klanten, het delen van belangrijke informatie en het verbeteren van de online reputatie.

Door het effectief inzetten van Google Mijn Bedrijf, kunnen bedrijven hun online zichtbaarheid vergroten en een betrouwbare en professionele indruk maken op potentiële klanten.

Wat is de WPRocket plugin voor WordPress?

WPRocket is een premium WordPress-plugin die speciaal is ontworpen om de prestaties van je website of webshop aanzienlijk te verbeteren door het cachen van je content.

Met de WPRocket plugin kun je op eenvoudige en effectieve wijze de snelheid van je WordPress-website optimaliseren, zonder dat je heel veel technische kennis nodig hebt. Deze krachtige caching-plugin biedt verschillende functies en voordelen waarmee je de laadtijd van je site kunt versnellen en de algehele gebruikerservaring kunt verbeteren.

WP Rocket

De WPRocket-plugin

  1. Paginacaching: WP Rocket maakt gebruik van pagina-caching om statische kopieën van je webpagina’s op te slaan. Hierdoor kunnen bezoekers sneller toegang krijgen tot je website, omdat de server niet elke keer de pagina hoeft te genereren bij elk verzoek.
  2. Browsercaching: Deze functie zorgt ervoor dat de browser van de gebruiker statische bronnen zoals afbeeldingen, JavaScript en CSS-bestanden langer kan opslaan, waardoor herhaalbezoeken aan je site sneller worden geladen.
  3. Minificatie en optimalisatie van bronnen: WP Rocket minimaliseert en optimaliseert automatisch je CSS, JavaScript en HTML-bestanden, wat resulteert in kleinere bestandsgroottes en snellere laadtijden.
  4. Lazy Loading: Afbeeldingen worden pas geladen als ze zichtbaar zijn in het browservenster van de gebruiker, wat de paginasnelheid verder verbetert.
  5. Database-optimalisatie: WP Rocket biedt tools om onnodige gegevens in je WordPress-database op te schonen, waardoor je site efficiënter werkt.
  6. Compatibiliteit: De plugin is compatibel met de meeste populaire thema’s en andere WordPress-plugins, wat ervoor zorgt dat je geen conflicten hoeft op te lossen.
  7. Eenvoudige installatie en configuratie: WP Rocket heeft een intuïtieve gebruikersinterface waarmee zowel beginners als gevorderde gebruikers snel aan de slag kunnen.

Voordelen WPRocket

  • Verbeterde snelheid: Door de laadtijd van je website te versnellen, bied je bezoekers een betere ervaring en verbeter je je zoekmachineoptimalisatie (SEO).
  • Hoger conversiepercentage: Snellere websites hebben vaak een hoger conversiepercentage, wat kan leiden tot meer verkoop en betere resultaten voor je webshop.
  • Gebruiksvriendelijkheid: WP Rocket is ontworpen met gebruiksgemak in gedachten, wat betekent dat je geen technische achtergrond nodig hebt om het te gebruiken.
  • Ondersteuning en updates: Als premium plugin ontvang je regelmatig updates en toegang tot klantenondersteuning voor eventuele vragen of problemen.

De WPRocket-plugin is een waardevolle investering voor WordPress-gebruikers die hun website of webshop willen optimaliseren en de prestaties willen verbeteren zonder gedoe. Met zijn indrukwekkende reeks functies en eenvoudige configuratie, helpt WP Rocket je om een snellere en efficiëntere online aanwezigheid te creëren. Als je WordPress onderhoud bij Lamper Design hebt kunt je gratis gebruik maken van deze WordPress plugin.

Bestel direct WP Rocket plugin met korting

Avada thema opties zoekfunctie: Vind snel wat je nodig hebt!

Het Avada thema, één van de meest populaire WordPress thema’s op de markt, staat bekend om zijn flexibiliteit en veelzijdigheid. Met zoveel functies en opties kan het echter soms overweldigend zijn om precies te vinden wat je nodig hebt. Gelukkig komt Avada met een zeer handige zoekfunctie om dit proces te vergemakkelijken.

Zoek thema opties avada

Waarom de zoekfunctie gebruiken?

Wanneer je door de thema opties navigeert, kan het zijn dat je wordt overweldigd door de hoeveelheid tabbladen en subcategorieën. Of misschien ben je bekend met de interface, maar wil je gewoon snel een bepaalde optie vinden. In beide gevallen is de zoekfunctie je beste vriend.

Hoe de zoekfunctie werkt

Bovenaan de thema opties zie je een zoekbalk. Typ hier simpelweg in wat je zoekt, en de resultaten verschijnen onmiddellijk. Als je bijvoorbeeld zoekt naar ‘button’, dan toont de zoekfunctie alle plaatsen binnen de thema opties waar je instellingen voor buttons kunt wijzigen. Dit bespaart je kostbare tijd en maakt het proces een stuk soepeler.

Tips voor het gebruik van de zoekfunctie

  1. Wees specifiek: Hoe duidelijker je zoekterm, hoe beter de resultaten.
  2. Gebruik steekwoorden: In plaats van te zoeken naar ‘Hoe verander ik de kleur van een button?’, kun je beter zoeken naar ‘button kleur’.
  3. Maak gebruik van de voorbeeldfunctie: Veel van de thema opties geven een kleine preview van de veranderingen. Zo kun je direct zien of je op de juiste plek zit.

Het Avada thema biedt een uitgebreid scala aan opties voor website-eigenaren. Dankzij de geïntegreerde zoekfunctie kun je nu sneller en efficiënter de gewenste instellingen vinden en aanpassen.

Wil je meer te weten komen over alle functies en mogelijkheden van het Avada thema? Lees dan ons uitgebreide artikel over Avada. Overweeg je het Avada thema voor je website? Bestel het dan direct* en ervaar zelf de veelzijdigheid en gebruiksvriendelijkheid van dit topthema.

Lees alles over het Avada thema in ons artikel over Avada.
Bestel direct het Avada thema*

 

Avada snelheidstip over fonts

Fonts, ook wel lettertypen genoemd, spelen een grote rol in het ontwerp en de gebruikerservaring van een website. Het Avada-thema, één van de meest populaire WordPress-thema’s, biedt uitgebreide mogelijkheden voor het aanpassen van lettertypen. Maar wist je dat de manier waarop je fonts instelt ook invloed kan hebben op de snelheid van je site?

Fonts belangrijk voor laadsnelheid?

Elk lettertype dat je kiest om te gebruiken op je website, vooral als het een extern webfont betreft zoals die van Google Fonts of Typekit, moet worden gedownload door de browser van de bezoeker. Als dit font om welke reden dan ook niet beschikbaar is of niet kan worden gedownload, kan dit de laadtijd van de pagina vertragen.

Avada lettertypes

Hoe optimaliseer je de font-instellingen in Avada?

Als je al lettertypen hebt ingesteld in de Avada thema opties van je website onder Typography > Heading Typography, zorg er dan voor dat je een aantal extra stappen volgt voor optimale prestaties:

  1. Backup fonts: Zoals eerder genoemd, is het essentieel om backup fonts of ‘fallback’ lettertypen in te stellen. Deze zullen direct worden gebruikt als het primaire font om welke reden dan ook niet kan worden geladen. Dit voorkomt dat de browser tijd verspilt aan het zoeken naar een alternatief, wat de laadsnelheid van je site ten goede komt.
  2. Beperk het aantal lettertypen: Hoe meer fonts je gebruikt, hoe trager je site kan worden. Kies voor consistentie in design en beperk het aantal verschillende lettertypen. Als je meerdere gewichten van een lettertype (bijv. licht, normaal, vet) wilt gebruiken, probeer dan het aantal tot een minimum te beperken.
  3. Host fonts lokaal: In plaats van te vertrouwen op externe bronnen, overweeg je fonts lokaal op je server te hosten. Dit kan de afhankelijkheid van externe servers verminderen en de laadtijd verbeteren.
  4. Gebruik moderne bestandsformaten: WOFF2 is een modern font-bestandsformaat dat betere compressie biedt dan traditionele formaten. Als je fonts lokaal host, zorg er dan voor dat je ze in dit formaat beschikbaar hebt.

Lettertypen kunnen zowel een visuele impact hebben op je website als invloed hebben op de laadsnelheid. Door aandacht te besteden aan de manier waarop je fonts instelt in het Avada-thema, kun je zorgen voor een snellere, vlottere gebruikerservaring voor je bezoekers.