Zacznij Black Week i oszczędzaj już teraz!

dodatkowe -15% na wszystkie Pakiety z kodem bundle2024

Obrazek produktu WooCommerce dla wariantów i własnych pól

Obrazek produktu WooCommerce dla wariantów i własnych pól

Warianty produktu w WooCommerce mogą mieć oddzielne obrazki wyświetlane po wyborze wariantu. W tym wpisie opiszę, jak ustawić obrazki dla produktu oraz jego wariantów. A także jak rozbudować stronę produktową WooCommerce o pola z obrazkami z darmową wtyczką (dla produktu prostego lub wariantowego).

Spis treści

Obrazek i galeria produktu w WooCommerce

Na początku podstawy WooCommerce. Okładkę (obrazek produktu) i galerię można ustawić w edycji produktu.

Obrazek i galeria produktu w WooCommerce

Do wyboru są istniejące media lub opcja wgrania nowych obrazków.

Po zapisaniu zmian obrazki pojawią się na stronie produktowej (lokalizacja może zależeć też od motywu).

Galeria produktu i okładka na stronie produktowej

W taki sposób zadziała to dla wszystkich typów produktów WooCommerce.

Obrazek produktu z wariantami

Natomiast aby wyświetlić inną okładkę dla konkretnego wariantu produktu, należy ustawić inny obrazek.

Przykładowo dla zielonych cytryn.

Ustawienie obrazka dla wariantu produktu

Nowa okładka pojawi się po wyborze danego wariantu produktu. Jeśli jakiś wariant nie posiada innego obrazka, okładka powróci do domyślnego obrazka produktu.

Zmiana okładki produktu z wariantami

💡 Obrazki wariantów nie są widoczne w galerii produktu.

Własne pola produktu z obrazkami w WooCommerce

Istnieje też możliwość dopasowania strony produktowej w WooCommerce z dodatkowymi polami produktu, np.:

Przykładowe pola produktu

Poniżej widok wszystkich pól, które można dodać z wtyczką Flexible Product Fields. Również dla produktów z wariantami. Jak widać, w darmowej wersji wtyczki są prawie wszystkie rodzaje pól.

Pola niestandardowe dostępne we wtyczce Flexible Product Fields

Wtyczka ma też kilka pól, które pozwalają dodać obrazki. Po wyborze danej opcji okładka produktu również się zmieni (podobnie jak w powyższym przykładzie dla produktu z wariantami). Jest jednak kilka różnic dla pól produktów:

  • możliwość dodania kilku pól z obrazkami
  • nie trzeba budować produktu z wariantami
  • łatwy sposób ustawień pól w edytorze
  • dodatkowe pola pozwalające budować zaawansowane produkty
  • można przyporządkować pola według produktu

Poniżej natomiast kilka przykładów ustawień pól z obrazkami.

Przykładowe pola Flexible Product Fields
Przykładowe pola Flexible Product Fields
Select (Lista rozwijana z obrazkami)
Select (Lista rozwijana) z obrazkami
Radio z kolorami i obrazkami
Radio z kolorami i obrazkami
Dodatkowy obrazek jako pole produktu
Dodatkowy obrazek jako pole produktu

Tu natomiast przykład działania na stronie produktu.

Podgląd opcji pól produktu
Podgląd opcji pól produktu

Własne pola z obrazkami

Zobaczmy listę dodatkowych pól produktu, gdzie można ustawić obrazki.

  • Select (Lista rozwijana)
  • Pole wyboru
  • Radio z obrazkami
  • Radio z kolorami
  • Obrazek (pojawi się obok innych pól bez opcji podglądu)
    Obrazek jako pole produktu
    Obrazek jako pole produktu

Dwa pola mają też ustawienia zaawansowane (maksymalna szerokość oraz możliwość schowania etykiety pola).

Zaawansowane ustawienia dla pól radio z obrazkami i radio z kolorami
Zaawansowane ustawienia dla pól radio z obrazkami i radio z kolorami
💡O innych rodzajach pól można przeczytać w dokumentacji Flexible Product Fields.

Podsumowanie

We wpisie wyjaśniłem, jak ustawić obrazki produktu oraz inną okładkę dla wariantu. Co więcej, opisałem, w jaki sposób można dodać nowe pola produktów. Na końcu skoncentrowałem się na polach z obrazkami, które można dodać z darmową wtyczką Flexible Product Fields.

Flexible Product Fields WooCommerce

Pozwól klientom personalizować produkty przed dodaniem do koszyka. Dodaj nowe pola produktów WooCommerce. Stwórz kreator personalizacji produktów, aby sprzedawać nadruki, grawerunki, opakowania na prezent, wizytówki, pieczątki i inne.

Pobierz za darmo lub Przejdź do WordPress.org
Ponad 10 000 aktywnych instalacji
Ostatnia aktualizacja: 15.11.2024
Działa z WooCommerce 8.9 - 9.3

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.