WP Desk Care - zadbaj o swój biznes online!

Sprawdzona opieka techniczna dla Twojego sklepu

Stylowanie elementów sklepu WooCommerce

Stylowanie elementów w sklepie WooCommerce

W tym artykule dowiesz się, jak zmienić wygląd wybranych elementów sklepu WooCommerce takich jak przyciski, nagłówki czy formularze. W tym celu przedstawię Ci stylowanie CSS (tzw. custom CSS). Skorzystamy z gotowych rozwiązań w WordPressie oraz dodatkowej wtyczki.

1. Czym jest CSS

CSS to tzw. kaskadowe arkusze stylów. Są to pliki zawierające kod opisujący wygląd strony internetowej. Szkielet strony jest zbudowany z użyciem języka HTML. Przez szkielet rozumiemy, jakie elementy i w jakiej kolejności znajdują się na stronie, np.

  • logo
  • nagłówek
  • menu
  • treść artykułu
  • zdjęcie produktu
  • panel boczny (sidebar)

CSS umożliwia nam opisanie, w jaki sposób te elementy mają wyglądać.

Przykład:

  • <p> to znacznik zaczynający nowy akapit.
  • <strong> oznacza pogrubienie tekstu

Rzućmy zatem okiem na taki kod:

Kod HTML: znacznik <p>

Domyślnie wynikiem będzie taki tekst:

Tekst bez użycia custom css

Ten sam kod na stronie wpdesk.pl daje następujący wynik:

Tekst na stronie wpdesk.pl - custom css

Mamy tu:

  • całkiem inną czcionkę
  • różną wielkość tekstu

Skąd ta różnica?

Na stronie wpdesk.pl zdefiniowaliśmy swój własny arkusz stylów. Bez arkusza CSS przeglądarka wyświetla kod HTML w domyślny dla siebie sposób.

Każda strona internetowa posiada swoje arkusze stylów. Nie jest to jednak custom CSS!

Przez pojęcie custom CSS rozumiemy: własny kod CSS, który nadpisuje domyślny kod CSS WordPressa i/lub motywu strony.

Każdy motyw posiada swój arkusz CSS. Rozwiązanie typu custom CSS umożliwia Ci nadpisanie ustawień arkusza motywu bez zaglądania do jego kodu!

W ten sposób uzyskasz pożądany dla siebie efekt:

  • nie ingerując w pliki motywu
  • zachowując integralność
  • zabezpieczając własne zmiany

O jakim zabezpieczniu mówię?

Gdy aktualizujesz motyw, wszystkie jego pliki są nadpisywane nowszymi wersjami. Jeśli swoje modyfikacje CSS zapisujesz w plikach motywu, podczas aktualizacji stracisz je.

Właśnie dlatego rozwiązanie custom CSS jest proste, przyjemne i bezpieczne. Zatem do dzieła!

2. Jak dodać custom css w WordPressie

W swoim panelu administratora przejdź do: Wygląd → Dostosuj

Personalizacja wyglądu: Dostosuj

Następnie przejdź do sekcji Dodatkowy CSS:

Dodatkowy CSS (Custom CSS) w Personalizacji

W moim przypadku custom CSS prezentuje się następująco:

custom CSS w Personalizacji

Znajduje się tu kod, który dodałem podczas tworzenia artykułu Set Your Own CSS Class to Any Custom Fields in Your WooCommerce Store →

Domyślnie nie znajduje się tutaj żaden kod.

Jak zmienić wygląd danego elementu?

Na początek potrzebujesz poznać podstawy CSS:

W celu znalezienia klasy elementu, który chcesz zmodyfikować, użyj narzędzi przeglądarki:

  • Kliknij w element na stronie prawym przyciskiem myszy
  • Wybierz opcję typu Zbadaj element

Zbadaj element

Twoim oczom ukaże się kod strony. Gdy najedziesz na element w kodzie strony, zostanie on wyróżniony na ekranie:

Dev Tools - Chromium

Jak widzisz powyżej, przeglądarka Chrome wskazała mi na ekranie położenie:

  • elementu h2
  • z klasą section-title

Aby odwołać się do tego elementu w custom CSS muszę zastosować następujący zapis:

h2.section-title {}

Zmienię zatem kolor czcionki tego elementu na pomarańczowy:

Custom CSS: zmiana koloru tekstu na pomarańczowy

Efekt prezentuje się następująco:

Custom CSS - efekt

Jak widzisz, kolor tekstu zmienił się dla wszystkich nagłówków H2 z klasą section-title. Zmianie nie uległy akapity tekstu i inne elementy jak podpisy pod ikonami.

Przykład wykorzystania we wtyczkach WP Desk

Posiadamy w ofercie dwie wtyczki do zarządzania polami w sklepie:

Obie te wtyczki umożliwiają przypisanie dowolnej klasy CSS, aby zmodyfikować ich domyślny wygląd.

Możesz dopisać swój custom CSS i dodać go dla danego pola.

W przypadku Flexible Checkout Fields odpowiednia opcja jest odrobinę ukryta.

Przejdź do:

  • ustawień pola
  • zakładki Wygląd
  • pola Klasa CSS

Zerknij:

Checkout Fields Custom CSS

We wtyczce Flexible Product Fields opcja jest dostępna w edycji pola:

Flexible Product Fields - Custom CSS

Podsumowanie

Ten artykuł nauczył Cię stosowania custom CSS w praktyce. Czy masz dodatkowe pytania? Czekamy na komentarze.

Zobacz inne artykuły

Dołącz do ponad 10 000 czytelników

Poradniki WooCommerce i nowości –
wprost na Twój e-mail.