Jak dostosować stronę koszyka WooCommerce bez kodowania (bezpłatnie)

Dostosowywanie strony koszyka WooCommerce przynosi kilka korzyści, w tym porzucanie strony koszyka, ale wykonanie tego płynnie nie jest bułką z masłem.

Strona koszyka prowadzi do podjęcia ostatecznej decyzji o finalizacji zamówienia lub porzuceniu koszyka. Nie chciałbyś, żeby kupujący porzucili koszyk, prawda? W tym miejscu musisz dostosować stronę koszyka WooCommerce. 

Na tym blogu znajdziesz przewodnik krok po kroku, jak dostosować strony koszyka WooCommerce, również bez żadnego kodowania.

Zacznijmy…

Jak wygląda domyślna strona koszyka WooCommerce

WooCommerce zapewnia bardzo prosty układ strony koszyka. Chociaż różne motywy dodają różne style do strony, nadal wygląda ona tak samo.

Oto typowe elementy projektu strony koszyka WooCommerce (w tym między innymi):

Możesz edytować stronę koszyka WooCommerce i dostosowywać elementy zgodnie ze swoimi potrzebami. Wcześniej przyjrzyjmy się, jak domyślna strona koszyka WooCommerce wygląda w różnych motywach.

Oto jak wygląda projekt strony koszyka WooCommerce w witrynie Motyw WordPress Twenty Twenty:

Oto jak wygląda strona koszyka na stronie Motyw Twenty Twenty One na WordPress:

Nawet popularny motyw Elementora, taki jak Witaj Elementorze da ci bardzo prosty projekt strony koszyka WooCommerce z tym samym starym układem.

Myślę, że zgodzisz się, że wszystkie powyższe strony koszyka mają ten sam układ i nie oferują nic wymyślnego ani nadzwyczajnego

➡️➡️ Sprawdź Jak dodać przełącznik walut do witryny WooCommerce w 5 krokach

Dlaczego warto dostosować stronę koszyka WooCommerce

Według raportu BuildWith z listopada 2023 r. ponad 6,6 miliona działających witryn internetowych korzysta z WoCommerce.

WooCommerce pozwala w mgnieniu oka zbudować gotową do użycia, w pełni funkcjonalną witrynę eCommerce z jej szablonami, w tym stroną koszyka. Wiele z tych witryn korzysta z domyślnych szablonów WooCommerce dla koszyka i innych stron.

Nie chcesz jednak, aby strona koszyka w Twojej witrynie wyglądała podobnie do innych, ponieważ może to zniechęcić kupujących. Aby wyróżnić się z tłumu, na ratunek mogą przyjść zmiany strony koszyka WooCommerce lub dostosowanie koszyka WooCommerce.

Faktem jest również, że ok  70% osób porzuciło koszyka i nigdy nie przystępuj do realizacji transakcji. To pokazuje, jak ważne jest dostosowanie strony koszyka WooCommerce.

Wiadomo, że ludzi przyciągają rzeczy inne i wyróżniające się z tłumu.

Nie pozwól więc, aby Twoja strona koszyka zgubiła się w tłumie, raczej dostosuj ją tak, aby się wyróżniała i pomogła Ci zdobyć więcej zamówień. 

Teraz pytanie brzmi: jak uzyskać wyróżniającą się stronę koszyka? Cóż, istnieją dwa sposoby stworzenia projektu strony koszyka Woocommerce.

1. 1. Edycja plików WooCommerce (wymagana umiejętność kodowania)
2. 2. Użyj wtyczki typu „przeciągnij i upuść”.

Możesz także sprawdzić naszego bloga 👉 Jak dodać przełącznik walut do WooCommerce

Dlaczego edytowanie kodu w celu uzyskania niestandardowej strony koszyka WooCommerce nie jest dobrym pomysłem

Chociaż edycja kodu w celu uzyskania żądanej strony koszyka jest opcją, nie jest to zalecane dla osób niekodujących. Ponieważ do zbudowania swojej witryny internetowej wybrałeś gotową do użycia platformę, taką jak WooCommerce, myślę, że nie chcesz niczego ręcznie kodować.

Oto kilka powodów, dla których początkujący programiści i osoby niekodujące powinny unikać edytowania domyślnego kodu na potrzeby projektowania strony koszyka WooCommerce.

• Wymaga to bycia doświadczonym programistą i znajomości HTML, CSS, JavaScript i PHP jak profesjonalista.
• Jeśli kod nie będzie odpowiednio edytowany i optymalizowany, może to spowolnić działanie Twojej witryny.
• Będziesz musiał zmienić kod za każdym razem, gdy chcesz zmienić motyw WooCommerce
• Kiedy WooCommerce pojawi się z nową aktualizacją, będziesz musiał wprowadzić nowe zmiany, aby kod był kompatybilny z nową wersją WooCommerce
• Możesz także stracić cały swój kod podczas aktualizacji WooCommerce, jeśli nie utworzysz motywu podrzędnego.

Poza tym, jeśli używasz platform takich jak WordPress i WooCommerce przede wszystkim unikaj kodowania, więc po co uczyć się kodowania tylko po to, aby edytować stronę koszyka, prawda?

Bez obaw. Mam inny proces, którego możesz użyć do płynnego zaprojektowania strony koszyka bez konieczności kodowania. Ani jednej linijki. Obietnica!

Zobaczmy, jak edytować stronę koszyka WooCommerce bez znajomości kodowania!

Jak dostosować stronę koszyka WooCommerce za pomocą wtyczki „przeciągnij i upuść”.

Teraz możesz zaprojektować stronę koszyka za pomocą łatwej technologii „przeciągnij i upuść”. Dzięki wtyczce WooCommerce PageBuilder Kup silnik.

ShopEngine jest najlepszy WooCommerce budowniczy z gotowe szablonyi widżety do niestandardowego tworzenia stron WooCommerce i moduły z przydatnymi funkcjonalnościami eCommerce. Dzięki tej wtyczce masz pełną kontrolę nad projektem swoich stron WooCommerce, w tym strony koszyka.

Podczas gdy ShopEngine oferuje gotowe pliki Szablon koszyka, możesz utworzyć stronę koszyka od zera, a także dostosować koszyk WooCommerce. Na tym blogu przeprowadzę Cię przez proces edycji strony koszyka WooCommerce, aby utworzyć zupełnie nową od zera.

Potrzebujesz więcej powodów, aby przekonać się do korzystania z ShopEngine? Przeczytaj nasz blog dalej 11 powodów, aby wybrać ShopEngine

Krok #1: Zainstaluj Elementor i ShopEngine

Aby rozpocząć proces dostosowywania strony koszyka w WooCommerce, będziesz potrzebować dwóch wtyczek

1. Elementora
2. Kup silnik 

Ponieważ ShopEngine jest narzędziem do tworzenia stron WooCommerce dla Elementora i wymaga Elementora, upewnij się, że instalujesz Elementora Pierwszy. 

Krok #2: Utwórz szablon strony koszyka

Po zainstalowaniu obu wtyczek utwórz szablon koszyka. Aby utworzyć szablon strony koszyka:

• Iść do: Panel => ShopEngine => Szablon konstruktorów
• Kliknij NA Dodaj nowe , aby otworzyć okno ustawień szablonu
• Dać Nazwa szablonu według Twoich preferencji
• Wybierać Wpisz jako koszyk z listy rozwijanej
• Włączyć coś opcję Ustaw domyślne, aby zastąpić istniejącą stronę koszyka
• Wybierz pustą opcję poniżej Przykładowy projekt 
• Kliknij Zapisz zmiany aktualizować

Notatka: Dostać gotowy do użycia szablon koszykapodczas tworzenia szablonu wybierz opcję „Przykładowy projekt 1”. Możesz także edytować każdy element tego gotowego szablonu. Wybrałem pusty, ponieważ zamierzam go utworzyć od zera

Krok #3: Wybierz układ/strukturę

Teraz czas wybrać układ. Rozpocząć 

• Iść do ShopEngine => Moduł konstruktorów
• Najedź kursorem na szablon koszyka z listy
• Kliknij Edytuj za pomocą Elementora

• Po otwarciu Edytora Elementora Kliknij w sekcji Dodaj nową (+) Ikona 
• Teraz wybierz struktura/układ lubisz

Krok #4: Zaprojektuj stronę koszyka za pomocą widżetów ShopEngine

ShopEngine udostępnia pięć widżetów przeznaczonych wyłącznie do projektowania WooCommerce Szablon koszyka. Oprócz widżetów Szablon koszyka możesz także używać Formularz kuponu widget i ponad pięć ogólnych widżetów do zbudowania strony koszyka.

Na tym blogu zamierzam używać następujących widżetów:

• Stół koszykowy: Widget koszyka wyświetla wszystkie produkty w koszyku w formie tabeli z ceną, ilością i sumą częściową. Klienci mogą jednym kliknięciem zaktualizować ilość produktów, a także wyczyścić koszyk.
• Razem koszyk: Ten widżet pokazuje wszystkie dostępne metody wysyłki i całkowitą kwotę zamówienia.
• Wróć do sklepu: Ten widget zawiera przycisk z linkiem, który przeniesie Cię z powrotem na stronę sklepu.
• Formularz kuponu do kasy: Klienci mogą wykorzystać swój kupon rabatowy za pomocą tego widgetu.
• Oferta produktu: Ten widżet umożliwia prezentację produktów objętych wyprzedażą na stronie koszyka za pomocą licznika czasu, który wyświetla okres harmonogramu sprzedaży. To jest ogólny widget ShopEngine.
• Sprzedaż krzyżowa: Sprzedaż krzyżowa atrakcyjnie wyświetla wszystkie produkty sprzedaży krzyżowej na stronie koszyka.

Po pierwsze, musisz włącz widżety chcesz użyć na stronie swojego koszyka. Włączyć  

• Iść do Panel administracyjny => ShopEngine => Widżety. 
• Przewiń i wyszukaj widżet, którego chcesz użyć
• Włączać widżety, których chcesz używać
• Kliknij Zapisz zmiany na górze strony

Teraz nadszedł czas, aby przeciągnąć i upuścić widżety do układu. Wróć do trybu edytora strony koszyka:

• Szukaj dla widżetu
• Przeciągnij i upuść widżety (jeden po drugim)

Notatka: Możesz ukryć przycisk Kontynuuj zakupy i przycisk Ukryj wszystko.

Ponieważ ShopEngine jest w pełni kompatybilny z Elementorem, możesz używać wielu układów na tej samej stronie. W następnej części zastosujmy inny układ. W tym celu dodam nową sekcję o innej strukturze oraz przeciągnę i upuszczę Cross-sell i Widżety produktów z ofertami.

Notatka: Musisz dodaj produkty do sprzedaży krzyżowej I ustawić produkty na sprzedaż z harmonogramami z panelu administracyjnego w ustawieniach produktu dla produktów sprzedaży krzyżowej i ofert, które będą wyświetlane w interfejsie użytkownika.

Zarówno produkty Cross-Sell, jak i Deal oferują coś innego ustawienia, które możesz dostosować. Zatem po przeciągnięciu i upuszczeniu widżetu dostosuj ustawienia zgodnie ze swoimi preferencjami.

Z widżetem sprzedaży krzyżowej, dostępne są opcje takie jak włączanie/wyłączanie opcji Włącz suwak, pokazywanie/ukrywanie wyprzedaży błyskawicznej, ceny wyprzedaży, przycisk koszyka oraz liczba produktów wyświetlanych w ustawieniach treści. W przypadku suwaków dostępne są opcje takie jak slajdy na widok, pętla i autoodtwarzanie. Szybkość przesuwania itp. Ponadto na karcie Zaawansowane dostępna jest również opcja Zamawiaj według i Zamawiaj.

Produkty objęte promocją zapewniają Ci Ustawienia zawartości takie jak Kolejność, Zamów według, Data, Pokaż produkt, Kolumna, Odstęp między kolumnami i Odstęp w wierszach. Otrzymujesz także inne ustawienia, które obejmują Włącz sprzedaż, Odznakę, Odznakę sprzedaży, Wyprzedaż, Limit słów w tytule, Odznakę procentową, Zegar odliczający i Dni.

Krok #5: Dostosuj parametry stylu strony koszyka Woocommerce

Nie tylko struktura, dzięki ShopEngine masz również pełną kontrolę nad stylem strony koszyka.

Aby zmienić parametry stylu widżetów ShopEngine, najedź kursorem na widżet, który chcesz edytować, aby znaleźć opcję Edytuj w prawym górnym rogu. Kliknij tę opcję, aby znaleźć wszystkie ustawienia koszyka Woocommerce dotyczące treści i style na panelu Elementora umieszczonym po lewej stronie.

Przyjrzyjmy się ustawieniom stylu, które możesz dostosować dla każdego z widżetów używanych na tym blogu:

Tabela koszyka: 

Możesz zmienić ustawienia stylu nagłówka tabeli, treści tabeli, obrazu produktu i ilości. Stopka tabeli i czcionka globalna. Aby uzyskać więcej informacji, możesz sprawdzić nasze dokumentację na stole Cart.

Powrót do sklepu:

Zmieniasz wyrównanie przycisku, typografię, kolor obramowania, promień obramowania i cień ramki. Aby uzyskać więcej informacji, możesz sprawdzić nasze dokumentacja dotycząca widżetu powrotu do sklepu

Formularz kuponu:

W przypadku formularza kuponu otrzymasz ustawienie stylu informacji, opisu, formularza kuponu, przycisku zastosowania i czcionki globalnej. Możesz szczegółowo sprawdzić opcje stylu na naszej stronie dokumentacja w formularzu kuponu.

Razem koszyk:

W przypadku widżetu sumy koszyka dostępnych jest wiele opcji stylu umożliwiających zmianę stylu tabeli, danych wejściowych, przycisku aktualizacji kasy i czcionki globalnej. Aby uzyskać bardziej szczegółowe ustawienia stylu koszyka WooCommerce, możesz sprawdzić nasze dokumentacja dotycząca sumy koszyka.

Sprzedaż krzyżowa: 

W przypadku widżetu sprzedaży krzyżowej dostępne są różne opcje stylu, które obejmują style przedmiotów, sprzedaż błyskawiczną, obraz, wyścigi o tytuły, cenę, dodanie do koszyka, styl suwaka i czcionkę globalną. Aby uzyskać więcej informacji na temat Cross, styl wyprzedaży sprawdź dokumentację.

Produkty objęte promocją:

Dostępne są różne opcje stylu opakowania produktu, obrazu produktu, plakietki produktu, zegara odliczającego, stylu zawartości, paska zapasów i postępu oraz czcionki globalnej. Aby poznać więcej szczegółów na temat opcji stylu sprawdź naszą dokumentację dotyczącą widżetu Produkt Deal.

Krok #6: Zaktualizuj i wyświetl podgląd niestandardowej strony koszyka WooCommerce

Po zmianie stylów kliknij Aktualizacja aby zapisać zmiany i kliknij Zapowiedź żeby zobaczyć zmiany.

Jeśli zastosowałeś układ i ustawienia wspomniane na tym blogu, powinieneś zaprojektować niestandardową stronę koszyka w WooCommerce przy użyciu ShopEngine, taką jak ta poniżej:

Bonus: Wskazówki, jak zwiększyć sprzedaż w swoim sklepie eCommerce za pomocą modułów ShopEngine

Teraz wiesz, jak zbudować i dostosować stronę koszyka w woocommerce. ShopEngine, oprócz narzędzia do tworzenia szablonów stron koszyka WooCommerce, udostępnia przydatne moduły z ważnymi funkcjami eCommerce, które mogą zwiększyć sprzedaż w Twoim sklepie internetowym. Moduły ShopEngine obejmują:

• Szybki podgląd
• Próbki odmian
• Lista życzeń
• porównanie produktów

Jestem pewien, że będąc właścicielem sklepu WooCommerce, wiesz, jak ważne są te funkcjonalności, aby zakupy online były dobre. Jeśli mówimy o szablonie koszyka, używając Szybki podgląd przycisk i Lista życzeń przycisk sprzedaży krzyżowej zapewni Twoim klientom lepsze doświadczenia zakupowe. A to zwiększa szansę, że Twoi klienci kupią więcej produktów.

Dzięki szybkiemu podglądowi klienci mogą łatwo sprawdzić pełne informacje o dowolnym produkcie za pomocą jednego kliknięcia. Podobnie, za pomocą jednego kliknięcia użytkownicy mogą dodać produkt do swojej listy życzeń, korzystając z przycisku modułu listy życzeń, aby później dokonać zakupu. Obie te funkcje mogą odegrać znaczącą rolę w zwiększeniu sprzedaży produktów.

Zatem nie tylko dostosowuj stronę koszyka, ale skorzystaj z modułów ShopEngine, aby zapewnić swoim klientom wspaniałe doświadczenia związane z zakupami i zwiększyć sprzedaż w Twoim sklepie.

Bonusowe blogi:
✅ Jak dostosować stronę kategorii WooCommerce bez kodowania
✅ Jak dostosować stronę Moje konto WooCommerce za pomocą ShopEngine 
✅ Jak dostosować stronę sklepu WooCommerce za pomocą ShopEngine 
✅ Jak dostosować stronę produktu WooCommerce za pomocą ShopEngine
✅ Jak dostosować stronę realizacji transakcji WooCommerce za pomocą ShopEngine
✅ Ponad 9 przydatnych i najlepszych wtyczek do koszyków na zakupy dla WordPress i WooCommerce

Dlaczego warto uaktualnić do ShopEngine Pro?

Cóż, szczerze mówiąc, ShopeEngine zapewnia wystarczającą liczbę funkcji, aby Twój sklep internetowy był dobry. Ale dlaczego miałbyś zadowalać się dobrem, skoro możesz uzyskać to, co najlepsze, prawda?

ShopEngine Pro zapewnia ogromną liczbę funkcji, które sprawią, że zakupy online w Twoim sklepie eCommerce będą najlepszym doświadczeniem zakupowym dla Twoich klientów. Oprócz dostosowywania stron koszyka woocommerce, możesz uzyskać dostęp Ponad 20 modułów który zawiera Odliczanie sprzedaży błyskawicznej, odznaki, Powiadomienie o sprzedaży, Szybka kasa, Płatność ciemieniowa, Przełącznik walutowy, i wiele więcej.

Nie tylko zadowolenie klientów, funkcje ShopEngine zaprojektowano tak, aby zarządzanie sklepami internetowymi było również super proste dzięki modułom takim jak Przed Sprzedaż, Zaległe zamówienie, Dodatkowe pole do kasy, i wiele więcej.

Nie zapomnieć 16+ gotowe szablony z pełną kontrolą dostosowywania WooCommerce i Ponad 70 zaawansowanych widżetów aby utworzyć od podstaw każdy szablon WooCommerce, jeśli chcesz.

Jeśli chodzi o stronę koszyka, ShopEngine umożliwia zbudowanie niestandardowej strony koszyka WooCommerce również dla Twojego sklepu internetowego.

Wtyczka z tak wieloma funkcjami, gotowymi szablonami i modułami, która również w bardzo rozsądnej cenie z pewnością wypróbuje, prawda?

Zdobądź swoją wersję ShopEngine już dziś i nigdy więcej nie martw się o to, jak dostosować WooCommerce!

Ostatnie słowa

Gratulacje! Pomyślnie przeprojektowałeś swoją niestandardową stronę koszyka WooCommerce. Czy to nie było łatwe? 

Cóż, właśnie to robi ShopEngine, teraz wiesz, jak dostosować stronę koszyka WooCommerce bez kodowania.

Nie ograniczaj więc swojego sklepu internetowego do domyślnych stylów, przeprojektuj całą witrynę WooCommerce i wykorzystaj moduły, aby Twój biznes internetowy odniósł większy sukces niż kiedykolwiek. 

Którą stronę WooCommerce zamierzasz następnie dostosować? Nie zapomnij podzielić się swoimi doświadczeniami z korzystania z ShopEngine.