• Przejdź do głównej nawigacji
  • Przejdź do treści
  • Przejdź do stopki
  • Nowość: Dostosowanie do Dyrektywy Omnibus
  • Moje konto
  • 0
Wtyczki WooCommerce - WP Desk
  • Wtyczki
  • Docs
  • Blog
  • O nas
    • O nas
    • Dlaczego my?
    • Dla społeczności
    • Benefity
    • Pracuj z nami
  • Kontakt

Dołącz do ponad 10 000 czytelników

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

Tomasz Drzewiecki

Pola z kolorami produktu WooCommerce dzięki Flexible Product Fields

Aktualizacja: 19.01.2022 / WooCommerce

Umożliwienie konfiguracji produktu znacznie skraca drogę od potencjalnego do sfinalizowanego zakupu. Najpopularniejsze rozwiązanie dla WooCommerce to produkt z wariantami i jego pola z opcjami (lista rozwijana). Flexible Product Fields rozszerza stronę produktu o nowe pola, a każde z nich ma inną funkcję. Na przykład, pole Radio z kolorami umożliwia dodanie pola z kolorami produktu WooCommerce.

Klient "kupuje" przede wszystkim oczami, dlatego zwizualizowanie wskazanej przez niego opcji da więcej niż jakikolwiek tekst. Ta zasada ma zastosowanie zwłaszcza jeżeli chodzi o kolor produktu. W związku z tym, wstawiając pola z kolorami produktu WooCommerce zminimalizujesz niezadowolenie z powodu błędnie dobranego koloru i dodatkowo urozmaicisz stronę.

Flexible Product Fields od wersji 2.1.0. posiada opcję dodania pola "Radio z kolorami". Takie pole pozwoli np. na łatwe wstawienie wzornika z kolorami jeżeli jako obrazki zostaną załadowane grafiki z kolorami.

Opcje koloru produktu WooCommerce krok po kroku

Dodanie takiego pola jest bardzo proste a dzięki CSS możliwe będzie jego dopasowanie np. zmiana kształtu lub rozmiaru.

  1. Przejdź do pulpitu WordPress i uruchom wtyczkę Flexible Product Fields.
  2. Dodaj nową grupę lub wybierz istniejącą już grupę. Jeśli grupa jest nowa - nadaj jej nazwę (np. "Opcje kolorystyczne") i dodaj do produktów/kategorii lub tagów.
  3. Dodaj nowe pole. Przejdź do kategorii Pola z opcjami i wybierz Radio z obrazkami z listy dostępnych opcji.
  4. Wpisz etykietę pola, która będzie również nazwą Twojego pola. Powiedzmy, że w naszym przypadku będzie to „Kolor produktu”.

a) Przeczytaj naszą dokumentację, jeśli potrzebujesz więcej informacji na temat każdego z pól, które zobaczysz w tym momencie:

Pole radio z kolorami - konfiguracja
Pole radio z kolorami - konfiguracja

b) Wypełnij pola informacjami, które chcesz wyświetlić na stronie produktu WooCommerce.

Konfiguracja pola radio z kolorami
Konfiguracja pola radio z kolorami

c) Przejdź do zakładki Zaawansowane. Tutaj możesz zmienić szerokość pojedynczego elementu w pikselach:

Ustawienia zaawansowane
Ustawienia zaawansowane

d) W razie potrzeby ustaw cenę (stałą lub procentową) lub inne opcje (np. logikę warunkową). Jeśli chcesz dostosować pola do swoich potrzeb, dodaj klasę CSS, np. „custom-color-swatches”.

Ustawienia ceny dla pola z kolorami
Ustawienia ceny dla pola z kolorami

Dostosowanie pola za pomocą CSS

Opcjonalnie wklej na stronie kod CSS w celu dostosowania pola z kolorami. Zastosuj klasę CSS z pkt. 4. np. custom-color-swatches.

Ukrycie podpisu pod grafiką

/* Pola z kolorami produktu WooCommerce - brak podpisu pod grafiką */
div.fpf-radio-images p.custom-color-swatches input+label span {
    display: none;
}

Zmiana rozmiaru grafiki na 50 px i rozmiaru ramki na 10 px

/* Pola z kolorami produktu WooCommerce - grafika 50 x 50 px i ramka 10 px */
div.fpf-radio-images p.custom-color-swatches input+label {
    width: calc(50px + 2*10px);
}
div.fpf-radio-images p.custom-color-swatches input+label img {
    width: calc(50px + 2*10px);
    height: calc(50px + 2*10px);
    border: 10px solid transparent;
}

Zmiana koloru obramowania (po zaznaczeniu) na #d3d3d3

/* Pola z kolorami produktu WooCommerce - kolor obramowania #d3d3d3 */
div.fpf-radio-images p.custom-color-swatches input:checked+label img {
    border-color: #d3d3d3;
}

Zmiana kształtu grafiki na koło

/* Pola z kolorami produktu WooCommerce - grafika w kształcie koła */
div.fpf-radio-images p.custom-color-swatches input+label img {
    border-radius: 50%;
}

Flexible Product Fields - pole po zmianach CSS

Podsumowanie

Pola z kolorami produktu WooCommerce to element jaki od razu zwraca uwagę klienta. Takie rozwiązanie sprawdzi się dla bardzo szerokiego wachlarza sklepowych kategorii a dodatkowo jest łatwe w dopasowaniu pod konkretną stronę. Zamiast koloru możliwe jest wstawienie wzoru lub innej grafiki przedstawiającej np. fakturę produktu.

Efekt, którego szukasz, możesz osiągnąć dzięki typowi pola Radio z kolorami, które łatwo dodasz i dostosujesz korzystając z wtyczki Flexible Product Fields.

Wtyczka została niedawno zaktualizowana i od teraz możesz znaleźć kilka typów pól w jej darmowej wersji.

Od teraz możesz znaleźć te nowe typy pól w wersji 2.1.0:

  • Tekstowe - E-mail i Adres URL
  • Pola z opcjami - Multi-checkbox i Radio z kolorami
  • Otwarte - Godzina i Kolor
  • inne pola do formatowania strony produktu - Paragraf lub HTML do wstawiania tekstu i obrazu

Flexible Product Fields PRO WooCommerce 189 zł (232,47 zł z VAT)

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

Dodaj do koszyka lub Zobacz szczegóły
WP Desk
Ponad 10 000 aktywnych instalacji
Ostatnia aktualizacja: 27.07.2022
Działa z WooCommerce 6.4 - 6.8.x
Tweet

2 minuty czytania777 wyświetleń

Tomasz Drzewiecki

Happiness Engineer ale bardziej Happiness niż Engineer. Od 2020 r. w teamie Rangers odpowiedzialnym za Flexible Checkout Fields i Flexible Product Fields.

WP Desk

WP Desk to największa i najpopularniejsza polska platforma z rozszerzeniami do WooCommerce. Sprawdź, jak WP Desk może pomóc rozwinąć twój e-sklep.

Zobacz wtyczki WooCommerce →

Dołącz do ponad 10 000 czytelników

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

WP Desk › WooCommerce › Pola z kolorami produktu WooCommerce dzięki Flexible Product Fields

Footer

WP Desk - Wtyczki WooCommerce

WP Desk to największa i najpopularniejsza polska platforma z rozszerzeniami do WooCommerce. Swoimi rozwiązaniami wspieramy społeczność WooCommerce. Sprawdź, jak WP Desk może pomóc rozwinąć twój e-sklep →

WP Desk

  • O nas
  • Blog
  • Kontakt
  • Dla społeczności
  • Pracuj z nami

Produkty

  • Wtyczki
  • Darmowe wtyczki
  • FAQ
  • Pomoc
  • Program Partnerski

Prawne

  • Regulamin
  • Polityka prywatności
  • Polityka zwrotów
  • Polityka wsparcia

© 2022 WP Desk