Dropdown „Wybierz kolor” zastępują klikalne swatche — klient wybiera wariant jednym kliknięciem, a ukryty select WC nadal steruje logiką wariantów?
Dropdown „Wybierz kolor” zastępują klikalne swatche — klient wybiera wariant jednym kliknięciem, a ukryty select WC nadal steruje logiką wariantów.
Co robisz → co masz
Dropdown „Wybierz kolor” zastępują klikalne swatche — klient wybiera wariant jednym kliknięciem, a ukryty select WC nadal steruje logiką wariantów?
Dropdown „Wybierz kolor” zastępują klikalne swatche — klient wybiera wariant jednym kliknięciem, a ukryty select WC nadal steruje logiką wariantów.
- 1
Robisz: Przy produktach włączasz czytelne warianty (np. kolory) zamiast suchej listy rozwijanej.
Swatche tekstowe dla każdej opcji atrybutu wariantu
- 2
Robisz: Przy produktach włączasz czytelne warianty (np. kolory) zamiast suchej listy rozwijanej.
Ukryty natywny select WC — pełna kompatybilność z wariantów
- 3
Robisz: Przy produktach włączasz czytelne warianty (np. kolory) zamiast suchej listy rozwijanej.
CSS .vv-swatch-item.active — wizualne zaznaczenie wyboru
- 4
Robisz: Kolejny krok w panelu sklepu — Działa na karcie produktu z grupą _.
Działa na karcie produktu z grupą _
Efekt: Swatche tekstowe dla każdej opcji atrybutu wariantu
Na co dzień w sklepie
- Swatche tekstowe dla każdej opcji atrybutu wariantu
- Ukryty natywny select WC — pełna kompatybilność z wariantów
- CSS .vv-swatch-item.active — wizualne zaznaczenie wyboru
- Działa na karcie produktu z grupą _
Zamiast osobnej wtyczki
- Variation Swatches for WooCommerce
- WooCommerce Variation Swatches
Porównania opisują typowy model wdrożeń na polskim rynku WooCommerce (wtyczki marketplace, huby SaaS, ręczna konfiguracja) — bez wskazywania marek konkurencji. Zakres VinVic PRO wynika z kodu vinvic-pro w repozytorium. Inne produkty mogą oferować część funkcji; różnica dotyczy pełnego obiegu w jednym silniku WordPress.
Jak to działa pod spodem (dla wdrożeniowca)
render_custom_swatches() chowa oryginalny HTML selecta i renderuje .vv-swatch-container. JS jQuery ustawia val() na select i wywołuje change. Style w inject_frontend_styles() — active state, hover, flex-wrap.
vinvic-pro/modules/variants.php → render_custom_swatches()