WooCommerce: Produkttitel in der Mobilansicht kürzen
admin
,
9. November 2026

WooCommerce: Produkttitel in der Mobilansicht kürzen

Lange Produktnamen sehen auf dem Desktop oft gut aus, sprengen auf dem Smartphone aber das Raster: Karten werden unterschiedlich hoch, Preise und Buttons stehen versetzt. Die Lösung: Titel in der Übersicht mobil auf eine feste Zeilenanzahl begrenzen.

Die CSS-Lösung (empfohlen)

Mit line-clamp wird der Titel nach zwei Zeilen mit „…“ abgeschnitten. Der vollständige Name bleibt im HTML erhalten – gut für SEO und Barrierefreiheit. Fügen Sie den Code unter Design → Customizer → Zusätzliches CSS ein:

@media (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
  }
}

Die min-height sorgt dafür, dass auch kurze Titel denselben Platz einnehmen und alle Karten gleich hoch bleiben. Passen Sie den Selektor an, falls Ihr Theme eigene Klassen verwendet – die richtige Klasse finden Sie per Rechtsklick → „Untersuchen“.

Die PHP-Variante

Alternativ können Sie den Titel serverseitig auf eine bestimmte Wortanzahl kürzen. Das wirkt dann allerdings auf allen Geräten:

add_filter( 'the_title', function ( $title, $id ) {
    if ( ! is_admin() && ( is_shop() || is_product_category() ) && get_post_type( $id ) === 'product' && in_the_loop() ) {
        return wp_trim_words( $title, 6, ' …' );
    }
    return $title;
}, 10, 2 );

Unser Tipp

Noch besser als jede technische Kürzung: kurze, aussagekräftige Produktnamen. Details wie Größe oder Material gehören in Varianten oder die Beschreibung.

Tags: