Elementor Pro 3.4 en WooCommerce – Een hele stap vooruit!
Nog niet zo gek lang geleden is Elementor Pro 3.4 uitgekomen. En ik moet zeggen, dat ik hier persoonlijk heel blij mee ben. Eén van de belangrijkste onzichtbare verbeteringen is dat Elementor Pro 3.4 nog minder code genereert, wat indirect betekent, dat je site nog sneller wordt.
Maar ook qua zichtbare functionaliteiten zit er een groot aantal verbeteringen in. En de beste hiervan zijn denk ik wel de verbeteringen met betrekking tot WooCommerce.
Dynamic tags voor WooCommerce
Eén van de mooiste verbeteringen in Elementor Pro 3.4 is denk ik wel de toevoeging van Dynamic Tags voor WooCommerce. Maar wat zijn dynamic tags?
Wanneer je werkt met Elementor Pro, dan bestaat er de mogelijkheid om bij bepaalde widgets de waarde die in een veld ingevoegd moet worden, niet met de hand in te voegen, maar deze op een andere manier te laten vullen. Bijvoorbeeld door de waarde van een variabele of een veld in de database.
Dat kan al heel lang in Elementor, maar tot voor kort ontbraken eigenlijk de mogelijkheden om ook WooCommerce gegevens op deze manier te tonen.
De kracht van deze mogelijkheid is, dat ik nu voortaan ook op niet product pagina’s informatie van bepaalde producten kan tonen.
Ik laat dit het liefst met behulp van een voorbeeld zien.
Stel, ik heb op mijn homepage een aanbieding van de week voor mijn webshop. In het verleden was er geen directe koppeling tussen bijvoorbeeld de prijs van het product en het product zelf. Wanneer ik om wat voor reden dan ook de prijs van het product aan zou passen, zou op de pagina de aanbieding nog steeds staan, met de niet aangepaste prijs.
Dat kan nu anders. Ik kan nu op iedere willekeurige pagina, blogbericht of zelfs in een pop up de prijs van een specifiek product laten zien. Pas ik het aan in de database zal de prijs ook automatisch worden aangepast op alle plaatsen waar de prijs nog meer is genoemd.
Bijvoorbeeld op de homepage. Als ik daar een prijs zou willen laten zien van een product, dan plaats ik een ‘Tekstbewerker’ widget op de homepage.
Vervolgens klik ik op de ‘stapel pannenkoeken’ naast het URL veld. Dan zie ik een lijst verschijnen en als ik hier bijna naar beneden scroll zie ik iets als ongeveer het onderstaande :
Je ziet hier een lijst met verschillende WooCommerce velden. We kiezen hier ‘Product Price’.
Er zal nog niets gebeuren. En dat is logisch. Want je hebt zojuist wel aan Elementor verteld, dat je de productprijs wilde zien, maar nog niet van welk product. Net voor het veld ‘Product Price’ zie je echter een moersleutel staan, die moet je aanklikken.
Wanneer je dat doet, dan krijg je een veld te zien waar je de productnaam in kan geven.
Naast de naam van het product is er nog een tweede veld, waar je aan kan geven wat het formaat van de prijs moet zijn. Hierbij heb je de volgende keuzes.
- Original : De ‘gewone prijs’
- Sales : De sales prijs
- Both : Allebei de prijzen.
Een product kan je makkelijk kiezen door een aantal letters uit de naam van het product in te tikken, de lijst met passende producten zal dan snel worden getoond.
En wanneer deze instellingen allemaal netjes zijn ingegeven, zal voortaan de productprijs op de pagina exact dezelfde zijn als die in de database.
Dit in combinatie met online leeromgevingen
Persoonlijk ben ik heel blij met deze ontwikkeling. Zoals je ongetwijfeld weet, bouw ik online leeromgevingen voor klanten. Bij zo’n online leeromgeving wordt op de achtergrond WooCommerce gebruikt voor het afrekenen. Helaas was het tot voor kort niet mogelijk om de prijs die bij het afrekenen werd gebruikt direct te koppelen met de prijs op de salespagina. De klant moest dus bij een aanbieding of een prijsaanpassing op twee plaatsen deze prijs aanpassen.
Dat is nu dus niet meer nodig.
Nog meer moois in Elementor 3.4
Een ander mooie toepassing is de mogelijkheid om de ‘In Cart’ knop direct te gebruiken op een willekeurige pagina. Ongeveer hetzelfde idee als met de hierboven genoemde dynamic tags. Wanneer je een ‘Custom Add To Cart’ widget op een willekeurige pagina plaatst, krijg je een knop met de tekst ‘Add to cart’.
In de lijst kan je dan het product uitkiezen wat bij het drukken op de knop in de winkelwagen geplaatst zal worden. Ook weer heel handig voor een salespage of voor een speciale aanbieding op je homepage.
Je kan hier facultatief wel of geen ‘aantallen’ veld toevoegen, zodat er meerdere exemplaren van het product gekocht kunnen worden.
Is jouw product een ‘Variabel product‘, ofwel een product met varianten, dan is er ook geen probleem. De velden voor het opgeven van de variabele gegevens (bijvoorbeeld kleur en maat voor kleding) worden automatisch geplaatst.
Dit was in het verleden al mogelijk, maar wel op een heel gebruikersonvriendelijke manier. Namelijk door een URL in te geven bij een knop met een formaat lijkend op iets als
https://zomaareenwebsite.nl/winkelmand/?add-to-cart=123 waarbij ‘123’ dan de ID van het product was, kon dit al, maar het is nu een stuk makkelijker en vooral intuitiever geworden. Wat echter niet zo makkelijk was, was ook de kenmerken van een variabel product mee te geven.
Een nieuwe winkelmand
En de derde nieuwe toepassing in WooCommerce is de ‘mini cart’. Standaard werd tot voor kort de inhoud van een winkelwagen getoond als een ‘slide in’ aan de rechterkant van het scherm. Zoiets als onderstaande afbeelding.
Sinds WooCommerce 3.4 is er ook een andere optie. Namelijk dat de winkelwagen wordt getoond als een pop up. Dit is leuk, maar een tweede nieuwe optie is nog veel leuker.
Standaard voegt WooCommerce eigenlijk ‘stilletjes’ producten toe aan de winkelwagen. Je klikt op de knop, en boven op het scherm komt een tekstregel, dat het product is toegevoegd, en dat is alles.
Sinds Elementor Pro 3.4 is het echter ook mogelijk om de winkelwagen widget zo in te stellen, dat bij iedere keer dat een product wordt toegevoegd, het pop up menu van de winkelwagen wordt getoond. Een aardige optie die doorgaans tot een conversieverhoging van 5-10% kan leiden.
Kortom
Kortom, er is heel wat mooi nieuws aan de hand met Elementor Pro 3.4, speciaal in combinatie met WooCommerce. Nog een extra reden om jouw webwinkel door WordXPression te laten bouwen met toepassing van WooCommerce en Elementor Pro.
