Podświetlenie wtyczki Divi: Rozszerzony Divi WooCommerce

Divi WooCommerce Extended to wtyczka innej firmy do Divi, której celem jest bycie jedynym narzędziem, którego będziesz potrzebować do tworzenia witryn eCommerce z Divi. Zawiera pięć modułów z wieloma funkcjami i opcjami. W tym poście przyjrzymy się Divi WooCommerce Extended, aby pomóc Ci zdecydować, czy jest to właściwy produkt do zaprojektowania Twojego sklepu WooCommerce.

Rozszerzone moduły Divi WooCommerce

Divi WooCommerce Extended dodaje 5 modułów do Divi Builder. Moduły mogą być używane razem, niezależnie, na stronach produktów, stronach sklepu i zwykłych stronach.

Dodatki zawarte:

1. Mini wózek
2. Szybki podgląd
3. Karuzela produktów
4. Kategorie
5. Wyszukiwanie Ajax
6. Menedżer kart
7. Menedżer kasy i
8. Rozszerzenie krótkiego kodu biblioteki Divi

Przyjrzymy się bliżej każdemu modułowi z perspektywy naszego pakietu układów perfumeryjnych.

Rozszerzony mini koszyk Divi WooCommerce

Moduł Mini Cart zapewnia wiele opcji wyświetlania ikony koszyka. Jako typ ikony wybierz natywne ikony Divi lub ikonę niestandardową. Ikony natywne obejmują selektor ikon.

Opcja niestandardowa pozwala wybrać ikonę lub obraz z Biblioteki multimediów.

Wózek mini może być wyświetlany jako lista rozwijana, nakładka, poza płótnem lub jako modalna. Opcje wyzwalacza obejmują kliknięcie lub najechanie kursorem. Opcje umieszczania obejmują górę lub dół oraz po prawej lub lewej stronie. Możesz także dodać tytuł i wybrać z listy wyświetlane elementy.

Opcje tekstowe obejmują przycisk widoku koszyka, przycisk kasy i pusty tekst koszyka. Zawiera również osobną opcję dla tła koszyka.

Ustawienia projektowe

Ustawienia projektu pozwalają dostosować kolor ikony, rozmiar, wysokość linii, cień tekstu, czcionki itp. Zawiera opcje dla całego tekstu, w tym liczbę produktów, tytuł mini koszyka, nazwę produktu, ilość i cenę, sumę częściową. Zawiera również ustawienia przycisku widoku koszyka, przycisku kasy, pustego koszyka, rozmiaru koszyka i standardowych ustawień. W tym przykładzie zmieniłem kolor i rozmiar ikony oraz dodałem cień tekstu. Opcje tekstu nie są wyświetlane w programie Visual Builder, więc musisz je zobaczyć w interfejsie użytkownika.

Przykłady mini koszyków

Ten przykład pokazuje listę rozwijaną. Dodałem moduł produktów DWE i dodałem kilka produktów do mojego koszyka. Liczba produktów w koszyku pojawia się nad ikoną koszyka. Kiedy klikam koszyk, otwiera się menu z zawartością mojego koszyka. Wszystkie elementy mogą być stylizowane. Zmieniłem kolor i rozmiar koszyka, dodałem cień, zmieniłem czcionkę i zwiększyłem rozmiar czcionek. Stylizowałem również przyciski, aby pasowały do ​​przycisków w pakiecie układu.

Ten przykład pokazuje nakładkę. Możesz umieścić go w dowolnym z czterech rogów ekranu.

Ten przykład pokazuje Off Canvas. Ekran jest przesunięty na bok, ponieważ zawartość jest zablokowana na swoim miejscu. Kliknięcie w dowolnym miejscu na ekranie zamyka okno. Może być umieszczony z prawej lub lewej strony ekranu.

Ten przykład pokazuje modalny. Wyświetla zawartość koszyka na ekranie i zawiera korekty, aby pokazać przycisk zamykania, pozycję przycisku zamykania, wybór zamykania lub esc oraz zamykanie po kliknięciu w tle.

Divi WooCommerce Rozszerzone wyszukiwanie produktów Ajax

Divi WooCommerce Extended Product Ajax Search dodaje w pełni konfigurowalne wyszukiwanie produktów. Dostosowania konfiguracji obejmują symbol zastępczy pola wyszukiwania, liczbę wyników wyszukiwania, kolejność i kolejność oraz tekst braku wyników.

Obszar wyszukiwania

W obszarze wyszukiwania możesz wybrać, gdzie moduł przeprowadzi wyszukiwanie. Możesz użyć tych ustawień, aby wyszukiwanie było tak szerokie lub wąskie, jak chcesz.

Wyświetlacz

Opcje wyświetlania pozwalają wybrać, co ma być wyświetlane. Możesz wyświetlić ikonę wyszukiwania, wybrać pola, wybrać liczbę kolumn i wybrać odstępy między kolumnami. Możesz także pokazać lub ukryć pasek przewijania.

Tło

Zawiera wiele opcji tła, które obejmują tło pola wyników wyszukiwania, tło elementu wyników wyszukiwania i zwykłe ustawienia tła.

Ustawienia projektowe

Ustawienia projektu obejmują wszystkie dostosowania czcionek, obramowania, tła itp. Dostosuj pola, ikonę wyszukiwania, program ładujący i inne. W tym przykładzie zmieniłem czcionki i nadałem styl ikonie wyszukiwania. Zaokrągliłem też rogi i zmieniłem kolory.

Przykłady wyszukiwania produktów Ajax

Oto jak wyglądają wyniki wyszukiwania z domyślnymi ustawieniami 1 kolumny przy użyciu moich ustawień projektu z powyższego przykładu.

Ten przykład pokazuje 2 kolumny.

Rozszerzone produkty Divi WooCommerce

Divi WooCommerce Extended Products wyświetla produkty WooCommerce jako karty w siatce. Jest w pełni regulowany za pomocą kilku typów widoków i układów. W tym przykładzie zastosowano domyślny typ widoku i układ 1. Możesz wybrać liczbę produktów do wyświetlenia, dodać numer przesunięcia w przypadku, gdy produkt jest już wyświetlany w innym module i ustawić opcje zamówienia.

W przypadku typu widoku wybierz opcję domyślną lub wybierz, aby wyświetlić polecane produkty, produkty wyprzedażowe, najlepiej sprzedające się lub najwyżej oceniane produkty.

Zawiera 3 opcje układu. Umieszczają elementy w różnych miejscach na kartach. Układ 1 umieszcza cenę nad przyciskiem dodawania do koszyka. W tym przykładzie pokazano układ 2, w którym umieszcza się je obok siebie.

Układ 3 umieszcza przycisk dodawania do koszyka nad tytułem.

Możesz pokazać lub ukryć produkty, których nie ma w magazynie. Jeśli je ukryjesz, możesz oznaczyć je jako niedostępne, jeśli chcesz, lub dodać dowolną etykietę, której chcesz użyć. Możesz także wybrać kategorie i tagi do uwzględnienia oraz wybrać relację taksonomii dla jakiejś kontroli logicznej.

Wyświetlacz

Opcje wyświetlania umożliwiają wybór liczby kolumn, odstępu między kolumnami, pokazanie muru, wyświetlenie listy rozwijanej sortowania, wyświetlenie łącza szybkiego podglądu, dodanie tekstu i ikony szybkiego podglądu, wybranie elementów do wyświetlenia, dodanie efektów powiększenia, wybór rozmiar miniatur i wiele więcej. Możesz włączyć każdy z elementów indywidualnie, aby wyłączyć obrazy, odznakę sprzedaży itp. Zmieniłem ten przykład na 2 kolumny, stylizowałem etykietę Sprzedaż i dostosowałem przycisk.

Paginacja

Paginacja dodaje numery stron. Możesz także włączyć poprzednie i następne linki oraz dodać tekst, który chcesz, aby były wyświetlane.

Tło produktu

Ustawienia tła produktu kontrolują tło obszaru tekstowego karty.

Ustawienia projektowe

Ustawienia projektu pozwalają dostosować każdy element niezależnie. Masz pełną kontrolę nad rozmiarami, kolorami, czcionkami, tłem, obramowaniem itp. W tym przykładzie dostosowałem wiele ustawień.

Karuzela produktów rozszerzonych Divi WooCommerce

Divi WooCommerce Extended Products Carousel prezentuje produkty WooCommerce w suwaku. Zawiera te same ustawienia co Moduł Produktów WCE i dodaje ustawienia dla karuzeli. Możesz wybrać typ produktu, układ, numer do wyświetlenia, kolejność sortowania, ukryć produkty niedostępne, wybrać kategorie itp.

Wyświetlacz

Wszystkie opcje wyświetlania są również takie same. Pokaż przycisk szybkiego podglądu, wybierz elementy do pokazania lub ukrycia, dodaj tekst i pokaż plakietkę sprzedaży.

Suwak

Nie obejmuje stronicowania. Zamiast tego ma opcje suwaka. Wybierz efekt slajdu między slajdem, sześcianem, okładką i przerzucaniem. Każda z opcji ma inne ustawienia. Wybierz liczbę produktów do wyświetlenia na slajdzie, dostosuj odstęp między slajdami, wyrównaj wysokości, włącz pętlę, włącz autoodtwarzanie, dostosuj prędkość itp. Ten przykład pokazuje Coverflow.

Suwak zawiera również standardowe typy nawigacji. Możesz je pokazać lub wyłączyć. Możesz także wybrać strzałki z listy ikon, pokazać je tylko po najechaniu kursorem i wybrać ich pozycję z 8 opcji. Pokazuje domyślną opcję wewnątrz suwaka. Ten przykład pokazuje strzałki w ich domyślnej pozycji.

Ten przykład pokazuje strzałki w górnej środkowej części.

Zawiera również paginację punktową z 6 stylami do wyboru. Ten przykład pokazuje Solid Dot.

Ten przykład pokazuje zaokrągloną linię.

Posiada również opcję o nazwie Dynamic Dots. Zmienia to rozmiary kropek, aby pokazać, że te znajdujące się najbliżej bieżącego slajdu są większe niż te, które są dalej.

Ustawienia projektowe

Ustawienia Projektu zawierają opcje dla każdego elementu suwaka. W tym przykładzie dostosowałem kolory czcionek, kolory tła, obramowania, strzałki i kropki.

Divi WooCommerce Rozszerzone kategorie produktów

Divi WooCommerce Extended Products Categories tworzy karty reprezentujące każdą z kategorii w Twoim sklepie WooCommerce. Zawiera 2 układy i możesz wybrać kategorie, które chcesz wyświetlić. To jest układ 1. Umieszcza tytuł i liczbę elementów w tej kategorii pod wyróżnionym obrazem kategorii.

To jest układ 2. Umieszcza tytuł i liczbę elementów nad obrazem i wyświetla kartę jako zarysowany kwadrat.

Wyświetlacz

Opcje wyświetlania obejmują liczbę kolumn, odstępy między kolumnami, mur, miniaturę, efekt powiększenia, rozmiar miniatury i liczbę produktów.

Tło

Ustawienia tła umieszczają kolor tła za tytułem i liczbą produktów.

Oto jak wygląda tło w układzie 2.

Ustawienia projektowe

Ustawienia projektu zawierają opcje dla wszystkich elementów. W tym przykładzie dostosowałem kolory, rozmiary, wagi i odstępy tekstu, aby pasowały do ​​stylów, których użyliśmy w szablonie strony oraz w pakiecie układów perfumeryjnych.

Gdzie kupić Divi WooCommerce Extended

Divi WooCommerce Extended jest dostępny w Divi Marketplace za 59 USD. Obejmuje nieograniczone użytkowanie, 1 rok wsparcia i aktualizacji oraz 20-dniową gwarancję zwrotu pieniędzy.

Końcowe myśli

Oto nasze krótkie spojrzenie na Divi WooCommerce Extended. Te pięć modułów dodaje wiele funkcji do Divi do tworzenia stron sklepu dla produktów WooCommerce. Dotknąłem tylko głównych funkcji i łatwo zauważyć, jak potężny jest. Jeśli chcesz dodać nowe funkcje do swojego sklepu WooCommerce, warto zajrzeć do Divi WooCommerce Extended.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś Divi WooCommerce Extended? Daj nam znać, co o tym myślisz w komentarzach.