Całkiem niedawno kończąc wdrażanie sklepu dla swojego klienta zwrócił mi uwagę na jedną dodatkową rzecz, której nie chciał na swojej stronie internetowej. Mianowicie, chciał ukryć liczbę produktów znajdujących się w danej kategorii na stronie sklepu oraz archiwum.
Można to zrobić na dwa sposoby. Pierwszym sposobem jest dodanie dosłownie linijki kodu do pliku functions.php – najlepiej to zrobić w motywie potomnym. Drugim rozwiązaniem, zdecydowanie prostszym jest ukrycie tej liczby za pomocą kodu CSS.
Sposób pierwszy – dodajemy kod PHP
Odnajdujemy plik functions.php naszego motywu. Możesz to zrobić z poziomu kokpitu WordPressa jeśli nie masz wyłączonej możliwości edytowania plików motywu. Sprawdź czy możesz to zrobić w swoim WordPressie. Będąc w kokpicie wybierz Wygląd -> Edytor plików motywu. Jeśli nie widzisz takiej opcji oznacza to, że masz wyłączoną możliwość edytowania plików motywu i wtyczek z poziomu panelu administracyjnego.
W takim przypadku musisz połączyć się ze swoim serwerem przez FTP i edytować plik functions.php lub zrobić to z poziomu swojego hostingu jeśli daje taką możliwość. Przechodzimy do folderu z aktualnie włączonym motywem, czyli będąc w katalogu głównym z plikami WordPressa przechodzimy kolejno do: wp-content/themes/NazwaTwojegoMotywu. No dobrze, mamy otworzony plik functions.php, co teraz? Teraz, na końcu pliku dodajemy poniższy kod (linijkę nad ?> jeśli jest takowy na końcu pliku):
/*
* Removes products count after categories name
*/
add_filter( 'woocommerce_subcategory_count_html', '__return_null' );
?>Jest to najlepszy sposób, aby to zrobić. Dzięki temu liczba która wyświetla się po nazwie kategorii zniknie również z kodu źródłowego strony.
Oryginalny kod źródłowy, przed zastosowaniem filtra:
<div class="product-details content-bg entry-content-wrap">
<h2 class="woocommerce-loop-category__title">
Przykładowa kategoria <mark class="count">(8)</mark>
</h2>
</div>Poniżej kod źródłowy strony po zastosowaniu ww filtra:
<div class="product-details content-bg entry-content-wrap">
<h2 class="woocommerce-loop-category__title">
Przykładowa kategoria
</h2>
</div>Sam widzisz, kod odpowiedzialny za wyświetlanie liczby produktów w danej kategorii całkowicie zniknął.
Sposób drugi – dodajemy kod CSS
Drugim sposobem jest po prostu ukrycie tej informacji, pozbycie się jej z naszych oczu. Ten sposób po prostu nie wyświetla liczby produktów na naszej stronie internetowe, ale dalej znajduje się ona w kodzie strony.
Aby to zrobić przechodzimy do panelu administracyjnego WordPressa i wybieramy kolejno: Wygląd -> Dostosuj, a następnie rozwijamy ostatnią opcję w kolumnie po lewej stronie ekranu – Dodatkowy CSS. W tym miejscu wklejamy poniższy kod:
.woocommerce-loop-category__title > mark.count {
display: none;
}Analizując powyższy kod, klasa .woocommerce-loop-category__title jest przypisana do tytułu naszej kategorii umieszczonego w elemencie <h2>. W tym elemencie znajduje się coś jeszcze, element mark z klasą count: <mark class="count">(8)</mark>. Widzimy to w kodzie z poprzedniego sposobu.
Powyższy kod targetuje za pomocą odpowiedniej klasy nasz tytuł, a następnie leżący bezpośrednio w nim element mark z klasą count, którego po prostu nie wyświetla na naszej stronie. Natomiast nadal jest on widoczny w kodzie strony.
PRO TIP
Dodając swój własny kod PHP (np. do pliku functions.php znajdującego się w aktualnym motywie), najlepiej jest to zrobić za pomocą motywu potomnego (Child Theme). Dlaczego? Odpowiedź jest krótka i bardzo prosta – aktualizacje. Jeśli korzystasz z motywu powszechnie dostępnego (nie autorskiego), na pewno przyjdzie czas, kiedy zostanie wydana nowa aktualizacja do wykorzystywanego motywu. Po aktualizacji plików motywu, wszystkie jego pliki zostaną nadpisane nowymi, a Twoje zmiany zostaną utracone i wszystko będziesz musiał zrobić od nowa. Dlatego dobrze jest znaczące zmiany w plikach motywu robić w motywie potomnym, który bazuje na motywie głównym, pierwotnie wykorzystywanym przez Ciebie. W motywie potomnym znajdują się tylko te pliki, które zostały zmodyfikowane, i które nadpisują pliki znajdujące się w motywie głównym (motywie rodzica).
Alternatywne rozwiązanie dla sposobu pierwszego?
Jeśli sprawia Ci trudność dodanie kodu PHP w sposób, jaki przedstawia przykład pierwszy, to istnieje pewna alternatywa, która wymaga instalacji dodatkowej wtyczki. Osobiście nie polecam tego sposobu. Plugin, którego możemy użyć, aby dodać dodatkowy kod PHP nazywa się:
Po zainstalowaniu i uruchomieniu wtyczki w panelu administracyjnym pojawi nam się nowa zakładka: Fragmenty kodu. Najeżdżamy na nią kursorem oraz wybieramy Dodaj nowy.
Nadajemy odpowiednią nazwę snippetowi, abyśmy wiedzieli do czego on służy i wklejamy kod ze sposobu pierwszego w okienko poniżej następnie zaznaczamy opcję, aby kod wykonywał się tylko w interfejsie użytkownika (czyli na Frontendzie). Pozostałe opcje pozostawiamy bez zmian i klikamy na dole w przycisk Zapisz zmiany i aktywuj. Zobacz zrzut ekranu z ustawieniami poniżej:
To wszystko, od tej chwili wszystko powinno działać.
Zastanów się jednak, czy pójście na łatwiznę i instalacja kolejnej wtyczki tylko po to, aby dodać jedną linijkę kodu ma rzeczywiście sens. Jeśli sam chcesz wszystko ogarniać w swoim sklepie – powalcz ze sposobem pierwszym, zrób to jak należy. Na pewno w przyszłości Ci się jeszcze przyda ta umiejętność. Dasz radę!
