VINVIC PRO OS
Sprzedaż w sklepie

Wtyczka do bocznego koszyka WooCommerce — Slide Cart

W większości sklepów klient po kliknięciu „dodaj do koszyka” trafia na osobną stronę — traci produkt z oczu i często rezygnuje, zwłaszcza na telefonie. Wtyczka do bocznego koszyka VinVic PRO wysuwa panel z boku: klient dalej ogląda sklep i od razu widzi, co wrzucił do koszyka.

Jak wygląda w panelu

7 ekrany panelu — każdy opisany osobno (zakładki / widoki).

Ekran 1 z 7

Ustawienia

VinVic Pro → Koszyk i Checkout

Ustawienia — Panel WordPress

Hub modułu Koszyk i Checkout — stąd przechodzisz do koszyka bocznego, strony koszyka, kasy, podziękowania, log wysyłki i daty dostawy. Presety i eksport JSON też są tutaj.

Po kolei

  1. Przejrzyj kafelki modułów koszyka — każdy prowadzi do osobnej zakładki ustawień.
  2. Zastosuj preset kolorystyczny lub wyeksportuj ustawienia JSON przed większymi zmianami.
  3. Włącz koszyk boczny i Ultra checkout przełącznikami na kafelkach hubu.

Numer zamówienia

  • Opcjonalny prefiks daty (RRMMDD) przed standardowym numerem WooCommerce. Dotyczy wyświetlania w sklepie, mailach, panelu admina, RMA i eksporcie — bez zmiany wewnętrznego ID zamówienia.
  • «Zapisz» — zatwierdza zmiany na tym ekranie.

Typografia i spójność czcionek

  • Jedna czcionka w całym ekosystemie VinVic: koszyk boczny, /koszyk/, /zamowienie/, shortcode, podsumowania i nakładka „twardy priorytet”.
  • Metka ręczna na produkcie + automatyczna druga metka rabatu przy promocji. Kolory „Promocja” dotyczą tej automatycznej metki.
  • Po wyłączeniu modułu odpowiednie podstrony w menu po lewej nadal służą do edycji, ale sklep może nie renderować tych elementów, dopóki moduł nie będzie włączony.
  • «Zapisz» — zatwierdza zmiany na tym ekranie.
  • Przycisk «Przywróć domyślne (globalne)».

Pola

  • «Zastosuj preset» — Presety i kopia zapasowa. Presety to gotowe palety kolorów i zaokrągleń — nie wyłączają modułów ani nie podmieniają logo. Eksport/import to pełny plik ustawień…
  • «Zastosuj preset» — Wybierz gotowy styl (jasny, ciemny, kolor akcentu) i kliknij „Zastosuj preset”. Nadpisuje kolory koszyka bocznego, checkoutu i podziękowania — możesz potem…
  • «Import JSON» — Wgrywasz wcześniej wyeksportowany JSON VinVic — pola z pliku nadpisują obecne ustawienia. Zrób eksport na wypadek, gdyby plik był z innej wersji wtyczki.

Typografia i spójność czcionek

  • «Tryb czcionki» — Jedna czcionka w całym ekosystemie VinVic — koszyk boczny, strona koszyka, zamówienie, shortcode i podziękowanie. Spójna typografia buduje zaufanie i wygląd…
  • «Tryb czcionki» — Tryb czcionki decyduje, skąd WordPress ładuje font.
  • «Nazwa rodziny (Google) — gdy tryb „Inna z Google”» — Nazwa rodziny z Google Fonts, np. DM Sans lub Poppins. Działa tylko przy trybie „Inna z Google”. Wielkość liter w nazwie ma znaczenie — skopiuj z Google.
  • «Własny font-family (gdy tryb „Własny stos”)» — Pełna wartość CSS font-family, np. "Moja Czcionka", system-ui, sans-serif. Używane przy trybie „Własny stos”. Na końcu zawsze dodaj zapasowe fonty systemowe.
  • «Opcjonalny URL arkusza czcionki (gdy własny @font-face / hosting)» — Adres arkusza CSS z definicją @font-face lub linkiem do Google Fonts / hostingu. Pozostaw puste, jeśli font ładujesz w motywie lub Code Managerze.
  • «Tło» — Metki na produktach w koszyku i checkoutcie: ręczna metka z karty produktu oraz automatyczna „Promocja -%”. Kolory tutaj nadpisują domyślne style modułu Strona…

Zapisz zmiany

  • «Zapisz» — zatwierdza zmiany na tym ekranie.
Ekran 2 z 7

Koszyk boczny

VinVic Pro → Koszyk i Checkout

Koszyk boczny — Panel WordPress

Ustawienia wysuwanego koszyka bocznego: włączenie, kolory, próg darmowej dostawy i teksty widoczne dla klienta bez przeładowania strony.

Po kolei

  1. Włącz wysuwany koszyk boczny i ustaw próg darmowej dostawy.
  2. Dopasuj kolory panelu, bąbelka i tekstów progresji dostawy.
  3. Zapisz — sprawdź podgląd na sklepie na telefonie.

Schemat (nawigacja po ustawieniach)

  • Kliknij element, aby przewinąć do odpowiedniego pola edycji.
  • Podgląd jak dla nowego gościa (Wygląd → Sklep, tryb dual): Złoto w nocy (domyślny: ciemny)
  • Przycisk «−».
  • Przycisk «Kontynuuj zakupy».

Treści i funkcje

  • Te pola trafiają wprost do widoku sklepu — używaj zwykłej pisowni (np. zdanie z wielkiej litery), żeby tekst był czytelny dla klientów.

🎨 Design & Kolory

  • «TŁO KOSZYKA» — Kolory panelu wysuwanego koszyka i pływającej ikony. Kliknij schemat powyżej, aby przeskoczyć do pola.
  • «TŁO KOSZYKA» — Tło całego panelu koszyka bocznego (obszar pod listą produktów i stopką).
  • «TŁO NAGŁÓWKA» — Tło paska nagłówka z tytułem koszyka i przyciskiem zamknięcia.
  • «TEKST NAGŁÓWKA» — Kolor tekstu i ikony X w nagłówku panelu.
  • «KOLOR CEN» — Kolor cen produktów i kwoty „Razem” w stopce koszyka.
  • «KOLOR TEKSTU PRODUKTÓW» — Kolor nazw produktów, podsumowań i tekstu informacyjnego (np. VAT).

Treści i funkcje

  • «Tytuł koszyka (nagłówek panelu)» — Teksty i zachowanie widoczne dla klienta w panelu bocznym.
  • «Tytuł koszyka (nagłówek panelu)» — Nagłówek panelu, np. „Twój koszyk”. Widoczny u góry po otwarciu side cart.
  • «PRÓG DARMOWEJ DOSTAWY (PLN)» — Kwota w PLN (liczba bez „zł”), od której klient ma darmową dostawę. Musi być zgodna z regułą darmowej wysyłki w WooCommerce → Wysyłka.
  • «Komunikat — darmowa dostawa» — Komunikat gdy próg został osiągnięty, np. „Masz darmową dostawę!”.
  • «Tekst przed kwotą do darmowej dostawy» — Tekst przed kwotą brakującą do darmowej dostawy, np. „Do darmowej dostawy:”.
  • «Przycisk „Zamówienie”» — Etykieta głównego przycisku prowadzącego do zamówienia — w koszyku bocznym i w podsumowaniu checkoutu.

Zapisz zmiany

  • «Zapisz» — zatwierdza zmiany na tym ekranie.
Ekran 3 z 7

Koszyk

VinVic Pro → Koszyk i Checkout

Koszyk — Panel WordPress

Strona koszyka w wariancie Ultra — wygląd listy produktów, ilości i komunikatów magazynowych.

Po kolei

  1. Skonfiguruj wygląd strony koszyka (Ultra): wiersze produktów i komunikaty magazynowe.
  2. Ustaw szerokość, zaokrąglenia i kolory zgodnie z resztą sklepu.
  3. Zapisz i dodaj produkt testowy, aby zobaczyć efekt.

Schemat statusów i komunikatów

  • Kliknij status lub inny element tabeli, aby przejść do edycji poniżej.
  • Podgląd jak dla nowego gościa (Wygląd → Sklep, tryb dual): Złoto w nocy (domyślny: ciemny)
  • Przycisk «−».

Ilości, strona /koszyk/ i statusy

  • Zachowanie formularza, tekstów i shortcode — poniżej te same kody co na stronie sklepu.

Schemat statusów i komunikatów

  • «Schemat statusów i komunikatów» — Podgląd tabeli statusów — kliknij kolorowy badge w tabeli, aby przewinąć do pola tekstowego poniżej.

Ilości, strona /koszyk/ i statusy

  • «Szybkie + / − w koszyku i na checkoutcie» — Sterowanie ilościami i uproszczeniem natywnego formularza Woo na /koszyk/.
  • «Szybkie + / − w koszyku i na checkoutcie» — Przyciski + / − na stronie koszyka i checkoutcie — zmiana ilości przez AJAX bez „Zaktualizuj koszyk”.
  • «Ukryj natywny blok kuponu WooCommerce» — Ukrywa wbudowany blok kuponu WooCommerce na stronie koszyka. Kupon nadal działa w koszyku bocznym VinVic (jeśli włączony).
  • «Ukryj przycisk „Zaktualizuj koszyk”» — Ukrywa przycisk „Zaktualizuj koszyk” — przy włączonych +/− zwykle nie jest potrzebny.
  • «W magazynie» — Etykieta przy produkcie dostępnym od ręki (zielony badge w tabeli koszyka).
  • «Na zamówienie» — Tekst gdy produkt jest „na zamówienie” / backorder.

Zapisz zmiany

  • «Zapisz» — zatwierdza zmiany na tym ekranie.
Ekran 4 z 7

Strona zamówienia

VinVic Pro → Koszyk i Checkout

Strona zamówienia — Panel WordPress

Wygląd strony zamówienia: logo, kolory, panel zaufania, szerokość i zaokrąglenia formularza.

Po kolei

  1. Ustaw logo, kolory i panel zaufania na stronie zamówienia.
  2. Dopasuj szerokość formularza i zaokrąglenia pól.
  3. Zapisz — przejdź testowo do kasy jako klient.

Schemat formularza i trust panelu

  • Kliknij strefę (formularz, karty, trust), aby przewinąć do pól w sekcjach poniżej.
  • Podgląd jak dla nowego gościa (Wygląd → Sklep, tryb dual): Złoto w nocy (domyślny: ciemny)
  • Przycisk «Zamówienie».

🏷️ Logo w nagłówku Ultra Checkout

  • Wybierz obraz z biblioteki (PNG/SVG). Gdy brak wyboru, na koszyku i zamówieniu używane jest logo witryny z Customizera (Wygląd → Tożsamość witryny → Logo).
  • Identyfikator załącznika: 0
  • Przycisk «Wybierz obraz z biblioteki».
  • Przycisk «Usuń (przywróć logo strony)».

Trust panel — ikony przy checkout

  • Domyślne teksty są neutralne (placeholdery). Dopasuj tytuły i opisy do swojej branży — klienci je widzą na stronie zamówienia.

🏷️ Logo w nagłówku Ultra Checkout

  • «🏷️ Logo w nagłówku Ultra Checkout» — Logo nad formularzem zamówienia i na stronie koszyka w układzie Ultra. Puste = logo witryny z Wygląd → Dostosuj → Tożsamość witryny. Zalecany PNG/SVG bez tła.

Trust panel — ikony przy checkout

  • «Ikona» — Cztery kafelki zaufania pod checkoutem. Użyj emoji lub krótkich symboli — budują spokój przed płatnością.
  • «Ikona» — Emoji lub krótki symbol (np. 🏆 🚚). Wyświetlany nad tytułem kafelka.
  • «Tytuł» — Krótki nagłówek kafelka, np. „Dostawa” lub „Bezpieczeństwo”.
  • «Opis» — Jedno–dwa zdania opisu — konkret dla Twojego sklepu (czas wysyłki, certyfikaty, zwroty).

🎛️ Styl strony zamówienia

  • «Kolor tła checkout» — Paleta i wymiary strony /zamowienie/ w nakładce Ultra.
  • «Kolor tła checkout» — Tło całej strony checkout (za kartami formularza).
  • «Kolor karty checkout» — Tło białych/kolorowych kart: dane klienta i podsumowanie zamówienia.
  • «Kolor tekstu checkout» — Domyślny kolor tekstu na checkoutcie (etykiety, opisy).
  • «Kolor akcentu checkout» — Kolor nagłówków sekcji, sum i wyróżnień w podsumowaniu.
  • «Kolor przycisku ZAMÓW» — Tło przycisku finalizacji zamówienia („Zamówienie” / „Kupuję”).
Ekran 5 z 7

Strona podziękowania

VinVic Pro → Koszyk i Checkout

Strona podziękowania — Panel WordPress

Ekran podziękowania po zakupie — nagłówek i notatka dla klienta.

Po kolei

  1. Edytuj nagłówek i notatkę po złożeniu zamówienia.
  2. Dopasuj komunikat do tonu marki sklepu.
  3. Zapisz i złóż testowe zamówienie, aby zobaczyć podziękowanie.

Integracje opinii (Centrum Opinii)

  • Google Customer Reviews: Aktywna na stronie podziękowania (popup Google) — ankieta ~7 dni po dostawie
  • Ankieta VinVic (e-mail): Włączone — mail po 7 dniach + strona ankiety OK
  • Google Merchant Center: Merchant ID: ████████ (feedy GMC w Centrum Opinii)

Schemat treści i logo

  • Kliknij element schematu, aby przejść do pól poniżej. Logo w schemacie otwiera bibliotekę mediów (po wgraniu pliku w sekcji logo pod schematem).
  • Podgląd jak dla nowego gościa (Wygląd → Sklep, tryb dual): Złoto w nocy (domyślny: ciemny)
  • Twoje zamówienie zostało przyjęte i jest w trakcie realizacji.

🏷️ Logo na stronie podziękowania

  • Własny obraz tylko na stronie order-received. Puste pole — logo Ultra Checkout, potem logo witryny z Customizera.
  • ID załącznika: [identyfikator z biblioteki mediów]
  • Przycisk «Wybierz obraz z biblioteki».
  • Przycisk «Przywróć (użyj logo checkout)».

🎉 Strona podziękowania — treści

  • Te treści pokazują się po złożeniu zamówienia, nad szczegółami zamówienia.

🎨 Strona podziękowania — kolory

  • Osobna paleta tylko dla endpointu order-received (nie wpływa na checkout).

🏷️ Logo na stronie podziękowania

  • «🏷️ Logo na stronie podziękowania» — Osobne logo tylko na stronie „Dziękujemy za zamówienie”. Puste = logo checkout / witryny.
Ekran 6 z 7

Loga klas wysyłkowych

VinVic Pro → Koszyk i Checkout

Loga klas wysyłkowych — Panel WordPress

Logotypy klas wysyłkowych wyświetlane w koszyku i na stronie zamówienia.

Po kolei

  1. Przypisz logo lub ikonę do każdej klasy wysyłkowej.
  2. Obrazy pojawią się w koszyku i na stronie zamówienia.
  3. Zapisz zmiany po wgraniu plików.

Metody wysyłki (strefy WooCommerce)

  • VinVic Wysyłka elastyczna
  • Poniżej w „Metodach wysyłki” znajdziesz karty z plakietką VinVic — to ten sam klucz co w module Wysyłka elastyczna (link „Logo” prowadzi tutaj).
  • Te pozycje odpowiadają wierszom w podsumowaniu dostawy (DHL, odbiór, przesyłka) — to nie to samo co „klasa wysyłkowa” na karcie produktu.
  • Przycisk «Wybierz / zmień».
  • Przycisk «Usuń».

Pola

  • «Ustawienia: loga klas wysyłkowych» — Logotypy operatorów przy metodach dostawy w koszyku i checkoutcie. Domyślne SVG rozpoznają InPost, DPD, DHL itd. — wgrany plik zawsze wygrywa.

Metody wysyłki (strefy WooCommerce)

  • «W podsumowaniu preferuj tylko dopasowania z koszyka. Gdy nic nie pasuje, domyślnie pokazane są wszystkie przypisane loga. Odznacz, aby zawsze pokazywać pełną listę przypisanych grafik. Gdy zaznaczone: w podsumowaniu wysyłki pokazuj tylko loga pasujące do produktów w koszyku. Odznacz, aby zawsze pokazywać wszystkie przypisane grafiki.» — Gdy zaznaczone: w podsumowaniu wysyłki pokazuj tylko loga pasujące do produktów w koszyku. Odznacz, aby zawsze pokazywać wszystkie przypisane grafiki.
  • «Dodatkowe dni dostawy» — Metody ze stref WooCommerce (DHL, odbiór, kurier) — to wybór klienta przy zamówieniu, nie klasa produktu.
  • «Dodatkowe dni dostawy» — Dodatkowe dni do szacowanej daty dostawy dla tej metody/klasy. 0 = licz tylko ogólne dni z zakładki „Szacowana data dostawy”. Przy wielu klasach w koszyku bierzemy…
  • «Dodatkowe dni dostawy» — Klasy wysyłkowe przypięte do produktu — wpływają na dopasowanie loga, gdy w koszyku są takie towary.

Zapisz zmiany

  • «Zapisz» — zatwierdza zmiany na tym ekranie.
Ekran 7 z 7

Szacowana data dostawy

VinVic Pro → Koszyk i Checkout

Szacowana data dostawy — Panel WordPress

Szacowana data dostawy — dni kompletacji, cut-off, święta oraz wyświetlanie daty w koszyku i na karcie produktu.

Po kolei

  1. Ustaw dni kompletacji dla magazynu i backorderu.
  2. Podaj godzinę cut-off i dni wolne od wysyłki (święta).
  3. Włącz wyświetlanie daty w koszyku i na karcie produktu.

Sekcja dostawy na karcie produktu

  • 0 = nie dodawaj osobnej fazy realizacji; wtedy liczone są wyłącznie dni dostawy z modułu Strona produktu (wg stanu: magazyn / zamówienie).
  • Dodawaj daty przyciskiem „Dodaj” albo klikając kalendarz. Lista tagów obok kalendarza — usuń klikając „×” (bez szukania dnia na siatce).
  • Dni w kolorze fioletu — wolne (bez wysyłki), jak na liście tagów. Dni przeszłe są jaśniejsze i wyszarzone (nie da się ich ustawić). Dziś i przyszłość: kliknij, aby włączyć lub wyłączyć.
  • Przycisk «←».
  • Przycisk «→».

Pola

  • «Szacowana data dostawy» — Silnik kalendarza — godzina graniczna, dni realizacji magazynu i dni bez wysyłki. Współpracuje z dodatkowymi dniami per klasa wysyłkowa.

Sekcja dostawy na karcie produktu

  • «Dni (w magazynie) — baza do daty» — Bazowa liczba dni i etykiety na karcie produktu ([vv_product_delivery]). Układ sekcji włączasz w module Strona produktu.
  • «Dni (w magazynie) — baza do daty» — Ile dni roboczych dodajemy do daty, gdy produkt jest w magazynie (stan „instock”).
  • «Dni (na zamówienie) — wydłużony czas» — Dłuższy czas dla produktów na zamówienie (backorder).
  • «Nagłówek w polu daty (np. „Dostawa:”)» — Tekst przed datą, np. „Przybliżona data dostawy:” lub „Dostawa:”.
  • «Dodatkowa linia pod datą (np. „dni robocze”)» — Druga linia pod datą, np. „dni robocze” lub „orientacyjnie”.
  • «Godzina graniczna zamówień (0–23)» — Godzina (0–23) po której zamówienie liczy się jako złożone „następnego dnia”. Np. 13 = zamówienie o 14:00 przechodzi na reguły „po granicy”.

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

Na co dzień w sklepie

Co realnie zyskujesz — bez nazw modułów z panelu programisty.

  • 1W panelu VinVic PRO włącz moduł Koszyk i Checkout
  • 2Włącz koszyk boczny (slide cart) i ustaw próg darmowej dostawy
  • 3Sprawdź na telefonie: dodaj produkt → panel wysuwa się z boku
  • 4Opcjonalnie włącz Ultra Checkout dla szybszej kasy
Moduł w pakiecie 99 zł netto/mc — wtyczka + motyw vinvic-pro-themes
Cennik i dostępność

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.

Przykład z praktyki

Szukasz wtyczki do bocznego koszyka w WooCommerce?

W większości sklepów klient po kliknięciu „dodaj do koszyka” trafia na osobną stronę — traci produkt z oczu i często rezygnuje, zwłaszcza na telefonie. Wtyczka do bocznego koszyka VinVic PRO wysuwa panel z boku: klient dalej ogląda sklep i od razu widzi, co wrzucił do koszyka.

Co Cię boli

Klient gubi się po dodaniu do koszyka

Domyślny WooCommerce wysyła klienta na osobną stronę koszyka. Na telefonie to oznacza przeładowania, utratę kontekstu i porzucone zakupy — szczególnie gdy klient chciał tylko sprawdzić sumę.

Co możesz zrobić

Boczny koszyk + szybka kasa w jednym module

Panel wysuwa się z boku ekranu. Klient edytuje koszyk bez opuszczania produktu, widzi ile brakuje do darmowej dostawy i przechodzi do uproszczonej kasy.

  • W panelu VinVic PRO włącz moduł Koszyk i Checkout
  • Włącz koszyk boczny (slide cart) i ustaw próg darmowej dostawy
  • Sprawdź na telefonie: dodaj produkt → panel wysuwa się z boku
  • Opcjonalnie włącz Ultra Checkout dla szybszej kasy

Jak to wdrożyć — krok po kroku

Szukasz wtyczki do bocznego koszyka w WooCommerce?

W większości sklepów klient po kliknięciu „dodaj do koszyka” trafia na osobną stronę — traci produkt z oczu i często rezygnuje, zwłaszcza na telefonie. Wtyczka do bocznego koszyka VinVic PRO wysuwa panel z boku: klient dalej ogląda sklep i od razu widzi, co wrzucił do koszyka.

Efekt: Mniej porzuconych koszyków. Zamiast osobnej wtyczki Side Cart + osobnej wtyczki free shipping — wszystko w VinVic PRO.

Czego nie musisz już dokupywać

  • Osobna wtyczka Side Cart / CartPops
  • Osobna wtyczka paska darmowej dostawy
  • Osobna wtyczka do checkoutu mobile

Co zyskujesz

  • Koszyk boczny bez przeładowania strony
  • Pasek progresji darmowej dostawy na żywo
  • Checkout mobile-first — mniej porzuconych zamówień
  • Wszystko w jednym pakiecie VinVic PRO — bez dokładania 3 wtyczek

Co to daje w praktyce

Panel wysuwa się z boku ekranu. Klient edytuje koszyk bez opuszczania produktu, widzi ile brakuje do darmowej dostawy i przechodzi do uproszczonej kasy.

Sklep referencyjny: haumru.pl

Szczegóły techniczne (dla wdrożeniowca)

Moduł checkout_genius — pełna lista z repozytorium:

  • Wysuwany koszyk boczny (slide-in) z progresją darmowej dostawy
  • Ultra Checkout UI — 2 kolumny, mobile-first, trust panel
  • Shortcode [vv_woocommerce_cart] / [vv_woocommerce_checkout] na dowolnej stronie
  • Importer/eksporter konfiguracji JSON, podgląd live w panelu admina
  • Kompatybilność z bramkami płatności i WAF/ModSecurity

Plik źródłowy: vinvic-pro/modules/checkout_genius.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.

Cennik i szczegóły