Jak dodać suwak produktu w WooCommerce za pomocą Elementora (7 układów)

Opublikowany: 2024-10-09

Suwaki produktów to doskonały sposób na zaprezentowanie różnorodnych produktów w atrakcyjny wizualnie i zorganizowany sposób, szczególnie podczas pracy z WooCommerce na WordPress.

Korzystając z Elementora, popularnego narzędzia do tworzenia stron, wraz z dodatkiem Elemento, możesz bez wysiłku dodawać suwaki produktów, które podnoszą jakość zakupów.

W tym przewodniku omówimy, jak dodać suwak produktu z siedmioma różnymi opcjami układu za pomocą dodatku Elementor.

Dlaczego warto dodać slider produktów w WooCommerce?

Spis treści

Dźwignia kolankowa
product slider 5941

Zanim przejdziemy dalej, poświęćmy chwilę na zrozumienie zalet suwaka produktu:

Suwaki podnoszą atrakcyjność wizualną i nadają Twojemu sklepowi profesjonalny wygląd. Odwiedzający mogą szybko przeglądać różne produkty bez konieczności przewijania rozbudowanych list. I wyróżniaj popularne, nowe lub przecenione produkty, aby zwiększyć sprzedaż.

Przeglądaj różnorodne układy suwaków produktów

Elemento Addon oferuje siedem wszechstronnych układów suwaków produktów, które pasują do estetyki Twojego sklepu. Oto spojrzenie na każdy z nich:

1. Zaawansowany suwak

advance Slider

Układ Advanced Slider idealnie nadaje się do prezentowania wysokiej jakości zdjęć produktów z dodatkowymi animacjami. Możesz wyróżnić swoje kluczowe produkty za pomocą przyciągających wzrok efektów wizualnych i nakładek tekstowych.

Cechy :

  • Zapewnia płynne przejścia
  • Konfigurowalny tekst i
  • Przyciski poprowadzą użytkowników bezpośrednio do stron produktów.

Sposób użycia : Idealny do polecanych produktów lub nowych kolekcji.

Demo na żywo: poznaj zaawansowany suwak

2. Zaawansowany slajd produktu

advance product slide

Zaawansowany slajd produktu to prosty i skuteczny układ, który pozwala zaprezentować produkty za pomocą przewijanego w poziomie suwaka. Możesz dodać zdjęcia produktów, tytuły, ceny, a nawet plakietki promocyjne.

Cechy

  • Przewijanie poziome
  • Możliwość dostosowania prędkości
  • Dynamiczne wyświetlanie informacji o produkcie.

Sposób użycia :

  • Idealny do bestsellerów lub ofert ograniczonych czasowo.

Demo na żywo: zapoznaj się z zaawansowanym slajdem produktu

3. Suwak kategorii produktu

product category 1

Suwak kategorii produktów umożliwia prezentowanie kategorii produktów zamiast pojedynczych produktów.

Taki układ doskonale sprawdza się w przypadku sklepów o zróżnicowanej ofercie produktowej, ułatwiając użytkownikom poruszanie się po kategoriach.

Cechy :

  • Zdjęcia kategorii,
  • Tytuły i obsługa opisów.

Sposób użycia :

  • Idealne dla sklepów z wieloma kategoriami produktów.

Demo na żywo: poznaj suwak kategorii produktów

4. Suwak produktu

Product slider 2

Klasyczny suwak produktów oferuje prosty, ale skuteczny sposób prezentowania wielu produktów w formacie poziomego suwaka.

Układ ten jest wysoce konfigurowalny, co pozwala dostosować wszystko, od liczby widocznych produktów po wygląd i działanie suwaka.

Cechy :

  • Wyświetlanie wielu produktów
  • Konfigurowalne kolumny
  • Efekty przejścia.

Sposób użycia :

  • Nadaje się do promowania kolekcji i nowości.

Demo na żywo: poznaj suwak produktu

5. Lista suwaków produktów

Product slider list

Układ Lista suwaków produktów wyświetla produkty w formacie listy na suwaku. Ta opcja jest świetna dla użytkowników, którzy wolą widzieć bardziej szczegółowe informacje o każdym produkcie, zachowując jednocześnie przesuwany interfejs.

Cechy :

  • Widok listy ze szczegółami produktu
  • Płynne przejścia suwakiem.

Sposób użycia :

  • Idealny dla sklepów ze szczegółowymi opisami i specyfikacjami produktów.

Demo na żywo: Przeglądaj listę suwaków produktów

6. Pionowa lista produktów

verticle product list

Pionowa lista produktów dodaje niepowtarzalnego akcentu do ekspozycji produktów. Zamiast tradycyjnego poziomego suwaka, ten układ prezentuje Twoje produkty w formacie przewijania w pionie, dzięki czemu idealnie nadaje się do pasków bocznych lub wąskich sekcji.

Cechy :

  • Przewijanie w pionie
  • Konfigurowalne elementy listy.

Sposób użycia :

  • Najlepiej sprawdza się w przypadku bocznych widżetów lub wąskich przestrzeni na stronie głównej Twojego sklepu.

Demo na żywo: Przeglądaj pionową listę produktów

7. Suwak produktu siatki

grid product

Suwak produktów w siatce jest idealny do wyświetlania produktów w układzie siatki. Ten projekt zapewnia bardziej uporządkowaną i jednolitą prezentację, umożliwiając jednoczesne prezentowanie wielu produktów bez przewijania.

Cechy :

  • Układ siatki z regulowanymi kolumnami
  • łatwa nawigacja
  • Dynamiczne wyświetlanie informacji o produkcie.

Sposób użycia :

  • Doskonale sprawdza się w sklepach posiadających wiele produktów wymagających jednoczesnej ekspozycji.

Demo na żywo: poznaj suwak produktów Grid

Jak dodać suwak produktu w WooCommerce za pomocą dodatku Elementor.

Aby dodać suwak produktu przy użyciu jednego z tych układów, wykonaj następujące kroki:

  • Zainstaluj i aktywuj wymagane wtyczki : Upewnij się, że masz zainstalowane i aktywowane Elementor, WooCommerce i Elemento Addon.
  • Edytuj stronę za pomocą Elementora : Przejdź do strony, na której chcesz dodać suwak produktów i kliknij „Edytuj za pomocą Elementora”.
  • Dodaj widżet suwaka produktu : W edytorze Elementor wyszukaj widżet suwaka produktów Elemento Addon (np. suwak zaawansowany, suwak produktu w siatce itp.) i przeciągnij go do żądanej sekcji strony.
  • Dostosuj suwak : wybierz preferowany układ, wybierz produkty lub kategorie do wyświetlenia i dostosuj ustawienia, takie jak szybkość przejścia, kolumny siatki i elementy projektu.
  • Podgląd i publikacja : po dostosowaniu suwaka do własnych upodobań wyświetl podgląd zmian, aby upewnić się, że wszystko wygląda idealnie, a następnie opublikuj stronę.

Aby uzyskać pomoc dotyczącą aktywacji dodatku Elemento Addon, obejrzyj poniższy film.

Odpowiednie dodatki znajdziesz tutaj.

Często zadawane pytania

P: Czy mogę dostosować projekt suwaka produktu?

Odpowiedź: Tak! Elementor umożliwia szerokie dostosowywanie, w tym dostosowywanie ustawień układu, typografii, kolorów i efektów najechania kursorem, aby dopasować je do marki Twojej witryny.

P: Czy w sliderze można wyświetlić określone kategorie produktów?

Odpowiedź: Tak, wiele widżetów suwaka produktów umożliwia filtrowanie produktów według kategorii, tagów lub atrybutów w ramach ustawień suwaka.

P: Czy mogę dodać animacje do slidera produktu?

Odpowiedź: Tak, Elementor obsługuje różne opcje animacji, które można zastosować do suwaków produktów, aby zapewnić bardziej wciągające wrażenia użytkownika.

Wniosek

Dzięki dodatkowi Elemento dla Elementora możesz bez wysiłku tworzyć wspaniałe suwaki produktów dla swojego sklepu WooCommerce.

Wybieraj spośród szerokiej gamy suwaków produktów o różnorodnych układach i opcjach dostosowywania, aby dopasować je do Twojej marki.

Podnieś jakość zakupów swoich klientów dzięki tym angażującym ekspozycjom.

Jeśli uznasz ten artykuł za pomocny, udostępnij go swoim znajomym. Jeśli masz jakiekolwiek pytania na ten temat, nie wahaj się i zostaw komentarz poniżej. Pomożemy Ci rozwiązać Twój problem. Dziękuję za przeczytanie tego bloga.

Mamy nadzieję, że ten artykuł pomoże Ci znaleźć najlepszy suwak produktów do zaprezentowania Twoich produktów.

Subskrybuj nasz kanał YouTube , zamieszczamy tam również świetne treści, a także śledź nas na Facebooku i Twitterze

Odkryj więcej artykułów:

  • 6 najlepszych dodatków Elementor dla witryn WooCommerce
  • Jak utworzyć stronę koszyka, stronę sklepu, stronę kasy i stronę mojego konta
  • Dodatki Elemento do Elementora poprawiające komfort projektowania witryny internetowej

Tagi: suwak produktu, suwak woo, WooCommerce, WordPress