WooCommerce product titel inkorten

WooCommerce product titel inkorten

Past de titel in je WooCommerce product matrix niet? Zo pas je het aan.

Eén van de meest terugkerende problemen met WooCommerce is de ‘ongelijkheid’ in de hoogte van producten in een matrixoverzicht. En daar valt eigenlijk heel weinig aan te doen.

Je kan er iets aan sleutelen, door ervoor te zorgen, dat de ruimte voor de product titel een bepaalde hoogte heeft, zodat de meeste titels wel zullen passen, maar zodra je ook maar één product titel per ongeluk iets te lang invult, dan ligt je hele layout weer overhoop.

Eén manier om dat tegen te gaan is door automatisch te lange titels in te korten. En dat is eigenlijk best eenvoudig om te doen. Je kan dit inkorten op basis van het aantal tekens, of op basis van het aantal woorden laten doen. Ik zal je beide opties laten zien.

Inkorten op basis van het aantal tekens

Inkorten op basis van het aantal tekens levert over het algemeen de beste resultaten op. Hoewel tekens niet allemaal even breed zijn, kom je meestal toch wel uit op een aardige gemiddelde breedte. Met woorden is het lastiger om toch nog een ‘sprekende’ ingekorte titel te krijgen.

Laten we eens naar de code kijken op basis van het aantal tekens:

<?php 
add_filter( 'the_title', 'wxp_shorten_woo_product_title',80,2);
 
function wxp_shorten_woo_product_title( $title, $id ) {
   if ( is_shop() && get_post_type( $id ) === 'product' ) {
      return substr( $title, 0, 15 ); 
   } else {
      return $title;
   }
}

De regels 5 en 6 wil ik even graag wat toelichten.

De functie is_shop() op regel 5 test of de pagina waarvoor de filter wordt aangeroepen een ‘shop’ page is, of met andere woorden een pagina met een productoverzicht. Want we willen natuurlijk de titel alleen voor die pagina’s inkorten, niet voor de enkelvoudige productpagina.

De functie ‘substr($title,0,15)’ op regel 6 kort de titel in op 15 tekens. Omdat PHP bij lengte van dingen vaak bij 0 begint te tellen, betekent deze functie dus : Begin bij ‘$title’ op positie 0 (eerste letter) en neem vandaar vandaan 15 tekens’.

Wil je de titel langer hebben, dan moet je dus gewoon het aantal tekens verhogen, ofwel van 15, 20 of 30 of welke door jou gewenste lengte dan ook maken.

Maar hoe doen we het, als we een aantal woorden willen laten zien.

Inkorten op basis van het aantal woorden

Inkorten op basis van het aantal woorden is vaak niet de beste oplossing. Want stel je voor, dat je boeken zou verkopen. Een titel als ‘De man die zijn haar kort liet knippen’ en ‘Scheherazade’s verhalen uit duizend en één nacht’ zien er afgekort op vier woorden respectievelijk als volgt uit :

  • De man die zijn
  • Scheherazade’s verhalen uit duizend

Toch wel een heel substantieel lengteverschil, nietwaar? En bovendien is de eerste titel toch wel heel nietszeggend.

<?php 
add_filter( 'the_title', 'wxp_shorten_woo_product_title',80,2);
 
function wxp_shorten_woo_product_title( $title, $id ) {
   if ( is_shop() && get_post_type( $id ) === 'product' ) {
      return wp_trim_words($title, 4); 
   } else {
      return $title;
   }
}

De functie ‘wp_trim_words’ op regel 6 heeft twee parameters, de titel en het aantal woorden waarna afgekort moet worden.

Mag de titel ook op 1 regel?

Beide bovengenoemde oplossingen zijn goed, wanneer wilt, dat een titel ook op meerdere regels komt te staan. Wil je de lengte van de titel standaard tot 1 regel beperken, dan heb je helemaal geen PHP code nodig, maar kan je dit ook met CSS oplossen. Plaats onderstaand codefragment in de ‘Custom CSS’ sectie van je thema, of in de style.css van je child theme :

.woocommerce ul.products li.product h3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

Wat je hier regel voor regel zegt is

  1. Voor de volgende acties selecteer ik de ‘h3’ (de titel) van de producten in de WooCommerce producten matrix.
  2. Op het moment dat iets niet past, moet het verborgen worden
  3. Wanneer de tekst te lang is, laat dat zien door 3 puntjes aan het einde (een ellipsis)
  4. Als de tekst niet past, begin geen nieuwe regel.

Wil je inderdaad de titel slechts op één regel hebben, is de laatste oplossing de beste. Omdat het minder capaciteit van de server vergt.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

De webwinkel is op zondag gesloten
Het voordeel van een webshop is dat hij 24/7 open is. Maar wat nu, wanneer je op zon- en feestdagen principieel...
WooCommerce tabbladen onder elkaar zetten
Heb je wel eens een grote webshop gezien met product tabs? Precies. En daarom willen wij onze WooCommerce...
Het WordPress login logo aanpassen
Vervang het standaard WordPress logo door je eigen logo op het inlogscherm.
Hoe maak ik zelf een shortcode?
Bij het live gaan van de snippet base vroeg ik in mijn nieuwsbrief aan mijn lezers, of ze suggesties...
Laat zien wanneer een product al in de winkelwagen is
Laat je klant zien, dat een product al in de winkelwagen is geplaatst.
De presentatie van variabele producten hun prijs verbeteren
Een variabel product wordt in WooCommerce weergegeven als een prijs €100-€250 in plaats van 'vanaf €...

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

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.