Warianty WooCommerce — swatche HEX, live stock, dynamiczna cena
Standardowy select WooCommerce nie pokazuje koloru ani miniatury przed wyborem. Dyrygent Wariantów zamienia dropdown na kafelki (swatche) — cena i stan magazynu aktualizują się po kliknięciu wariantu.
Jak wygląda w panelu
2 ekrany panelu — każdy opisany osobno (zakładki / widoki).
Gotowy do dyrygowania
VinVic Pro → Warianty Produktu
Aby połączyć produkty w warianty, przejdź do listy produktów WooCommerce, zaznacz wybrane pozycje i wybierz akcję masową VinVic Pro: Dyrygent.
Po kolei
- Otwórz moduł w panelu VinVic Pro.
- Przejrzyj sekcje ustawień i podpowiedzi (?) przy polach.
- Zapisz zmiany i sprawdź efekt na froncie sklepu.
Gotowy do dyrygowania
- Aby połączyć produkty w warianty, przejdź do listy produktów WooCommerce, zaznacz wybrane pozycje i wybierz akcję masową VinVic Pro: Dyrygent.
- Przycisk «PRZEJDŹ DO PRODUKTÓW».
Gotowy do dyrygowania
- «Gotowy do dyrygowania» — Przenosi do listy produktów WooCommerce, gdzie wybierzesz pozycje do zgrupowania w warianty.
Aby połączyć produkty w warianty, przejdź do listy produktów WooCommerce, zaznacz wybrane pozycje i wybierz akcję masową VinVic Pro: Dyrygent.
Po kolei
- Otwórz moduł w panelu VinVic Pro.
- Przejrzyj sekcje ustawień i podpowiedzi (?) przy polach.
- Zapisz zmiany i sprawdź efekt na froncie sklepu.
Gotowy do dyrygowania
- Aby połączyć produkty w warianty, przejdź do listy produktów WooCommerce, zaznacz wybrane pozycje i wybierz akcję masową VinVic Pro: Dyrygent.
- Przycisk «PRZEJDŹ DO PRODUKTÓW».
Gotowy do dyrygowania
- «Gotowy do dyrygowania» — Przenosi do listy produktów WooCommerce, gdzie wybierzesz pozycje do zgrupowania w warianty.
Aby połączyć produkty w warianty, przejdź do listy produktów WooCommerce, zaznacz wybrane pozycje i wybierz akcję masową VinVic Pro: Dyrygent.
Po kolei
- Otwórz moduł w panelu VinVic Pro.
- Przejrzyj sekcje ustawień i podpowiedzi (?) przy polach.
- Zapisz zmiany i sprawdź efekt na froncie sklepu.
Gotowy do dyrygowania
- Aby połączyć produkty w warianty, przejdź do listy produktów WooCommerce, zaznacz wybrane pozycje i wybierz akcję masową VinVic Pro: Dyrygent.
- Przycisk «PRZEJDŹ DO PRODUKTÓW».
Gotowy do dyrygowania
- «Gotowy do dyrygowania» — Przenosi do listy produktów WooCommerce, gdzie wybierzesz pozycje do zgrupowania w warianty.
Ustawienia automatów
VinVic Pro → Warianty Produktu
Jeśli aktywne, warianty będą wyświetlane jako kafelki ze zdjęciem.
Po kolei
- Otwórz moduł w panelu VinVic Pro.
- Przejrzyj sekcje ustawień i podpowiedzi (?) przy polach.
- Zapisz zmiany i sprawdź efekt na froncie sklepu.
🎨 Personalizacja Wyglądu Wariantów
- Jeśli aktywne, warianty będą wyświetlane jako kafelki ze zdjęciem.
- «Zapisz» — zatwierdza zmiany na tym ekranie.
📖 Shortcode & Instrukcja
- Użyj poniższego kodu, aby wyświetlić siatkę wariantów (Hybryda) na karcie produktu:
- Moduł Dyrygent automatycznie paruje produkty o identycznym ID Grupy. Gdy wstawisz shortcode, system przeanalizuje grupę i wygeneruje dynamiczną siatkę wyboru.
🎨 Personalizacja Wyglądu Wariantów
- «Pokaż zdjęcia produktów (Miniatury)» — Wygląd kafelków shortcode [vinvic_variants] i swatchy na karcie produktu.
- «Pokaż zdjęcia produktów (Miniatury)» — Włączone = kafelki pokazują miniaturę produktu nad nazwą wariantu. Wyłączone = tylko tekst (szybsze, mniej miejsca).
- «Aktywne tło» — Tło aktywnego (wybranego) kafelka wariantu. Domyślnie jasny niebieski — dopasuj do kolorystyki sklepu (moduł Admin Theme / Checkout).
- «Aktywny tekst» — Kolor tekstu na aktywnym kafelku — powinien być czytelny na tle „Aktywne tło”.
- «Domyślne obramowanie» — Obramowanie nieaktywnych kafelków. Subtelny szary odcina kafelki od tła karty produktu.
- «KOLUMNY PC» — Ile kafelków w jednym rzędzie na komputerze (1–10). Więcej kolumn = mniejsze kafelki. Typowo 3–5.
Zapisz zmiany
- «Zapisz» — zatwierdza zmiany na tym ekranie.
Jeśli aktywne, warianty będą wyświetlane jako kafelki ze zdjęciem.
Po kolei
- Otwórz moduł w panelu VinVic Pro.
- Przejrzyj sekcje ustawień i podpowiedzi (?) przy polach.
- Zapisz zmiany i sprawdź efekt na froncie sklepu.
🎨 Personalizacja Wyglądu Wariantów
- Jeśli aktywne, warianty będą wyświetlane jako kafelki ze zdjęciem.
- «Zapisz» — zatwierdza zmiany na tym ekranie.
📖 Shortcode & Instrukcja
- Użyj poniższego kodu, aby wyświetlić siatkę wariantów (Hybryda) na karcie produktu:
- Moduł Dyrygent automatycznie paruje produkty o identycznym ID Grupy. Gdy wstawisz shortcode, system przeanalizuje grupę i wygeneruje dynamiczną siatkę wyboru.
🎨 Personalizacja Wyglądu Wariantów
- «Pokaż zdjęcia produktów (Miniatury)» — Wygląd kafelków shortcode [vinvic_variants] i swatchy na karcie produktu.
- «Pokaż zdjęcia produktów (Miniatury)» — Włączone = kafelki pokazują miniaturę produktu nad nazwą wariantu. Wyłączone = tylko tekst (szybsze, mniej miejsca).
- «Aktywne tło» — Tło aktywnego (wybranego) kafelka wariantu. Domyślnie jasny niebieski — dopasuj do kolorystyki sklepu (moduł Admin Theme / Checkout).
- «Aktywny tekst» — Kolor tekstu na aktywnym kafelku — powinien być czytelny na tle „Aktywne tło”.
- «Domyślne obramowanie» — Obramowanie nieaktywnych kafelków. Subtelny szary odcina kafelki od tła karty produktu.
- «KOLUMNY PC» — Ile kafelków w jednym rzędzie na komputerze (1–10). Więcej kolumn = mniejsze kafelki. Typowo 3–5.
Zapisz zmiany
- «Zapisz» — zatwierdza zmiany na tym ekranie.
Jeśli aktywne, warianty będą wyświetlane jako kafelki ze zdjęciem.
Po kolei
- Otwórz moduł w panelu VinVic Pro.
- Przejrzyj sekcje ustawień i podpowiedzi (?) przy polach.
- Zapisz zmiany i sprawdź efekt na froncie sklepu.
🎨 Personalizacja Wyglądu Wariantów
- Jeśli aktywne, warianty będą wyświetlane jako kafelki ze zdjęciem.
- «Zapisz» — zatwierdza zmiany na tym ekranie.
📖 Shortcode & Instrukcja
- Użyj poniższego kodu, aby wyświetlić siatkę wariantów (Hybryda) na karcie produktu:
- Moduł Dyrygent automatycznie paruje produkty o identycznym ID Grupy. Gdy wstawisz shortcode, system przeanalizuje grupę i wygeneruje dynamiczną siatkę wyboru.
🎨 Personalizacja Wyglądu Wariantów
- «Pokaż zdjęcia produktów (Miniatury)» — Wygląd kafelków shortcode [vinvic_variants] i swatchy na karcie produktu.
- «Pokaż zdjęcia produktów (Miniatury)» — Włączone = kafelki pokazują miniaturę produktu nad nazwą wariantu. Wyłączone = tylko tekst (szybsze, mniej miejsca).
- «Aktywne tło» — Tło aktywnego (wybranego) kafelka wariantu. Domyślnie jasny niebieski — dopasuj do kolorystyki sklepu (moduł Admin Theme / Checkout).
- «Aktywny tekst» — Kolor tekstu na aktywnym kafelku — powinien być czytelny na tle „Aktywne tło”.
- «Domyślne obramowanie» — Obramowanie nieaktywnych kafelków. Subtelny szary odcina kafelki od tła karty produktu.
- «KOLUMNY PC» — Ile kafelków w jednym rzędzie na komputerze (1–10). Więcej kolumn = mniejsze kafelki. Typowo 3–5.
Zapisz zmiany
- «Zapisz» — zatwierdza zmiany na tym ekranie.
Zrzuty i opisy pochodzą z panelu demonstracyjnego — układ, etykiety i szczegóły mogą różnić się w Twojej wersji VinVic PRO. Materiał poglądowy.
Każda funkcja ma własną stronę
Wybierz, co chcesz wdrożyć — pod każdą kartą jest pełna instrukcja krok po kroku (bez żargonu technicznego na start).
Dla właściciela sklepu
Dropdown „Wybierz kolor” zastępują klikalne swatche — klient wybiera wariant jednym kliknięciem, a ukryty select WC nadal steruje logiką wariantów?
Swatche tekstowe dla każdej opcji atrybutu wariantu
Swatche wariantów zamiast dropdownu
Pełna instrukcja →Dla właściciela sklepu
Dyrygent — grupowanie produktów w rodziny wariantów
Zakładki admin: Dyrygent, Aktywne grupy, Ustawienia
Dyrygent — grupowanie produktów w rodziny wariantów
Pełna instrukcja →Na co dzień w sklepie
Co realnie zyskujesz — bez nazw modułów z panelu programisty.
- 1Włącz moduł Dyrygent Wariantów
- 2Skonfiguruj swatche dla atrybutów produktów w panelu modułu
- 3Sprawdź kartę produktu na telefonie — wybór bez dropdownu
- 4Opcjonalnie: grupy wariantów (osobna funkcja w module) dla wielu kolorów jako osobnych produktów
Twój problem → co możesz zrobić
Opis dla właściciela sklepu. Szczegóły techniczne (pliki PHP) — na dole strony, w sekcji dla wdrożeniowca.
Dropdown koloru odstrasza klientów na telefonie?
Standardowy select WooCommerce nie pokazuje koloru ani miniatury przed wyborem. Dyrygent Wariantów zamienia dropdown na kafelki (swatche) — cena i stan magazynu aktualizują się po kliknięciu wariantu.
Dropdown wariantów na mobile — klient nie widzi koloru
Select z 20 kolorami wygląda jak formularz urzędowy. Klient nie wie, co wybrał, dopóki nie doda do koszyka — i często rezygnuje.
Swatche, dynamiczna cena i galeria per wariant
render_custom_swatches() — kafelki .vv-swatch-item zamiast selecta. Po wyborze wariantu: cena, stan i galeria produktu się podmieniają.
- Włącz moduł Dyrygent Wariantów
- Skonfiguruj swatche dla atrybutów produktów w panelu modułu
- Sprawdź kartę produktu na telefonie — wybór bez dropdownu
- Opcjonalnie: grupy wariantów (osobna funkcja w module) dla wielu kolorów jako osobnych produktów
Jak to wdrożyć — krok po kroku
Dropdown koloru odstrasza klientów na telefonie?
Standardowy select WooCommerce nie pokazuje koloru ani miniatury przed wyborem. Dyrygent Wariantów zamienia dropdown na kafelki (swatche) — cena i stan magazynu aktualizują się po kliknięciu wariantu.
Efekt: Włącz moduł Dyrygent Wariantów
Czego nie musisz już dokupywać
- Wtyczki variation swatches (YITH, itp.)
- Ręczne CSS na selectach WooCommerce
- Osobna wtyczka do macierzy wariantów
Co zyskujesz
- Swatche HEX, tekstowe i obrazkowe
- Live cena i stock per wariant
- Podmiana galerii po wyborze
- Macierz z kontrolą out-of-stock
Co to daje w praktyce
render_custom_swatches() — kafelki .vv-swatch-item zamiast selecta. Po wyborze wariantu: cena, stan i galeria produktu się podmieniają.
Sklep referencyjny: haumru.pl
Szczegóły techniczne (dla wdrożeniowca)
Moduł variant_manager — pełna lista z repozytorium:
- Swatche kolorów (kółka HEX), tekstowe i obrazkowe
- Dynamiczna cena i stan magazynu per wariant w czasie rzeczywistym
- Automatyczna podmiana galerii po wyborze wariantu
- Macierz wariantów z kontrolą dostępności (out-of-stock)
Plik źródłowy: vinvic-pro/modules/variants.php
Ten moduł wchodzi w skład abonamentu VinVic PRO (wtyczka + motyw). Wypróbuj cały system — 3 miesiące za 0 zł, pobierz paczki po akceptacji regulaminu.