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
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 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
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