Jak skrócić tytuły produktów w WooCommerce?

Podczas tworzenia oraz odnawiania sklepu internetowego bardzo ważnym etapem jest wybór odpowiedniego wyglądu, który spełniałby oczekiwania właściciela i był wygodny dla użytkowników. Od tego wyboru zależy zaufanie klientów do strony, czyli współczynnik odrzuceń i wskaźnik konwersji. Innymi słowy, od użytecznego wyglądu będzie zależał sukces sklepu internetowego w przyszłości.

W jednym ze swoich poprzednich artykułów pisałem na temat wyboru motywu dla WooCommerce. Podałem w nim główne kryteria, na jakie należy zwrócić uwagę podczas poszukiwania templatki dla e-sklepu. Jednak należy rozumieć, że na wyborze motywu sprawa się nie kończy. Zawsze pojawia się potrzeba modyfikacji i dopasowania wyglądu do własnych potrzeb, tym bardziej, że wymagania i oczekiwania użytkowników ciągle się zmieniają. Dlatego należy podążać za trendami i starać się rozumieć klientów. Ale to już zupełnie inna bajka…

W dzisiejszym artykule chcę opisać jeden z problemów, z którym spotkają się użytkownicy sklepów opartych o WooCoommerce. Dotyczy on różnej długości tytułów  produktów, widocznych podczas ich przeglądania na stronie sklepu (rys. 1):

Rys. 1 Karty produktów na stronie sklepu

Jak widać z powyższego rysunku, do sklepu były dodane 3 produkty – telefony komórkowe. Wszystkie one mają swoje unikatowe opisy i tytuły, które – rzecz jasna – różnią się liczbą znaków. W rezultacie podczas przeglądu produktów na stronie sklepu, karty produktów będą mieć też różny rozmiar spowodowany długością tytułów. A jeżeli do istniejących produktów dodamy jeszcze kilka nowych, strona będzie wyglądać chaotycznie i nieatrakcyjnie (rys. 2):

Rys. 2 Karty produktów na stronie sklepu

Dlatego aby karty produktów na stronie sklepu wyglądały harmonijnie, należy skrócić długość tytułów do jednego, wybranego rozmiaru. Zrobić to można w kilka sposobów, które będą przedstawione poniżej.

Wariant 1. Ograniczenie wszystkich tytułów produktów za pomocą CSS

W tym przypadku należy zmodyfikować plik arkusz stylów styles.css używany w motywie. Zrobimy to za pomocą Edytora znajdującego się w sekcji Wygląd panelu administracyjnego WordPress (rys. 3).

Rys. 3 Edytowanie arkuszu stylów motywu

Przejdźmy na sam koniec pliku styles.css i dodajmy kod, który skróci tytuł produktu, gdy  jest on dłuższy niż jedna linijka tekstu. W skłóconym tytule, na końcu pojawią się trzy kropki.

.woocommerce ul.products li.product h3 {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

Zapisujemy zmiany i przechodzimy do przeglądu produktów na stronie sklepu (rys. 4).

Rys. 4 Skrócenie długości tytułów produktów za pomocą CSS
Jak widać wszystkie produkty mają jednej długości tytuły, a karty – jednakową wysokość.

Wariant 2. Ograniczenie wszystkich tytułów produktów do maksymalnej liczby znaków

Podany sposób pozwala ograniczyć długość tytułu produktu do wybranej przez nas liczby znaków. Tym razem należy zmodyfikować plik functions.php, który będziemy edytować za pomocą wbudowanego w WordPress Edytora.

Przechodzimy na sam koniec pliku functions.php i dodajemy poniższy kod:

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );

function shorten_woo_product_title( $title, $id ) {

if ( is_shop() && get_post_type( $id ) === 'product' ) {

return substr( $title, 0, 15 ); 

} else {

return $title;

}

}

W linijce kodu return substr( $title, 0, 15 ); możemy zmienić liczbę znaków do jakiej chcemy zmniejszyć tytuł. Dlatego należy podmienić ostatnią cyfrę 15 na dowolną inną.

Zapisujemy zmiany w pliku i przechodzimy do przeglądu produktów na stronie sklepu (rys. 5).

Rys. 5 Skrócenie długości tytułów produktów do wybranej liczby znaków
Jak widać tytuły były skrócone do 15 znaków i zawierają 2 linijki tekstu. Wszystko wygląda świetnie.

Wariant 3. Ograniczenie wszystkich tytułów produktów do maksymalnej liczby słów

Ostatni sposób jest modyfikacją poprzedniego. Polega on na skróceniu długości tytułów do wyznaczonej liczby słów. Aby skorzystać z tego sposobu należy dodać poniższy kod do plik:

functions.php:

function shorten_woo_product_title( $title, $id ) {

if ( is_shop() && get_post_type( $id ) === 'product' ) {

return wp_trim_words( $title, 4 ); 

} else {

return $title;

}

}

Edytując linijkę return wp_trim_words( $title, 4 ); można nadawać swoją liczbę słów (w podanym przykładzie wynosi ona 4).  Zapisujemy zmiany i przechodzimy do strony z produktami (rys. 6).

Rys. 6 Skrócenie długości tytułów produktów do wybranej liczby słów.
Jak widać każdy tytuł zawiera 4 słowa. Jeżeli liczba słów w dodanym tytule jest większa od 4, na końcu pojawiają się trzy kropki.

Podsumowanie

Możecie wybrać ten wariant, który będzie dla was najbardziej wygodny. Chociaż każdy z nich pozwala w pełni rozwiązać problem z różną długością tytułów. Mam nadzieję, że otrzymana informacja pomoże Państwu zmodyfikować karty z produktami, aby były one harmonijnie ułożone na stronie i przyciągały uwagę użytkowników. Tym bardziej, że można to zrobić bardzo prosto, wystarczy dodać kawałek kodu :)

W przypadku dodatkowych pytań oraz uwag, proszę o komentarze.