Jak dostosować stronę koszyka WooCommerce za pomocą Elementor

Szukasz różnych sposobów na dostosowanie strony koszyka WooCommerce? Elementor jest jednym z najlepszych narzędzi do dostosowywania WooCommerce. Możesz łatwo skonfigurować i stworzyć niestandardowy projekt strony koszyka dla swojego Elementora w mgnieniu oka. Dlatego przedstawiliśmy Ci nasz przewodnik Jak dostosować stronę koszyka WooCommerce za pomocą Elementora.

Ale najpierw przyjrzyjmy się, dlaczego warto rozważyć użycie Elementora do dostosowania strony koszyka.

Po co dostosowywać stronę koszyka za pomocą Elementora?

Dostosowanie strony koszyka WooCommerce jest kluczowym elementem poprawy współczynników konwersji. Interfejs strony koszyka może w ogromnym stopniu określić, czy Twój klient przejdzie do kasy, czy nie. Obejmuje to dodawanie opcji wyświetlania szczegółów koszyka, zwiększania/zmniejszania kwoty, dodawania szczegółowych miniatur elementów koszyka i tak dalej.

I chociaż istnieje wiele sposobów na dostosowanie strony koszyka, na przykład za pomocą wtyczek do koszyka lub programowo, użycie narzędzia do tworzenia stron może być jednym z najlepszych sposobów na zrobienie tego.

Elementor to jeden z najpopularniejszych kreatorów stron WordPress z pełną integracją z WooCommerce. Możesz łatwo dostosować dowolną stronę WooCommerce w mgnieniu oka dzięki mnóstwu ładnych projektów, głęboko dostosowanych widżetów, modułów i wielu innych.

Co więcej, możesz użyć Elementora, aby łatwo skonfigurować swoje strony WooCommerce i użyć dedykowanych szablonów i modułów, aby skonfigurować je w mgnieniu oka. Każdy moduł i element można skonfigurować zgodnie z potrzebami Twojej witryny. Mogą być wykonane ręcznie dla wszystkiego, co chcesz dodać do stron koszyka WooCommerce.

Zanim zaczniemy:

Zanim zaczniemy z naszym samouczkiem, chcielibyśmy zauważyć, że będziesz potrzebować zarówno Elementora , jak i Elementora Pro , aby postępować zgodnie z naszym samouczkiem.

Chociaż możliwe jest zarządzanie i konfigurowanie stron WooCommerce za pomocą bezpłatnej wersji Elementora, procedura jest znacznie trudniejsza z ograniczonymi funkcjami. Nie możesz skorzystać z opcji korzystania z dedykowanych szablonów i projektów, które są sporym dobrodziejstwem, jeśli chodzi o dostosowywanie stron koszyka w darmowej wersji. Dlatego zalecamy rozważenie zakupu Elementor Pro, biorąc pod uwagę wszystkie dostosowania WordPress, które możesz z niego uzyskać.

Za 49 USD rocznie możesz cieszyć się takimi funkcjami jak:

• Pełne możliwości dostosowywania, od podstaw lub przy użyciu szablonów i od podstaw.
• Pełna integracja i opcje tworzenia i dostosowywania wszystkich stron WooCommerce, takich jak strona sklepu, strony produktów, archiwa sklepów, strona koszyka i inne.
• Ponad 50 widżetów Pro z opcjami dla określonych widżetów WooCommerce.
• Ponad 10 szczegółowych zestawów stron internetowych z ponad 300 szablonami, które możesz konfigurować i konfigurować w podróży.
• Przyjazny dla początkujących kreator typu „przeciągnij i upuść” z niesamowitymi opcjami dostosowywania każdego elementu Twojej witryny.
• Niesamowita obsługa dodatków i rozszerzeń.

Możesz także wybierać spośród wielu planów w zależności od potrzeb. Każdy plan obejmuje również 30-dniowy okres gwarancji zwrotu pieniędzy, który jest idealny na wypadek, gdybyś nie był zadowolony z korzystania z wtyczki.

Podobnie, upewnij się, że poprawnie skonfigurowałeś WooCommerce i użyłeś jednego z kompatybilnych motywów WooCommerce. Dzięki temu nie będziesz mieć żadnych konfliktów podczas dostosowywania strony koszyka.

Teraz, gdy wyjaśniliśmy, dlaczego powinieneś rozważyć użycie Elementu do dostosowania strony koszyka WooCommerce, przyjrzyjmy się, jak możesz to zrobić.

Jak dostosować stronę koszyka WooCommerce za pomocą Elementora?

Po zainstalowaniu i aktywacji Elementor Pro w swojej witrynie utwórz nową stronę w panelu WordPress, klikając Strony > Dodaj nowy . Nadaj swojej nowej niestandardowej stronie nazwę i kliknij przycisk Edytuj za pomocą Elementora .

Spowoduje to przejście do kreatora stron Elementor, w którym możesz teraz dodawać zawartość do niestandardowej strony koszyka. Przejdźmy dalej i dodajmy kilka podstawowych elementów WooCommerce, aby wypełnić Twój koszyk.

Zacznij od przewinięcia w dół menu widżetów po lewej stronie i kliknięcia opcji rozwijanej WooCommerce . Kliknij widżet Koszyk i przeciągnij go do sekcji Dodaj widżet tutaj w kreatorze.

Następnie skonfiguruj widżet koszyka za pomocą opcji Edytuj widżet po lewej stronie. Możesz użyć karty Treść , aby skonfigurować różne elementy, takie jak:

• Układ kolumn (Wyewidencjonowanie w jednej kolumnie/dwóch kolumnach.)
• Zaktualizuj tekst koszyka.
• Zastosuj tekst kuponu.
• Całkowite dostosowanie koszyka.
• Opcje automatycznej aktualizacji koszyka.

Oczywiście możesz również skonfigurować styl, czcionkę, kolory i inne elementy dla wszystkich tych pól i elementów za pomocą karty Stylizacja .

Podobnie karta Zaawansowane pozwala skonfigurować wszystkie niestandardowe animacje, tła, efekty ruchu i nie tylko.

Jeśli chcesz skonfigurować kilka opcji stylizacji, kliknij kartę Styl . W tym samouczku podaliśmy cienie pól sekcji. Kliknij Sekcje , a następnie przycisk edycji na Box Shadow . Następnie kliknij opcję Kolor, aby nadać swojemu cieniowi niestandardowy kolor.

Teraz nadaj swojemu koszykowi obramowanie, korzystając z opcji Typ obramowania. W naszym demo ustawiliśmy to na Solid. Oczywiście możesz dostosować zarówno obramowanie, jak i cień pudełka, korzystając z dodatkowych opcji.

Podobnie, jeśli dostosujesz dodatkowe elementy, takie jak Podsumowanie zamówienia, przycisk Kasa i Sumy, powinieneś otrzymać taki koszyk:

Na razie zatrzymamy ten wózek. Ale zawsze możesz wrócić i w razie potrzeby jeszcze bardziej dostosować stronę koszyka.

Następnie do strony koszyka można dodać jeszcze kilka elementów. Możesz je dodać za pomocą paska widżetów po lewej stronie, korzystając z tej samej metody, co powyżej.

Przejdźmy dalej i dodajmy tekst wyłączenia odpowiedzialności, wideo i formularz kontaktowy. Wszystko to są świetne elementy, które można dodać, aby pomóc klientom w zapytaniach i informacjach dotyczących uwag do zamówienia, wysyłki i nie tylko.

Gdy skończysz, możesz opublikować tę niestandardową stronę i zakończyć edycję. Sugerujemy jednak dodanie tego jako niestandardowego szablonu do przyszłego dostosowywania, jeśli chcesz. Wystarczy kliknąć przycisk strzałki obok przycisku Opublikuj na dole i kliknąć Zapisz jako szablon. Następnie podaj nazwę niestandardowego szablonu koszyka i kliknij Zapisz.

Na koniec możesz zakończyć dostosowywanie niestandardowej strony koszyka, klikając Opublikuj.

Ustawianie spersonalizowanej strony koszyka jako strony koszyka WooCommerce

Powyższy proces po prostu tworzy spersonalizowaną stronę koszyka WooCommerce.

Po utworzeniu dostosowanej strony koszyka WooCommerce w Elementorze, musisz zdefiniować tę nową stronę jako stronę koszyka, której WooCommerce musi używać. Możesz to zrobić, otwierając ustawienia WooCommerce, klikając WooCommerce > Ustawienia z pulpitu WordPress. Następnie kliknij kartę Zaawansowane , aby uzyskać dostęp do opcji ustawień strony .

W opcji strony koszyka przejdź dalej i wyszukaj nazwę strony, którą właśnie utworzyłeś. Dla nas będzie to Demo Cart Page. Kliknij swoją dostosowaną stronę koszyka, przewiń w dół i kliknij Zapisz zmiany.

Spowoduje to zapisanie nowo dostosowanej strony jako domyślnej strony koszyka WooCommerce.

Używanie szablonów WooCommerce do dostosowywania strony koszyka WooCommerce w Elementorze:

Widać wyraźnie, że powyższe kroki to tylko podstawy tworzenia niestandardowej strony koszyka WooCommerce. Oczywiście dostosowanie strony koszyka WooCommerce za pomocą Elementora wymaga wiele pracy. Ale możesz również całkowicie swobodnie korzystać z prostego projektu strony koszyka z nieco większą stylizacją i dostosowywaniem, ale dla maksymalnych korzyści.

Jeśli to podejście bardziej odpowiada Twoim potrzebom, zalecamy korzystanie z szablonów Elementor . Są one wykonane z mnóstwa opcji szablonów i wtyczek szablonów dostępnych dla Elementora.

Aby skonfigurować naszą stronę koszyka WooCommerce, użyjemy również bezpłatnego dodatku do Elementora , który jest dostarczany z dedykowanymi szablonami strony koszyka dla naszego demo. Chociaż dostępnych jest mnóstwo dodatków do Elementora i wtyczek szablonów, w tym demo będziemy używać CoDesigner . Jest to jeden z najłatwiejszych i bezproblemowych sposobów na przygotowanie perfekcyjnie przygotowanej strony koszyka dla Twojej witryny.

Zacznijmy więc od zainstalowania wtyczki.

Zainstaluj wtyczkę CoDesigner:

Otwórz pulpit nawigacyjny administratora WordPress i przejdź do Wtyczki > Dodaj nowy. Następnie użyj paska wyszukiwania w prawym górnym rogu, aby wyszukać „ CoDesigner ” i kliknij przycisk Zainstaluj teraz , aby go zainstalować.

Po zakończeniu instalacji kliknij Aktywuj , aby zakończyć proces instalacji i aktywacji.

Włączanie widżetów koszyka CoDesigner:

Zanim dodasz widżet CoDesigner do strony koszyka, musisz włączyć widżet na pulpicie nawigacyjnym CoDesigner .

Otwórz więc CoDesigner na swoim panelu administracyjnym WP. Otworzy się pulpit nawigacyjny CodDesigner. Następnie kliknij Widżety.

Następnie przewiń w dół sekcje Koszyk i włącz wszystkie widżety pod nimi. Zostaną one dodane bezpośrednio do menu widżetów Elementor. Teraz możesz dodać swój niestandardowy widżet CoDesigner bezpośrednio do strony koszyka.

Na koniec kliknij Zapisz ustawienia , aby włączyć widżety.

Korzystanie z widżetów i szablonów koszyka CoDesigner:

Proces tworzenia i dostosowywania strony koszyka WooCommerce w Elementorze przy użyciu Codesigner jest identyczny z powyższym procesem przy użyciu Elementora.

Po prostu utwórz nową stronę, klikając Strony > Dodaj nową i nazwij ją. Następnie kliknij edytuj za pomocą Elementora jak powyżej.

Po otwarciu nowej strony w kreatorze stron Elementor możesz dodać szablony CoDesigner. Wystarczy kliknąć ikonę CoDesigner w sekcji Drag Widgets here .

Następnie w zakładce Bloki użyj menu rozwijanego kategorii i wybierz Koszyk . Użyj odpowiedniego projektu, który jest idealny dla Twojej witryny i kliknij Wstaw.

Jeśli Twoje widżety CoDesigner zostały aktywowane, szablon strony koszyka powinien wyświetlać się idealnie. Oczywiście jest to nadal tylko szablon, więc musisz ręcznie dostosować tekst i inne elementy.

Zacznijmy od zastąpienia tekstu nagłówka . Kliknij widżet Nagłówek i użyj menu dostosowywania po lewej stronie, aby dodać własny tekst.

Podobnie zrób to samo dla pól tekstowych poniżej.

Możesz także kliknąć każdy widżet koszyka i dostosować dodatkowe opcje , takie jak miniatura, opcje sum częściowych pozycji i pola ilości.

Podobnie jak w przypadku wspomnianych wcześniej kroków, możesz również stylizować i edytować wszystkie pola i widżety oraz dostosowywać kolory, typografię, dopełnienie i tak dalej. Po prostu kliknij dowolny widżet i skorzystaj z zakładki Stylizacja i Zaawansowane . To takie proste!

Gdy skończysz, kliknij przycisk Opublikuj , aby zapisać niestandardową stronę koszyka lub zapisać ją jako szablon w taki sam sposób, jak wspomniano wcześniej.

Ponownie przejdź do WooCommerce > Ustawienia > Zaawansowane i wybierz stronę nowego koszyka w polu Strona koszyka . Następnie kliknij Zapisz zmiany , aby zakończyć.

Teraz powinieneś zobaczyć swoją nową stronę koszyka na swoim interfejsie

Wniosek:

I to kończy nasz przewodnik Jak dostosować stronę koszyka WooCommerce za pomocą Elemento r. Elementor to jeden z najpotężniejszych narzędzi do tworzenia witryn internetowych dostępnych do dostosowywania witryn WooCommerce i WordPress. Niezależnie od tego, czy korzystasz z widżetów i szablonów dodatków, masz do dyspozycji mnóstwo narzędzi, które pozwolą Ci dostosować każdy zakamarek swojej witryny.

Oto kilka świetnych wskazówek dotyczących dostosowywania strony koszyka WooCommerce w Elementorze:

• Upewnij się, że Twoja dostosowana strona koszyka jest w pełni użyteczna zarówno na urządzeniach mobilnych, jak i stacjonarnych, korzystając z opcji responsywnej.
• Użyj opcji stylizacji kolorów i typografii Elementora, aby upewnić się, że strona koszyka pasuje do reszty projektu motywu.
• To świetny pomysł, aby dostosować stronę koszyka i stronę kasy, aby pasowały do ​​siebie.
• Uwzględnij dodatkowe elementy, takie jak powiązane produkty , polecane produkty , odznaki zaufania itp. na stronie koszyka.

Czy udało Ci się dowiedzieć, jak dostosować stronę koszyka? Masz problem z konfiguracją dodatków lub szablonów? Daj nam znać w komentarzach, w jaki sposób udało Ci się lub nie udało Ci się dostosować strony koszyka. Uwielbiamy pomagać naszym czytelnikom w ich problemach i słuchać ich opinii na temat dostosowań WordPress i WooCommerce.

Jeśli szukasz innych przewodników dostosowujących różne inne strony WooCommerce za pomocą Elementora, sprawdź niektóre z naszych innych artykułów tutaj:

• Jak dostosować stronę produktu WooCommerce za pomocą Elementora
• Tworzenie Mega menu za pomocą Elementora za pomocą wtyczki Nav Menu
• Jak dostosować stronę sklepu WooCommerce w Elementorze