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.

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.

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

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?

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

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.

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

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.

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

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’

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

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

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

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.

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

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…

Natuurlijk wil niet iedereen zelf zijn of haar website bouwen. En voor deze mensen is het goed, dat WordXPression websites, webshops en online leeromgevingen bouwt met behulp van Elementor, Elementor Pro en sinds 1 juni hoort ook PiotNet PAFE tot de standaard toolset.

Ben je op zoek naar een nieuwe website, zorg dan dat je op de hoogte blijft. Door je in te schrijven op onze nieuwsbrief of je aan te melden voor de browser pushberichten.

Dat laatste kan je doen door op de rode bel linksonder te klikken en daarna de instructies te volgen.

Wees eens aardig en deel dit met je vrienden
Enkele trefwoorden om vergelijkbare posts te vinden:

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Flinke kortingen op cursussen van WordXPression.