DC Products Carousel - instalacja i konfiguracja

Chcesz dodać efektowną karuzelę produktów do swojego sklepu WooCommerce?

DC Products Carousel to lekka, w pełni darmowa wtyczka, która pozwala szybko i łatwo wyświetlać produkty w responsyjnym sliderze bez potrzeby pisania kodu. Co ważne – bez ograniczeń, bez wersji PRO i bez reklam.

W tym poradniku pokażemy Ci krok po kroku, jak zainstalować wtyczkę, jak ją aktywować i jak skonfigurować własną karuzelę produktów w edytorze blokowym (Gutenberg). Nawet jeśli dopiero zaczynasz przygodę z WordPressem – poradzisz sobie bez problemu.

🔹 Krok 1: Pobierz wtyczkę z oficjalnej strony

Przejdź do strony: DC Products Carousel

Kliknij przycisk Pobierz wtyczkę i zapisz plik .zip na swoim komputerze.

🔹 Krok 2: Zaloguj się do panelu WordPressa

Otwórz panel administracyjny swojego WordPressa (np. twojadomena.pl/wp-admin).

🔹 Krok 3: Przejdź do sekcji „Wtyczki”

W menu po lewej stronie wybierz Wtyczki > Dodaj nową, a następnie kliknij przycisk Wyślij wtyczkę na serwer (znajduje się obok tytułu strony).

🔹 Krok 4: Załaduj plik ZIP

Kliknij Wybierz plik, wskaż wcześniej pobrany plik .zip, a następnie kliknij Zainstaluj teraz.

Po zakończeniu instalacji kliknij Aktywuj wtyczkę.

✅ Gotowe!

Wtyczka DC Products Carousel jest teraz aktywna. Od teraz możesz używać bloku karuzeli w edytorze Gutenberg, by dodawać dynamiczne prezentacje produktów WooCommerce.

2. Tworzenie i konfiguracja karuzeli produktów w Gutenbergu

Po aktywacji wtyczki DC Products Carousel możesz zacząć tworzyć własne karuzele w edytorze blokowym WordPressa. To bardzo intuicyjny proces – poniżej przeprowadzimy Cię przez każdy etap.

🔹 Krok 1: Wybierz miejsce, gdzie ma pojawić się karuzela

Przejdź do edycji strony lub wpisu, na którym chcesz umieścić karuzelę produktów. Może to być np. strona główna, podstrona z promocjami lub dowolny landing page.

🔹 Krok 2: Dodaj blok „DC Products Carousel”

1. Kliknij przycisk + Dodaj blok w miejscu, gdzie chcesz dodać karuzelę.

2. Wyszukaj blok o nazwie DC Products Carousel.

3. Kliknij, aby go dodać do strony.

Po dodaniu zobaczysz domyślny podgląd karuzeli oraz panel ustawień po prawej stronie.

🛠️ Konfiguracja karuzeli – omówienie ustawień

Wtyczka DC Products Carousel posiada czytelnie pogrupowane ustawienia w panelu bocznym edytora Gutenberg. Oto wszystkie dostępne grupy ustawień i ich możliwości:

📌 1. Header Settings (Nagłówek karuzeli)

Tutaj ustawisz tytuł i opis widoczny nad karuzelą:

• Module Title – nagłówek karuzeli (np. "Polecane produkty").

• Description – krótki opis lub lead pod nagłówkiem.

Możesz zostawić oba pola puste, jeśli nie chcesz wyświetlać nagłówka ani opisu.

📌 2. Carousel Settings (Ustawienia karuzeli)

Tu skonfigurujesz źródło danych, ilość produktów i sposób działania:

• Product Display Mode – wybierz, co ma być wyświetlane:

  • Nowości,

  • Bestsellery,

  • Produkty w promocji.

• Show Featured Only – zaznacz, jeśli chcesz wyświetlać tylko produkty oznaczone jako „wyróżnione” w WooCommerce.

• Custom ID (optional) – unikalny identyfikator HTML dla karuzeli, przydatny np. do stylowania CSS.

• Number of Products to Fetch – ile maksymalnie produktów ma zostać pobranych (1–50).

🖥️ Widoczność na różnych urządzeniach:

• Desktop – ile produktów widocznych jednocześnie na komputerach (1–10).

• Tablet – ile produktów na tabletach (1–6).

• Mobile – ile produktów na smartfonach (1–3).

🔁 Dodatkowe opcje zachowania:

• Autoplay – automatyczne przesuwanie karuzeli.

• Loop – zapętlanie karuzeli po ostatnim produkcie.

🎨 3. Color Settings (Ustawienia kolorów)

Pełna kontrola nad wyglądem kolorystycznym Twojej karuzeli. Kolory są pogrupowane według elementów:

📋 Teksty ogólne

• Title Color – kolor nagłówka.

• Description Color – kolor opisu.

• Product Title Color – kolor nazw produktów.

• Price Color – kolor ceny.

⬅️➡️ Nawigacja

• Prev Btn Background / Next Btn Background – tło przycisków poprzedni/następny.

• Prev Btn Icon / Next Btn Icon – kolor ikon nawigacyjnych.

🛒 Przycisk „Dodaj do koszyka”

• Background / Text – kolor tła i tekstu przycisku.

• Background Hover / Text Hover – kolory przy najechaniu kursorem.

✅ Na koniec

Po skonfigurowaniu karuzeli kliknij Zaktualizuj lub Opublikuj stronę, aby zapisać zmiany. Twoja karuzela jest teraz gotowa i w pełni responsywna – dopasuje się do każdego ekranu.

FAQ – DC Products Carousel (WooCommerce)

Jak pobrać i zainstalować wtyczkę DC Products Carousel?

Wtyczkę pobierasz w formie pliku .zip ze strony autora, a następnie instalujesz przez panel WordPressa (Wtyczki → Dodaj nową → Wyślij wtyczkę na serwer). Po instalacji wystarczy ją aktywować i od razu możesz korzystać z jej funkcji.

Czy wtyczka DC Products Carousel jest darmowa?

Tak, wtyczka jest w 100% darmowa. Nie ma wersji PRO ani ukrytych opłat, a do tego działa bez reklam.

Gdzie mogę dodać karuzelę produktów?

Karuzelę można umieścić w dowolnym miejscu strony lub wpisu w edytorze blokowym Gutenberg. Najczęściej dodaje się ją na stronie głównej, w sekcji promocji albo na landing page.

Jak dodać karuzelę w Gutenbergu?

Klikasz przycisk + Dodaj blok i wyszukujesz blok „DC Products Carousel”. Po jego dodaniu pojawi się podgląd karuzeli oraz panel ustawień po prawej stronie.

Jakie źródła produktów obsługuje wtyczka?

Możesz wyświetlać nowości, bestsellery oraz produkty w promocji. Dodatkowo dostępna jest opcja pokazywania wyłącznie produktów oznaczonych jako „wyróżnione” w WooCommerce.

Ile produktów mogę wyświetlić w karuzeli?

W ustawieniach wybierasz, ile produktów ma zostać pobranych (od 1 do 50). Możesz też ustawić osobno liczbę widocznych produktów na desktopie, tablecie i telefonie.

Czy karuzela działa na telefonach?

Tak, wtyczka jest w pełni responsywna. Możesz samodzielnie ustawić, ile produktów ma być widocznych jednocześnie na różnych urządzeniach.

Jakie są opcje działania karuzeli?

Masz do wyboru m.in. automatyczne przesuwanie (Autoplay) i zapętlanie karuzeli (Loop). Dzięki temu slider działa dokładnie tak, jak chcesz.

Czy mogę dostosować wygląd karuzeli?

Tak, wtyczka ma rozbudowane ustawienia kolorystyczne. Zmienisz kolory nagłówków, opisów, nazw produktów, cen, przycisków koszyka oraz ikon nawigacyjnych.

Jak zmienić wygląd przycisku „Dodaj do koszyka”?

W ustawieniach kolorów ustawisz kolor tła i tekstu przycisku oraz jego wersję po najechaniu kursorem. Dzięki temu przycisk dopasuje się do stylistyki Twojego sklepu.

Do czego służy pole „Custom ID”?

To unikalny identyfikator HTML, który możesz nadać karuzeli. Przydaje się np. jeśli chcesz dodatkowo ostylować dany slider za pomocą CSS.

Czy mogę używać kilku karuzel na jednej stronie?

Tak, wtyczka nie ma ograniczeń co do liczby karuzel. Każdą konfigurujesz niezależnie, więc możesz np. wyświetlić osobno nowości i bestsellery.

Jak dodać tytuł i opis nad karuzelą?

W sekcji Header Settings wpisujesz tytuł oraz krótki opis. Możesz też zostawić oba pola puste, jeśli nie chcesz wyświetlać nagłówka ani leadu.

Czy muszę znać kodowanie, żeby korzystać z wtyczki?

Nie, cała konfiguracja odbywa się w edytorze blokowym Gutenberg. Wystarczy kilka kliknięć, żeby dostosować slider do własnych potrzeb.

Jak zapisać gotową konfigurację karuzeli?

Po ustawieniu wszystkich opcji wystarczy kliknąć Zaktualizuj lub Opublikuj stronę. Karuzela automatycznie dopasuje się do ekranu użytkownika.