Kilka dni temu, na „skrzynkę redakcyjną” wpłynęło „zapytanie premium” o możliwość modyfikacji pewnych elementów  graficznych na stronach poszczególnych produktów. Strona działa na dobrze znanym mi motywie Divi, więc teoretycznie można by skorzystać z opcji „theme builder”, by dla wybranych produktów przygotować inny wygląd. Jednak zmiany choć drobne – zmiana koloru dla kilku wybranych elementów, to miały docelowo dotyczyć wszystkich produktów w sklepie, a więc tworzenie dla każdego produktu oddzielnego szablonu choć możliwe, to w tym przypadku raczej nie byłoby najlepszym sposobem. Zwłaszcza że wszystko można było ogarnąć dosłownie 2-3 linijkami kodu CSS.

Indywidualny kod CSS dla wybranych produktów w sklepie internetowym na WooCommerce

Problem w tym, że ten kod – w konkretnie jego fragmenty odpowiedzialne za kolor – miał być odrobinę inny, dla każdego produktu. Tak więc pierwsza myśl, to stworzenie dodatkowe pola na ekranie edycji produktu, gdzie obsługa będzie mogła wpisać kod koloru przypisany do tego produktu, a potem on zostanie za pomocą odpowiedniej funkcji wykorzystany (podstawiony w odpowiednim miejscu). Pomysł, choć dobry to upadł, bo jak się okazało, nie tylko o kolor się rozchodziło…

W takim przypadku uznałem, że najlepiej będzie stworzyć opcję dodawania kodu CSS, który będzie wykorzystywany (aktywowany) na stronie danego produktu, a w takim kodzie będzie można czasem zmienić tylko kolor jakiegoś elementu, a czasem zmienić rozmiar, czy nawet coś usunąć.

Dalej szczegółami tego wdrożenia nie będę zanudzał, a zamiast tego pokażę kilka sposobów, jak można przygotować obsługę takiego dedykowanego kodu do konkretnego produktu w WooCommerce (choć w większości przypadków, można celować również w inne strony, posty…).

Kod CSS i klasa z identyfikatorem strony (style)

Najprościej, to w pliku style.css motywu potomnego lub w oknie „dodatkowy CSS” na ekranie personalizacji dodać kod, który będzie celował w konkretny element, na konkretnej stornie, np. zmiana koloru tytułu produktu, tylko na stronie produktu o ID „123”:

body.single-product.postid-123 .product_title.entry-title { color: #88b15b; }

Wykorzystujemy to, że WordPress do obiektu „body” strony dodaje jako klasę, nie tylko informację o widoku (.single-product), ale też identyfikator posta (.postid-123), więc możemy zmianę koloru precyzyjnie wycelować w tytuł artykułu (.product_title.entry-title) na wybranej stronie (.postid-123).

Wstrzyknięcie kodu CSS na wybranych stronach za pomocą PHP

Kolejna metoda jest już bardziej zaawansowana, bo sięgamy po kod PHP, który dodajemy np. do pliku functions.php motywu potomnego.

Możemy skorzystać z 2 funkcji, za pomocą których sprawdzimy, czy jest to strona produktu (is_product()), oraz czy jest to produkt o szukanym ID (get_the_id()):

if ( is_product() && get_the_id() == 123 ) {
    // kod do wykonania
}

W naszym przypadku interesuje nas „wstrzyknięcie” kodu CSS, więc całość odpowiednio ubieramy:

function webinsider_wp_wc_add_product_custom_css(){
	if ( is_product() && get_the_id() == 123 ) {
		echo '<style type="text/css">.product_title.entry-title { color: #88b15b; } </style>';
	}
}

Kod sprawdzi, czy jest to strona produktu, czy jego ID jest odpowiedni, a jeśli wszystko się zgadza, to do nagłówka strony (sekcja „head”) wstawi kod CSS, który zmieni wygląd wybranego elementu (.product_title.entry-title).

Wtyczki pozwalające łatwo dodać własny kod CSS do wybranego produktu

W tym momencie nie będziemy dalej komplikować i sięgniemy po wtyczki, dzięki którym w oknie edycji produktu pojawi się dodatkowe pole, właśnie na kod CSS, dedykowany dla tego produktu.

Booster for WooCommerce

Pierwsza wtyczka to płatna Booster for WooCommerce, która jest swego rodzaju szwajcarskim scyzorykiem, jeśli chodzi o WooCommerce. Jest to jednocześnie zaletą – wiele opcji w jednej wtyczce, w jednej opłacie, ale i wadą, bo czasem za dużo to też niedobrze.

W każdym razie jest można aktywować opcję „Custom CSS” globalnie, jak i dla konkretnych produktów.

Product Custom CSS for WooCommerce

Druga wtyczka to Product Custom CSS for WooCommerce, i jest ona mi o tyle bliska, że swego czasu została przygotowana na potrzeby oficjalnego sklepu Webinsider.pl, gdzie dzielnie służy.

Tutaj podobnie jak w przypadku poprzedniej wtyczki – po instalacji i aktywacji, na ekranie edycji produktu pojawi się dodatkowe pole, właśnie na dodatkowy kod CSS, dedykowany dla tego konkretnego produktu:

Wtyczka klasycznie już miała być darmowa i dostępna w repozytorium wtyczek WordPressa, ale na przeszkodzie stanęły procedur, bo uznano, że skoro coś umożliwia użytkownikowi dodanie kodu, to ten najpewniej zrobi sobie krzywdę, wklejając tam coś, czego nie powinien, a tym samym mógłby uszkodzić sobie stronę.

Niezależnie od sensu takich obaw, wtyczki w repozytorium nie ma i raczej nie będę za to umierał, więc trafiła do naszego sklepu internetowego. Na razie dostępna za drobną opłatą, ale może w przyszłości będzie gratisem. Kto wie… ;-)