fbpx

Michał Okoń

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

0 0 votes
Jak bardzo przydał/spodobał Ci się ten artykuł?

Autor

Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments