Wszystko, co musisz wiedzieć o modułach produktów WooCommerce Divi 5

Kompatybilność z WooCommerce została teraz rozszerzona do Divi 5, co daje pełną kontrolę nad stronami produktów bez polegania na wbudowanych szablonach WooCommerce. Nowo zintegrowane moduły produktów WooCommerce pozwalają projektować angażujące, przyjazne dla użytkownika układy pasujące do Twojej marki i pomagają zwiększyć sprzedaż, jednocześnie wykorzystując wszystkie funkcje Divi 5, w tym FlexBox, aby budować strony produktów z nowoczesną kontrolą układu.

W tym poście omówimy kluczowe funkcje modułów i pokażemy, jak używać ich na następną stronę internetową eCommerce Divi 5. Zanurzmy się w środku.

Co to są moduły produktów WooCommerce?

Moduły produktów WOO to wyspecjalizowane elementy treści w obrębie Divi 5, zaprojektowane do dostosowywania stron produktów i kategorii dla sklepów zasilanych WOO. Moduły te zastępują szablony WOOCOMPERCE, które są standardowe z wtyczką, umożliwiając tworzenie konfigurowalnych układów. W przeciwieństwie do tych tradycyjnych szablonów, moduły Divi 5 pozwalają na swobodę twórczą przy jednoczesnym zachowaniu kompatybilności z podstawową funkcją WooCommerce.

Wydanie 17 modułów WooCommerce w Divi 5 oznacza znaczący kamień milowy. Te moduły, które obejmują wszystkie aspekty projektowania strony i kategorii, nie są już w trybie Legacy, co oznacza, że ​​wszystkie są w pełni zoptymalizowane pod kątem nowoczesnej architektury Divi 5. Dzięki temu przejściu do bardziej wydajnego fundamentu Divi 5 działa lepiej, jest bardziej skalowalna i jest kompatybilna z przyszłością WordPress.

Pozostałe 8 modułów WOO, skupione na stronach wózka i kasy, wkrótce się pojawi.

Kluczowe cechy modułów produktów WooCommerce Divi 5

Przejdźmy do kluczowych funkcji, których możesz się spodziewać teraz, gdy moduły produktów WooCommerce zostały zintegrowane z Divi 5.

Kompleksowy zestaw modułów

Pierwsza partia modułów produktów WooCommerce Divi 5 zawiera narzędzia zaprojektowane do obsługi określonego aspektu projektowania strony i kategorii. Te moduły to:

• Breat Crumps Woo: Wyświetla nawigacyjne szlaki bułki, aby pomóc użytkownikom w łatwym poruszaniu się po sklepie.
• UWAGA WOO: Pokazuje komunikaty systemowe, takie jak aktualizacje CART, błędy lub potwierdzenia.
• Woo Product Dodaj do koszyka: renderuje przycisk Dodaj do koszyka z opcjonalnymi elementami sterowania ilością.
• Woo Opis produktu: Wyświetla główny opis produktu długoterminowego.
• Galeria produktów WOO: Wyświetla dodatkowe obrazy produktów w formatach siatki lub suwaków.
• Obrazy produktu WOO: pokazuje główny obraz produktu lub galerię obrazów.
• Informacje o produkcie WOO: Wyświetla szczegóły produktu, takie jak waga, wymiary lub atrybuty.
• Woo Product Meta: pokazuje SKU produktu, kategorie i tagi.
• Cena produktu WOO: wyświetla cenę produktu, w tym ceny sprzedaży.
• WOO Ocena produktu: pokazuje średnią ocenę gwiazd i liczbę recenzji.
• Recenzje produktów WOO: umożliwia klientom przeglądanie i przesyłanie recenzji produktów.
• Woo Product Acast: Wskazuje dostępność produktu i poziomy zapasów.
• Zakładki produktów WOO: Wyświetla domyślne karty produktów dla opisu, dodatkowe informacje i recenzje.
• WOO Tytuł produktu: Wyświetla nazwę produktu jako konfigurowalne nagłówek.
• WOO Produkt Upsell: Promuje produkty Upsell, aby zachęcić do zakupów o wyższej wartości.
• Produkty WOO: Tworzy konfigurowalne siatki produktów dla stron kategorii.
• Produkty związane z WOO: Wyświetla powiązane produkty na podstawie kategorii lub tagów.

Razem te moduły zapewniają wszystko, czego potrzebujesz do budowania stron produktów i kategorii, od bułki nawigacyjnej po dynamiczne wyświetlacze produktów.

Wolność twórcza

Divi 5's WooCommerce Product module bezpłatnie użytkownicy z ograniczeń standardowych szablonów WOOCOMPERCE. Dzięki tym modułom możesz w pełni kontrolować układ, strukturę i projekt swoich stron, tworząc unikalne doświadczenia.

Moduły obsługują dynamiczną treść, co oznacza, że ​​pobierają dane produktu bezpośrednio z WooCommerce, zapewniając aktualizacje w czasie rzeczywistym dla cen, poziomów akcji i opisów. Umożliwia to budowanie stron, które napędzają zaangażowanie i konwersje bez wymagania wtyczek innych firm lub niestandardowego kodu.

Opcje dostosowywania

Każdy moduł ma obszerne ustawienia projektowe, wszystkie możliwe do zarządzania w ramach budowniczego wizualnego. Możesz dostosowywać elementy takie jak galerie produktów, odznaki sprzedaży, przyciski i inne z opcjami typografii, kolorów, odstępów i animacji.

Na przykład możesz dostosować układ modułu Galerii produktów WOO do wyświetlania obrazów na suwak lub siatce, stylizować produkt WOO Dodaj do przycisku wózka za pomocą niestandardowych kolorów i efektów zawisowych lub ulepszyć moduł oceny produktu WOO, aby idealnie wyrównać oceny gwiazdy z projektem.

Te ustawienia pozwalają z łatwością tworzyć spójne, markowe strony sklepowe.

Dynamiczne szablony z konstruktorem motywów

Divi 5's Builder umożliwia przyjęcie pełnego potencjału modułów produktów WooCommerce, umożliwiając tworzenie globalnych szablonów dla stron produktów i kategorii. Dzięki konstruktorowi motywów możesz zaprojektować pojedynczy szablon, który dotyczy wszystkich produktów i kategorii w Twoim sklepie, zapewniając spójny, spójny wygląd.

Builder pętli dla dynamicznej zawartości WooCommerce

Builder Loop Divi 5 oferuje alternatywny sposób budowania dynamicznej zawartości WOO. Dzięki Builder Loop możesz zapytać o produkty WooCommerce i projektować elastyczne pętle produktów za pomocą dowolnego elementu Divi, tworząc układy, listy i karuzele, które wykraczają poza stałą strukturę dedykowanych modułów produktów. W przypadku układów pojedynczych produktów użyj modułów produktów WOO; Do kolekcji produktów i archiwów użyj Builder Loop.

Jak używać modułów produktów WooCommerce Divi 5

Ta sekcja poprowadzi Cię przez tworzenie strony produktu w Builder Motyw Divi 5 za pomocą nowych modułów produktów WooCommerce.

Utwórz nowy szablon konstruktora motywów

Przejdź do Divi> Builder motywów na pulpicie pulpitu WordPress. Kliknij + Dodaj nowy szablon .

Kliknij Kliknij Nowy szablon, gdy pojawi się okno dialogowe.

Następnie będziemy musieli przypisać nasz szablon do naszych produktów. W ramach produktów wybierz wszystkie produkty , aby przypisać szablon.

Kliknij Utwórz szablon , aby go przypisać.

Kliknij Dodaj niestandardowe ciało . Pozwoli nam to zbudować korpus naszego szablonu strony produktu.

Wybierz Buduj niestandardowe nadwozie , gdy pojawi się okno dialogowe.

Zbuduj szablon produktu

Po uruchomieniu konstruktora motywów możesz zbudować szablon od zera, wybrać układ Premade lub zbudować z AI. W tym samouczku wybierzemy kompilację od zera .

Kliknij ikonę zieloną +, aby dodać nowy wiersz.

Gdy pojawią się opcje , wybierz dwupolumnowy rząd. Nowe wiersze dodane do dowolnej strony Divi 5 lub szablonu będą domyślnie używać FleBox. System układu FlexBox Divi 5 zapewnia większą kontrolę nad tym, jak wyglądają twoje strony produktu niż kiedykolwiek, w tym zmiana sposobu, w jaki twoje moduły produktu WooCommerce układają się na różnych rozmiarach ekranu.

Przewiń w dół, aby ujawnić opcję modułów produktu WOO . Po kliknięciu będziesz mieć 17 modułów WOO Divi 5 i 8 modułów dziedzictwa (Divi 4).

Dodaj moduł obrazów WOO Product

Znajdź i wybierz moduł Woo Product Images i dodaj go do pierwszej kolumny.

Ten post jest domyślnie wybierany w polu produktu na karcie Content . Jeśli chcesz zbudować szablon za pomocą istniejącego produktu, wybierz go z menu rozwijanego. To świetny sposób na wyświetlenie podglądu, jak będzie wyglądać twój szablon podczas jego tworzenia. Pamiętaj, aby zamienić go z powrotem na ten post przed ostatecznym zapisem.

Rozwiń menu rozwijane elementy , aby ujawnić ustawienia. Tutaj możesz kontrolować, które obrazy wyświetlają w module, w tym wyświetlony obraz, obrazy galerii i odznakę sprzedaży.

Kliknij menu rozwijane obrazu na karcie Projekt , aby ujawnić ustawienia. Tutaj możesz zmusić obraz do zajęcia całej dostępnej przestrzeni (Force FullWidth), dodać obramowanie, pudełko cień, dostosować odstępy lub dodać filtry.

Możesz także stylizować odznakę sprzedaży , przypisując kolor tła, tekst, granice i wiele innych.

Dodaj moduł tytułu produktu WOO

W drugiej kolumnie kliknij moduły produktu WOO i przewiń, aby wybrać moduł WOO Product Title .

Użyj menu rozwijanego w polu Product Content , aby wybrać produkt i podgląd, jak będzie wyglądał w szablonie.

Następnie przejdź do zakładki projektowej modułu i rozwinąć menu rozwijane tytułu . Tutaj możesz przypisać czcionkę i stylizować nagłówek, jak chcesz.

Dodaj moduł ceny produktu WOO

Pod tytułem produktu kliknij, aby dodać nowy moduł. Wybierz moduły produktu WOO i przewiń, aby wybrać moduł ceny produktu WOO .

Na karcie Design możesz stylizować każdy aspekt ceny produktu, w tym tekst, tekst sprzedaży, nowy tekst ceny i wiele innych.

Dodaj moduł oceny produktu WOO

Następnie dodamy moduł oceny produktu WOO w module cen WOO.

Na karcie zawartości pod elementami możesz wyświetlić lub ukryć ocenę gwiazd i recenzje klientów.

Na karcie Design menu rozwijane układu umożliwia wyświetlenie oceny gwiazd. Elementy mogą być wyświetlane w linii lub ułożone.

Inne opcje stylizacji obejmują przypisanie koloru, rozmiaru tekstu i odstępów literowych dla gwiazd i opcji stylizacji tekstu ocen.

Dodaj moduł opisu produktu WOO

Pod modułem WOO Star Ocena kliknij, aby dodać nowy moduł WOO. Tym razem wybierzemy moduł opisu produktu WOO . Na karcie zawartości wybierz opis wyświetlania (opis lub krótki opis).

Na karcie Design możesz stylizować opis z opcjami czcionki, wagi, stylu, wyrównania, koloru, rozmiaru i innych.

Dodaj produkt WOO Dodaj do modułu wózka

Następnie dodamy produkt WOO dodaj do modułu wózka . Pozwoli to klientom dodać produkt do swoich wózków i wybrać wszelkie odmiany przypisane do produktu.

Elementy przełączają się na karcie treści pozwalają wyświetlać lub ukryć pole ilości i dostępny zapas. Szybka uwaga: Aby wyświetlić ilość zapasów, należy sprawdzić zarząd zapasów w samym produkcie WOO.

Możesz stylizować etykiety polowe, tekst, menu rozwijane (dla wariantów) i przycisk pasujący do marki na karcie Design .

Kontynuuj dodawanie modułów, takich jak meta moduł produktu WOO do wyświetlania liczb i kategorii SKU.

Możesz także dodać moduł kart WOO Product , aby wyświetlić opis, recenzje i dodatkowe informacje o Twoim produkcie.

Aby uzyskać maksymalny zasięg, możesz wyświetlić serię powiązanych produktów na szablonie produktu, aby zachęcić odwiedzających witrynę do eksploracji dodatkowych produktów w sklepie, zwiększając szansę na konwersję.

Zapisanie szablonu

Po zakończeniu dodawania modułów dokonaj dodatkowych zmian, których potrzebujesz, a następnie zapisz szablon, klikając przycisk Zapisz w prawym górnym rogu konstruktora motywów.

Następnie kliknij przycisk wyjścia , aby powrócić do pulpitu nawigacyjnego.

Wróć do pulpitu nawigacyjnego, kliknij Zapisz zmiany , aby zapisać szablon i zastosuj go do produktów WOO.

Jak widać, tworzenie szablonu produktu za pomocą modułów produktów WOO Divi 5 jest prostym procesem. Nie będziemy omawiać wszystkich modułów w tym samouczku, ale używając ich wszystkich, możesz tworzyć imponujące strony produktów lub kategorii, które utrzymują zaangażowanie odwiedzających.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Co dalej z integracją WooCommerce Divi 5?

Druga partia modułów WooCommerce, koncentrując się na stronach wózka i kasy, zostanie wydana w ciągu najbliższych kilku tygodni, kończąc integrację z WooCommerce. Te dodatki umożliwią użytkownikom pełne dostosowanie całego lejka e -commerce, od przeglądania produktów po kasę. Publiczna wersja beta Divi 5 będzie jeszcze bardziej udoskonalić te funkcje, obejmując informacje zwrotne użytkowników i dodatkowe poprawki błędów w celu zapewnienia stabilności.

Oprócz kompatybilności i integracji WooCommerce, Divi 5 nadal ewoluuje z najnowszymi funkcjami, takimi jak moduł grupy karuzelowej do tworzenia dynamicznych suwaków produktów, moduł Lottie do dodawania lekkich animacji oraz nowy system układu FlexBox do ulepszonej kontroli układu. Dodatki te uzupełniają moduły WOO, oferując jeszcze bardziej kreatywne możliwości witryn e -commerce.

Wypróbuj dziś moduły produktów WOO Divi 5

Moduły produktów WOO Divi 5 pozwalają tworzyć urzekające strony produktu i kategorii z niezrównaną elastycznością i kreatywnością. Moduły oferują połączenie swobody twórczej, dynamicznej integracji treści i wydajności, wszystko w intuicyjnym interfejsie. Od konfigurowalnych galerii produktów po niestandardowe układy za pośrednictwem konstruktora motywów, Divi 5 ułatwia tworzenie stron sklepowych o wysokiej konwersji.

Czy jesteś gotowy zanurzyć się w Divi 5? Pobierz najnowszą publiczną alfa Divi 5, aby zbadać te moduły i zobaczyć, jak mogą one przekształcić twoją stronę WooCommerce. Chcielibyśmy usłyszeć twoje myśli. Udostępnij swoją opinię w komentarzach lub połącz z nami w naszych kanałach mediów społecznościowych.