Czym jest moduł

Design Cart Products Pro to wtyczka WordPress dla sklepów WooCommerce. Umożliwia tworzenie wielu niezależnych sekcji produktowych („widoków”) i wstawianie ich na stronie za pomocą shortcode. Każdy widok ma własną konfigurację wyglądu, źródła produktów i sposobu prezentacji (siatka lub karuzela).

W panelu administracyjnym widoki zarządzane są z poziomu menu DC Products. Na froncie moduł renderuje gotową sekcję z nagłówkiem, opisem, listą produktów, etykietami oraz przyciskiem dodania do koszyka z obsługą AJAX WooCommerce.

Zobacz wideo:

Screen prezentujący użycie modułu na sklepie internetowym:

Screen prezentujący użycie modułu na sklepie internetowym:

Jaki problem rozwiązuje

Domyślne listy produktów WooCommerce i motywy często oferują ograniczone możliwości prezentacji sekcji typu „nowości”, „promocje” czy „bestsellery” na stronie głównej lub podstronach. Konfiguracja wymaga edycji szablonów, dodatkowych wtyczek lub powtarzalnego kodowania CSS.

DC Products Pro rozwiązuje to w jednym miejscu:

• bez kodowania — pełna konfiguracja z panelu WordPress,
• wiele sekcji na jednym sklepie (np. promocje na stronie głównej, nowości w stopce kategorii),
• dopasowanie kolorystyki i typografii do identyfikacji wizualnej sklepu,
• responsywność (osobne ustawienia dla desktopu, tabletu i telefonu),
• integracja z koszykiem WooCommerce (przycisk „Dodaj do koszyka” z obsługą AJAX, gdy produkt to umożliwia).

Wymagania

• WordPress z aktywną wtyczką WooCommerce,
• uprawnienie manage_options do konfiguracji widoków,
• opcjonalnie: włączenie bibliotek z CDN (jQuery, Owl Carousel), gdy motyw lub inne wtyczki nie ładują ich poprawnie.

Funkcje modułu

Zarządzanie widokami

• lista wszystkich utworzonych widoków z datą utworzenia,
• dodawanie, edycja, kopiowanie i usuwanie widoków,
• shortcode [dc_products id="NUMER"] dla każdego widoku (numer to ID widoku w systemie),
• włączanie i wyłączanie pojedynczej instancji bez usuwania konfiguracji.

Sekcja intro (nagłówek modułu)

• tytuł i opis modułu,
• wybór tagu nagłówka (H1–H6),
• pozycja intro: nad produktami, ¼ szerokości po lewej lub po prawej,
• osobne style tytułu i opisu (kolor, rozmiar, grubość, wielkie litery, wyrównanie),
• kolor tła bloku intro,
• włączanie/wyłączanie tytułu i opisu.

Wyświetlanie produktów

• tryb Grid (siatka) lub Carousel (karuzela Owl Carousel),
• liczba produktów w wierszu / slajdzie: desktop (1–6), tablet (1–6), mobile (1–3),
• progi szerokości ekranu dla tabletu i mobile (w pikselach),
• limit pobieranych produktów (1–100),
• filtrowanie po kategorii produktów lub wszystkie kategorie,
• źródło produktów: nowości, promocje, bestsellery (popularność), ręcznie wybrane produkty (wyszukiwarka w panelu, min. 3 znaki),
• nawigacja karuzeli: na slajdach lub pod karuzelą (po stronie przeciwnej do intro przy układzie bocznym),
• kształt przycisków prev/next (kwadrat, koło), kolory, rozmiar czcionki, stany hover, włączenie/wyłączenie nawigacji.

Karty produktów

• miniatura z linkiem do produktu,
• nazwa produktu ze stylami typografii,
• ceny: promocyjna, regularna, przekreślona stara cena; wyrównanie cen,
• opcjonalne etykiety „Brutto” i cena netto (netto liczone jako cena brutto ÷ 1,23),
• przycisk dodania do koszyka: tylko ikona lub ikona z tekstem, pozycja na obrazie lub pod ceną, wyrównanie, pokazywanie po najechaniu na kartę,
• integracja z mechanizmem wc-add-to-cart i AJAX WooCommerce.

Etykiety na produktach

• etykieta „Nowość” (własny tekst i styl),
• etykieta „Promocja” (wyświetlana, gdy produkt jest w promocji),
• osobna konfiguracja kolorów tła, tekstu i obramowania, rozmiaru i grubości czcionki.

Ustawienia ogólne sekcji

• kolor tła modułu i opcjonalny obraz tła (cover, wyśrodkowany),
• szerokość kontenera w px lub % z wyśrodkowaniem,
• opcjonalny import jQuery i Owl Carousel z CDN (przydatne przy konfliktach z motywem).

Co użytkownik może zmienić

Wszystkie poniższe opcje są dostępne w edycji instancji widoku, w zakładkach: Ogólne, Intro, Wyświetlanie, Produkty, Etykiety.

Zakładka Ogólne

• status instancji (włączona / wyłączona),
• kolor tła całej sekcji,
• obraz tła sekcji (biblioteka mediów WordPress),
• szerokość kontenera (wartość + jednostka px lub %),
• import jQuery z CDN,
• import Owl Carousel z CDN.

Zakładka Intro

• treść: tytuł, tag nagłówka, opis,
• style tytułu i opisu,
• kolor tła intro, pozycja bloku,
• widoczność tytułu i opisu.

Zakładka Wyświetlanie

• tryb grid / carousel,
• liczba kolumn/slajdów na urządzeniach i progi breakpointów,
• limit i kategoria produktów,
• typ listy (nowości, promocje, bestsellery, wybrane ręcznie),
• wygląd i pozycja nawigacji karuzeli.

Zakładka Produkty

• styl nazwy produktu,
• style cen (nowa promocyjna, regularna, stara + przekreślenie),
• wyrównanie bloków cen,
• teksty i style etykiet brutto/netto oraz ceny netto,
• przycisk koszyka: kolory, hover, rozmiary ikony i tekstu, treść, pozycja, wyrównanie, widocność po hover,
• włączanie/wyłączanie: obrazu, nazwy, ceny, etykiet brutto/netto, przycisku koszyka.

Zakładka Etykiety

• tekst i styl etykiety „Nowość”,
• styl etykiety „Promocja”,
• włączanie/wyłączanie obu etykiet.

Dostosowanie do szaty graficznej sklepu

Moduł nie wymaga edycji plików motywu, aby dopasować wygląd do marki. Kolory, czcionki (rozmiar i grubość), wyrównania i tła ustawiasz w panelu — wartości trafiają jako style inline na elementy frontowe, co ma pierwszeństwo nad domyślnym arkuszem wtyczki.

Kolory i tła

• ustaw kolor tła sekcji i opcjonalnie grafikę tła zgodną z banerami sklepu,
• dopasuj kolor tła intro do sekcji hero lub kart na stronie,
• ustaw kolory przycisku koszyka i nawigacji karuzeli tak jak przyciski CTA w motywie,
• skonfiguruj etykiety „Nowość” i „Promocja” w kolorach akcentów sklepu.

Typografia

• rozmiar i grubość czcionki tytułu modułu, opisu, nazw produktów i cen — dopasuj do nagłówków i cen w motywie,
• włącz wielkie litery tam, gdzie marka tego wymaga (np. tytuły sekcji),
• wybierz tag H1–H6 zgodnie z hierarchią SEO strony.

Układ i szerokość

• ustaw szerokość kontenera (np. 1200 px lub 90%), aby sekcja wyrównała się z treścią motywu,
• wybierz grid lub karuzelę oraz liczbę produktów w rzędzie pod layout strony,
• przy układzie bocznym intro (lewa/prawa ćwiartka) nawigację karuzeli możesz umieścić pod slajdami po stronie przeciwnej do opisu.

Zachowanie kart i przycisków

• przycisk koszyka na obrazie lub pod ceną — jak w katalogu motywu,
• tylko ikona koszyka lub ikona z tekstem,
• pokazywanie przycisku dopiero po najechaniu — efekt jak w minimalistycznych siatkach produktowych,
• ukrycie elementów, których motyw już pokazuje gdzie indziej (np. same ceny netto dla B2C).

Dodatkowe dopasowanie CSS motywu

Moduł nadaje elementom klasy m.in. dcpp-section, dcpp-card, dcpp-btn-cart. Jeśli motyw wymaga jednolitego zaokrąglenia, cienia lub odstępów, możesz w arkuszu stylów motywu (Customizer → Dodatkowy CSS) nadpisać wybrane reguły dla tych klas — bez modyfikacji plików wtyczki.

Domyślny plik frontend.css wtyczki definiuje m.in. siatkę, cienie kart, zaokrąglenia kontenera i styl karuzeli. Style z panelu (kolory tekstu, tła przycisków) mają wyższy priorytet dzięki atrybutom style w HTML.

Instrukcja konfiguracji

Krok 1. Instalacja

1. Skopiuj folder wtyczki dc_products_pro do katalogu wp-content/plugins/ na serwerze WordPress.
2. W panelu WordPress przejdź do Wtyczki i aktywuj Design Cart Products Pro.
3. Upewnij się, że WooCommerce jest zainstalowany i aktywny.

Krok 2. Utworzenie widoku produktów

1. W menu bocznym wybierz DC Products.
2. Kliknij Dodaj widok produktów.
3. Wpisz nazwę instancji (np. „Strona główna — promocje”) — ułatwia to identyfikację na liście widoków.

Krok 3. Konfiguracja zakładek

1. Ogólne — włącz instancję, ustaw tło i szerokość kontenera. Opcje CDN włącz tylko wtedy, gdy karuzela nie działa lub występują błędy jQuery w konsoli przeglądarki.
2. Intro — uzupełnij tytuł i opis sekcji, ustaw style i pozycję intro. Wyłącz tytuł lub opis, jeśli nie są potrzebne.
3. Wyświetlanie — wybierz grid lub carousel, liczbę produktów w rzędzie, limit, kategorię i źródło listy. Przy źródle „Polecane” wyszukaj produkty (min. 3 znaki) i dodaj je do listy wybranych. Skonfiguruj nawigację karuzeli, jeśli używasz trybu carousel.
4. Produkty — dopasuj wygląd nazw, cen i przycisku koszyka. Włącz lub wyłącz brutto/netto według potrzeb sklepu.
5. Etykiety — ustaw tekst i kolory etykiet oraz ich widoczność.
6. Kliknij Zapisz ustawienia.

Krok 4. Wstawienie na stronie

1. Po zapisaniu wróć do listy widoków w DC Products.
2. Skopiuj shortcode z kolumny Shortcode, np. [dc_products id="123"] (liczba to ID Twojego widoku).
3. Wklej shortcode w treść strony, wpisu, bloku HTML lub widgetu obsługującego shortcode (np. Elementor — widget Shortcode).
4. Opublikuj stronę i sprawdź podgląd na froncie sklepu.

Krok 5. Weryfikacja

• Sprawdź widok na desktopie, tablecie i telefonie (liczba kolumn i karuzela reagują na ustawione progi szerokości).
• Przetestuj dodanie produktu prostego do koszyka (AJAX).
• Jeśli sekcja jest pusta — upewnij się, że instancja jest włączona, w sklepie są opublikowane produkty spełniające kryteria (np. promocje), a przy widoku ręcznym wybrano co najmniej jeden produkt.

Kopiowanie i usuwanie widoków

• Kopiuj — tworzy duplikat widoku z tą samą konfiguracją (przydatne przy wariantach na różnych stronach).
• Usuń — trwale usuwa widok; shortcode z jego ID przestanie wyświetlać treść.

Shortcode

Format: [dc_products id="ID_WIDOKU"]

Parametr id jest wymagany. Bez poprawnego ID lub przy wyłączonej instancji shortcode nie wyświetla treści. Widok musi istnieć w systemie jako opublikowany rekord typu wewnętrznego dcpp_view.