Wstęp
Bardzo popularnym problemem przy tworzeniu stron na woocommerce są zbyt długie tytuły produktów na stronie sklepu, co nie wygląda estetycznie, a dodatkowo może powodować nierówne ułożenie przycisków „Dodaj do koszyka”. Nie będę niepotrzebnie przedłużał tylko od razu przejdę do przedstawienia Ci kilku prostych rozwiązań tego problemu.
Sposób 1 – Skrócenie tytułów produktów za pomocą kodu CSS
To będzie prawdopodobnie najprostszy sposób, za pomocą którego będziecie mogli skrócić tytuły swoich produktów i wystarczy, że skopiujecie poniższy fragment kodu i wkleicie go w odpowiednie miejsce.
Gdzie dodać kod CSS?
Z prostych rozwiązań są dwie możliwości: pierwsza z nich to dodanie kodu CSS to style.css w motywie potomnym, z którego korzysta wasz sklep, drugim rozwiązaniem (prostszym) jest dodanie kodu do zakładki „Dodatkowy CSS”, która znajdziesz w dostosuj/customize > Dodatkowy CSS/Additional CSS, a powinno to wyglądać tak jak na zdjęciu poniżej:
Fragment kodu CSS
Poniższy kod CSS jest w miarę uniwersalny i powinien zadziałać na większości sklepów, jednak niektóre motywy lub wtyczki mogą zmienić tą domyślną klasę tytułu produktu i wtedy kod nie zadziała. Łatwo jest to zweryfikować klikając prawym przyciskiem na tytuł produktu, a następnie zbadaj i z tego miejsca kopiujemy odpowiednią klasę.
.woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.klasa_tytulu_produktu {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Ten kod ograniczy tytuł produktu do wyłącznie jednej linijki tekstu oraz doda na końcu „…”.
Sposób 2 – Ograniczenie liczby znaków w tytule produktu za pomocą kodu PHP
Ten sposób może wydawać się trochę trudniejszy, jednak wcale tak nie jest. Kod, który podam poniżej pozwoli ustalić maksymalną liczbę znaków jaka będzie się wyświetlała w tytule produktów i dodamy ją do pliku functions.php.
Gdzie dodać kod PHP?
Pierwszą możliwością jest dodanie poniższego kodu do pliku functions.php za pomocą wbudowanego edytora plików motywu, jednak pamiętajcie, żeby nie robić tego w naszym głównym motywie, tylko w motywie potomnym. Innym rozwiązaniem jest pobranie wtyczki, która umożliwia dodanie takiego „snippetu” bez edycji plików motywu bezpośrednio i przykładem takiej wtyczki są „Code Snippet” lub „WPCode„.
Fragment kodu PHP
function studiorange_shorten_product_title( $title, $id ) {
if ( ( is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) {
// Zadziała, jeżeli długość tytułu będzie powyżej 50 znaków (można zmienić liczbę 50 na dowolną)
if ( strlen( $title ) > 50) {
// Skróci tytuł do 60 znaków i doda na końcu "..." (liczbę 50 można edytować)
return substr( $title, 0, 50 ) . '...';
}
}
return $title;
}
add_filter( 'the_title', 'studiorange_shorten_product_title', 10, 2 );Ten kod ograniczy długość tytułu produktu do określonej w nim liczby znaków, powyższy przykład zadziała, jeżeli tytuł będzie miał powyżej 50 znaków i skróci go do tej liczby, a na końcu doda „…”
Sposób 3 – Ograniczenie liczby słów w tytule produktu za pomocą kodu PHP
Fragment kodu PHP
function studiorange_shorten_product_title_words( $title, $id ) {
if ( ( is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) {
$title_words = explode(" ", $title);
// Zadziała, jeżeli liczba słów w tytule będzie większa niż 4 (liczbę 4 można dowolnie zmienić)
if ( count($title_words) > 4 ) {
// Skróci tytuł do 4 słów i doda "..." na końcu (liczbę 4 można dowolnie zmienić)
return implode(' ', array_slice( $title_words, 0, 5) ) . '...';
}
}
return $title;
}
add_filter( 'the_title', 'studiorange_shorten_product_title_words', 10, 2 );Ten kod ograniczy długość tytułu produktu do określonej w nim liczby słów, powyższy przykład zadziała, jeżeli tytuł będzie miał powyżej 4 słów i skróci go do tej liczby, a na końcu doda „…” .
Podsumowanie
Mam nadzieję, że to przygotowane przeze mnie fragmenty kodu pomogą wam ogarnąć tytuły waszych produktów oraz poprawią wygląd waszych sklepów. Jeżeli nie poradziłeś sobie samodzielnie z implementacją powyższych snippetów to odezwij się do mnie, a z chęcią Ci pomogę!
Miłego dnia lub wieczoru i do zobaczenia w następnym wpisie!
