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 klasy CSS oraz opcje stylowania (tzw. custom CSS) w WordPress. Skorzystamy z gotowych rozwiązań w WordPressie oraz dodatkowej wtyczki.

Spis treści

  1. Czym jest CSS?
  2. Jak dodać custom CSS w WordPress?
  3. Jak zmienić wygląd danego elementu?
  4. Przykład wykorzystania we wtyczkach WP Desk
  5. Darmowe wtyczki dla WordPress i WooCommerce

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 zabezpieczeniu 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 WordPress

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.

3. Jak zmienić wygląd danego elementu?

Na początek potrzebujesz poznać podstawy CSS:

W celu znalezienia klasy CSS 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ą CSS section-title

💡 Dlaczego klasa CSS jest taka ważna?

Ponieważ pozwoli Ci szybko zmienić wygląd wielu elementów np. gdy chcesz aby jakieś akapity zawierały tło, ramkę lub inną czcionkę. Oczywiście mógłbyś zastosować zmianę CSS dla 1 elementu poprzez ID np. p#id-elementu {}, natomiast to rozwiązanie zadziała tylko dla pojedynczego elementu.

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ą CSS section-title. Zmianie nie uległy akapity tekstu i inne elementy jak podpisy pod ikonami.

Pamiętaj, że deklarowanie CSS dla klasy możesz zrobić w opisany sposób. Jeśli jednak chcesz dokonać zmiany stylu CSS szybko w 1 wpisie, skorzystaj z edytora HTML i dodania atrybutu style="" (tzw. inline CSS). Jest to jednak rozwiązanie mało skalowalne, a ewentualne późniejsze zmiany kodu musisz robić w każdym wpisie osobno.

Wykorzystanie Custom CSS i deklaracji dla klasy CSS przyspieszy stylowanie Twojej strony internetowej WordPress 🚀!

4. 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

5. Darmowe wtyczki dla WordPress i WooCommerce

Na koniec jeszcze jedna sprawa. Jeśli myślisz o rozwoju sklepu internetowego, to zobacz nasze darmowe wtyczki dla WordPress i WooCommerce oraz wszystkie nasze wtyczki i usługi WP Desk ⭐!

Nasze darmowe wtyczki →

Wtyczki i usługi WP Desk →

 

Podsumowanie

Ten artykuł nauczył Cię stosowania custom CSS i klas CSS w praktyce. Czy masz dodatkowe pytania? Napisz do nas 🙂!

Na koniec 3 artykuły, które mogą Ci się spodobać:

Zobacz inne artykuły

Dołącz do ponad 10 000 czytelników

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

Preferencje plików cookies

Inne

Inne niekategoryzowane pliki cookie to te, które są analizowane i nie zostały jeszcze przypisane do żadnej z kategorii.

Niezbędne

Niezbędne
Niezbędne pliki cookie są absolutnie niezbędne do prawidłowego funkcjonowania strony. Te pliki cookie zapewniają działanie podstawowych funkcji i zabezpieczeń witryny. Anonimowo.

Reklamowe

Reklamowe pliki cookie są stosowane, by wyświetlać użytkownikom odpowiednie reklamy i kampanie marketingowe. Te pliki śledzą użytkowników na stronach i zbierają informacje w celu dostarczania dostosowanych reklam.

Analityczne

Analityczne pliki cookie są stosowane, by zrozumieć, w jaki sposób odwiedzający wchodzą w interakcję ze stroną internetową. Te pliki pomagają zbierać informacje o wskaźnikach dot. liczby odwiedzających, współczynniku odrzuceń, źródle ruchu itp.

Funkcjonalne

Funkcjonalne pliki cookie wspierają niektóre funkcje tj. udostępnianie zawartości strony w mediach społecznościowych, zbieranie informacji zwrotnych i inne funkcjonalności podmiotów trzecich.

Wydajnościowe

Wydajnościowe pliki cookie pomagają zrozumieć i analizować kluczowe wskaźniki wydajności strony, co pomaga zapewnić lepsze wrażenia dla użytkowników.