WooCommerce product titel inkorten

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.