WooCommerce producten even hoog in je product archief, hoe doe je dat?

Laat me jou even op de hoogte brengen… De juiste hoogte wel te verstaan.

Dit artikel is al wat ouder en met Elementor Pro zijn er -indien je gebruik maakt van het Flexbox layout model, verschillende andere mogelijkheden om zaken op gelijke hoogte te brengen, zonder dat hier plugins voor nodig zijn.

Zie het trainingen pakket van WordXPression voor meer informatie.

Eén van de grote irritaties met betrekking tot WooCommerce is wel de schijnbare onmogelijkheid om alle producten op eenzelfde hoogte in te stellen. Dat heeft een aantal oorzaken, waarbij een aantal oorzaken redelijk logisch is, een aantal andere oorzaken wat minder.

Eén van die oorzaken is bijvoorbeeld de lengte van de naam van je product. Een titel als ‘Blauwe blouse’ neemt bijvoorbeeld heel wat meer ruimte in beslag dan ‘Blauwe dames blouse met wit kanten kraagje in 17 eeuwse stijl’.

Kijk eens naar onderstaand voorbeeld. Dat moet toch mooier kunnen, zou je zo denken.

Zoals je hier ziet, zorgt de lange titel ervoor, dat de knop ‘in winkelmand’ naar beneden wordt gedrukt.

Dat kunnen we echter makkelijk voorkomen. Want de tekst staat op vier regels. Als ik nu door middel van CSS de titel hoog genoeg maakt, om de complete tekst te laten zien, dan staan alle knoppen weer gelijk.

Tegenwoordig kan je voor vrijwel ieder thema via de Customizer van je thema een extra stukje CSS invoegen. De code die je hier moet gebruiken is :

ul.products li.product .woocommerce-loop-product__title,  {
    min-height: 80px;
}

Het aantal pixels wat je bij ‘min-height’ opgeeft mag je naar eigen smaak en behoefte invullen.

Je krijgt nu voortaan evenveel ruimte voor je titels. Maar is dat wel zo fraai?

Dat ziet er beter uit dan het eerdere voorbeeld.

Toch is dit een resultaat waar ik zelf niet zo enthousiast over ben. Want je ziet dat hier op de tweede regel een heleboel overbodige witruimte staat.

Bovendien zal ik zodra ik een keer een titel heb die nog een regel langer is, opnieuw aan de slag moeten gaan met de CSS.

Het is een acceptabele, maar geen ideale oplossing.

Piotnet Add Ons For Elementor (PAFE)

Enige tijd geleden heb ik de Piotnet plugin al eens genoemd. Een handige plugin met allerlei uitbreidingen voor Elementor en Elementor Pro. Er zit echter zoveel in, dat het enige tijd kost om het allemaal te ontdekken.

Eén van die mooie extra’s zijn een aantal ‘equal height’ rules die bij vrijwel iedere widget ingesteld kunnen worden. Om te beginnen ‘Equal height for WooCommerce’.

Laten we eerst eens bekijken, wat we krijgen te zien wanneer we deze ‘rule’ gebruiken.

Je ziet hier drie verschillende productregels.

Op de eerste regel heeft één productnaam een extreem lange lengte, op de tweede zijn alle namen ongeveer even lang, en op de laatste regel is één productnaam ’te lang’.

Op iedere regel wordt de hoogte netjes aangepast aan de ‘hoogste’ productnaam op die specifieke regel. En zo krijg je een evenwichtige vlakverdeling.

Vereisten

Deze laatste oplossing is echter alleen maar beschikbaar wanneer je werkt met zowel Elementor als Elementor Pro. Want alleen Elementor Pro heeft ‘WooCommerce Widgets’ waarmee je een compleet overzicht van de producten op je pagina kan zetten. Elementor heeft dat niet.

Een tweede belangrijk punt is, dat je het productoverzicht ook door de Elementor Pro widgets en niet door het thema zelf laat genereren. Je moet dus aan de slag met de Elementor Theme builder. Want deze ‘gelijke hoogte’ is een extra property die aan je WooCommerce Archive en je WooCommerce Products widget worden toegevoegd.

En tenslotte heb je natuurlijk de PiotNet plugin nodig. Wees gerust, deze is zijn geld meer dan waard, omdat dit maar één van de vele leuke functies is.

Een voorbeeld

En nu we toch bezig zijn, waarom zou ik je niet laten zien hoe makkelijk het werkt.

Je gaat gewoon naar je Elementor WooCommerce widgets toe en je klikt op het (extra) tabblad PAFE. Dit tabblad is er alleen, wanneer je ook de PiotNet Pro plugin hebt geïnstalleerd.

Je krijgt dan een lange lijst met extra mogelijkheden te zien.

Eén van die mogelijkheden is dus ‘PAFE Equal Height for WooCommerce Products’. Het enige wat je hoeft te doen, is de schakelijk om te zetten naar ‘Yes’.

Laat me je verder op de (juiste) hoogte brengen…

Maar je kan meer. Waarschijnlijk is het in het plaatje hierboven al opgevallen, dat er nog twee andere regels staan ‘PAFE Equal Height’ en ‘PAFE Equal Height for CTA’.

Laat me de PAFE Equal Height for CTA eens voor je bespreken. De andere regel doet en werkt vrijwel hetzelfde, maar dan op alle andere widgets, behalve CTA.

Call to Actions

Je kent het vast wel. Zo’n prachtige homepage met naast elkaar een drietal keuzes. ‘Ja ik doe 1, ik doe 2 of ik doe 3…’

Maar ook hier, net zoals bij producten, is de symmetrie ver te zoeken, wanneer je titels of omschrijvingen ongelijke lengtes hebben.

Kijk eens naar dit ‘standaard voorbeeld’

Ziet er vrij rommelig uit, nietwaar?

Natuurlijk kunnen we ze op gelijke hoogte brengen, door de tekst te redigeren, maar het kan ook op een andere, meer toepasselijke manier.

Het werkt alleen wel iets anders dan met de WooCommerce Widget

CTA – stap voor stap

Je ziet dat er hier heel wat meer ingesteld moet worden. Eén van de zaken die je namelijk ook in zal moeten stellen, is of op verschillende devices de ‘gelijke hoogte’ aangehouden zal moeten worden.

Want wanneer op een mobiel bijvoorbeeld de CTA’s onder elkaar komen te staan, is er geen enkele reden, om ze daar ook een gelijke hoogte te geven.

Het instellen van ‘slugs’

Met WooCommerce ‘weet’ de regel voor gelijke hoogte op welke elementen de ‘gelijke hoogte’ regel moet worden toegepast, omdat de widget verantwoordelijk is voor het ’tekenen’ (renderen) van alle producten.

Maar met CTA’s werkt het wat anders. Want een CTA staat op zichzelf, en hoe kan Elementor weten welke CTA’s op welke hoogte gerenderd moeten worden?

Dat kan door het instellen van ‘slugs’. Een ‘slug’ is een fantasienaam die mag bestaan uit letters, cijfers en ‘middenstreepjes’. ‘cta’ is bijvoorbeeld een heel acceptabele slug.

Of als je twee groepen van CTA’s op je pagina hebt, noem je de elementen in de éne groep ‘cta-1’ en de andere groep ‘cta-2’.

In mijn voorbeeld heb ik drie CTA’s naast elkaar, die ik allemaal even hoog wil hebben. In het ‘slug’ veld heb ik overal ‘cta-1′ ingegeven. En alle CTA’s met en slug van ‘cta-1’ zullen dus dezelfde hoogte krijgen.

Het eindresultaat

En het eindresultaat komt er dan als volgt uit te zien.

En je ziet het. De titels die staan netjes uitgelijnd met elkaar, net zoals de tekst eronder. En helemaal onderaan komt netjes de knop te staan.

Precies zoals je het zou mogen verwachten.

Tenslotte…

Wil je meer weten over Elementor, WooCommerce of online leeromgevingen, kijk dan ook eens naar de trainingen die WordXPression aanbiedt.