Jak skonfigurować koszyk WordPress z WooCommerce
Opublikowany: 2022-10-28Tak więc prawie skończyłeś tworzyć swoją nową witrynę zakupową WooCommerce. Ukończyłeś konstruowanie głównego układu produktu na platformie handlowej, menu wyboru kategorii produktów i stopki nagłówka z funkcjonalnymi wskazówkami nawigacyjnymi.
Najważniejszym aspektem każdej witryny e-commerce jest możliwość przekierowywania i pomagania klientom w dodawaniu produktów do koszyka z dowolnego miejsca w witrynie, aż do procesu realizacji transakcji, aż do potwierdzenia zamówienia.
Może to brzmieć jak trudna funkcja do zintegrowania z witrynami eCommerce WordPress, ale w rzeczywistości tak nie jest. WordPress ma dużą społeczność wspierającą jego rozwój i możesz dodać tę funkcję do swojej witryny za pomocą wtyczki koszyka na zakupy WooCommerce , która działa bezproblemowo z dowolnym motywem WordPress WooCommerce .
Spis treści
Jak działa koszyk WooCommerce?
Po dodaniu produktów do koszyka w WooCommerce są one dodawane do osobnej listy z wariantem i ilością wybraną przez klienta. Pomaga to użytkownikom śledzić wybrane produkty, a ta funkcja pozwala im również automatycznie zobaczyć obliczoną całkowitą cenę zamówienia, do którego będą przystępować przy kasie. Zapewnia także użytkownikom możliwość edycji strony koszyka zakupów WooCommerce.
Korzyści z koszyka w WooCommerce
Korzystanie z koszyka na platformie zakupowej WooCommerce ma wiele zalet. Zanim przejdziemy do przewodnika krok po kroku, jak utworzyć stronę koszyka na zakupy WooCommerce, niektóre z nich to:
- Zaprojektowany, aby pomóc klientom wybrać jeden lub więcej produktów do zakupu i kontynuować przeglądanie innych produktów.
- Pomaga obliczyć całkowitą wartość produktów podczas dodawania ich do koszyka.
- Wyświetla ilość i odmiany wybranego produktu oraz odpowiednio oblicza łączną wartość.
- Może przekierować klientów na stronę kasy jednym kliknięciem.
- Może zawierać dodatkowe funkcje koszyka na zakupy WooCommerce, takie jak historia zamówień, zapisywanie koszyka na później itp.
- Użytkownicy mogą pobrać wtyczkę koszyka WooCommerce, która zawiera oszałamiające elementy projektu.
Jak dodać koszyk do WooCommerce
Przejdźmy teraz przez proces dodawania koszyka do WooCommerce. Na końcu tego artykułu będziesz mógł rozpocząć sprzedaż szerokiej gamy produktów za pomocą funkcjonalnej platformy e-commerce, która zawiera najlepszą wtyczkę koszyka na zakupy dla WordPress.
Krok 1: Instalacja wymagań wstępnych
Aby rozpocząć tworzenie koszyka i proces ustawień koszyka WooCommerce, musisz mieć zainstalowane i aktywowane określone elementy wtyczek na swoim koncie WordPress. W tym celu musisz mieć najnowsze wersje WordPress , WooCommerce , Kreator stron Elementor oraz wtyczkę ShopReady WooCommerce Shop Builder.
Aby zainstalować wtyczki, zaloguj się na swoje konto WordPress, przejdź do Pulpit nawigacyjny WordPress> Wtyczki> Dodaj nowe i wyszukaj wtyczki jeden po drugim, a następnie kliknij A teraz kliknij Aktywuj po zakończeniu procesu instalacji. Wykonaj tę samą procedurę, aby zainstalować wszystkie wymagane wtyczki i programy.
Krok 2: Korzystanie z motywu koszyka na zakupy WooCommerce
Teraz, aby ulepszyć nasz proces budowania funkcji koszyka, musisz mieć zainstalowany działający motyw WooCommerce, aby uzyskać dodatkowe funkcje. W takim przypadku możemy użyć szablonu koszyka zakupów WooCommerce zamiast motywu WordPress WooCommerce .
To znacznie skróci czas potrzebny na dostosowanie i publikację witryny.
Aby zainstalować działający szablon eCommerce w swojej witrynie, zacznij od utworzenia nowej strony i nadaj jej tytuł z Pulpitu WordPress > Strony > Dodaj nowy i kliknij Zostaniesz przekierowany do ekranu edytora Elementor . Tutaj znajdziesz ikonę biblioteki szablonów ShopReady – Elementor . Kliknij ikonę, aby uzyskać dostęp do biblioteki szablonów. Wybierz dowolny szablon, który pasuje do tożsamości Twojej marki, a następnie kliknij Wstaw , aby zastosować szablon.
Poczekaj, aż szablon zakończy proces importowania.
Powinno wyglądać mniej więcej tak.
Sekcja produktów może wyglądać na pustą, jeśli nie dodałeś produktów do WooCommerce. Powinieneś od razu dodać produkty, które chcesz zaprezentować na swojej platformie WooCommerce. Aby to zrobić, możesz skorzystać z naszego poprzedniego przewodnika – Jak dodać produkty do sklepu WooCommerce .
Każdy produkt WooCommerce można dostosować za pomocą tytułu produktu, opisu, ceny, obniżonych cen, obrazów, metadanych, odmian itp. Z pulpitu nawigacyjnego produktu WooCommerce.
Krok 3: Dostosowanie strony produktu
Aby rozpocząć proces personalizacji strony produktu, przejdź do pulpitu nawigacyjnego ShopReady – WooCommerce Builder i wybierz opcję Szablony. Stamtąd możesz skonstruować podstawową stronę produktu, która będzie punktem wyjścia do dostosowywania. Włącz kategorię Szablon produktu, a następnie wyszukaj konfigurację pojedynczego produktu w tej kategorii. Teraz wybierz ikonę edycji z paska narzędzi.
A potem załaduje się ekran wyświetlający Edytor Elementor . Wystarczy kliknąć znak plus, który można zobaczyć w prawym górnym rogu interfejsu Elementora, aby rozpocząć proces dostosowywania strony. Jeśli chodzi o wygląd Twojej strony i widżety, z których chcesz korzystać, masz do dyspozycji szeroką gamę opcji, jeśli chodzi o sekcje Elementora, które możesz do niej wstawić.
Krok 3: Używanie widżetów Elementor do dostosowywania strony produktu w sklepie WooCommerce
Dodawanie tytułu produktu
Ponieważ ustanowiłeś już podstawową strukturę sekcji za pomocą Elementora dla swojej strony produktu WooCommerce, możesz teraz rozpocząć proces dodawania tytułu produktu. Aby osiągnąć ten cel, musisz użyć metody „przeciągnij i upuść”, aby umieścić widżet Tytuł produktu w żądanym miejscu na stronie produktu.
Wyświetl właściwy tytuł produktu, przechodząc do paska nawigacyjnego Elementora, wybierając kartę Treść , a następnie szukając opcji Odśwież edytora w podmenu, które pojawi się po wykonaniu tej czynności. Aby wybrać odpowiedni produkt, kliknij jego nazwę w menu rozwijanym, które znajduje się w sekcji Produkt demonstracyjny.
Będziesz musiał przejść do pulpitu nawigacyjnego produktu WooCommerce i dodać lub zmodyfikować tam niezbędne informacje o produkcie, aby te dane wyświetlały właściwy tytuł produktu. Można to zrobić, klikając przyciski „Dodaj” lub „Edytuj”.
Dodawanie wyróżnionego obrazu do strony produktu
Następnie upewnij się, że Twój produkt ma zarówno galerię zdjęć, jak i polecany obraz. Aby to osiągnąć, możesz użyć dowolnego z różnych widżetów graficznych, które są zawarte we wszechstronnej wtyczce dla eCommerce , która jest dostarczana wraz z Elementorem.
Na potrzeby tej demonstracji użyjemy widżetu ShopReady Thumbnail with Zoom, który, jak sama nazwa wskazuje, ma funkcję powiększania. Jeśli użyjesz tego widżetu, będziesz mógł wyświetlać klientom wersję obrazu produktu WooCommerce po najechaniu kursorem po najechaniu myszą na obraz produktu.
W ten sam sposób jak poprzednio, możesz wybrać odpowiedni obraz produktu, klikając zakładkę Treść opcji Produkt demonstracyjny.
Dodawanie bloku do widżetu cen
Blok cenowy produktu to kolejny istotny element, który powinien znajdować się na stronie produktu eCommerce. Aby to osiągnąć, będziesz musiał zmienić atrybuty produktu WooCommerce z odpowiednimi dostosowaniami i skorzystać z widżetu ShopReady Price, który musi znajdować się pod tytułem produktu.
Aby upewnić się, że wyświetlana jest prawidłowa cena, wybierz tytuł produktu z menu rozwijanego w opcji Demo produktu na karcie Treść.
Dodawanie opisu produktu
Korzystając z tego dodatku do produktów WooCommerce, widżetu Opis produktu, nie tylko masz możliwość dodawania opisów produktów, ale także masz możliwość znacznego dostosowania opisów. Korzystając z zakładki stylu, będziesz mieć możliwość zmiany sposobu, w jaki opis produktu będzie wyświetlany ogółowi społeczeństwa.
Dodawanie funkcji Dodaj do koszyka
Możliwość dodawania przez klientów dodatkowych produktów do koszyka przed przejściem do strony kasy jest ułatwiona dzięki opcji „Dodaj do koszyka”, która jest kolejną niezwykle istotną funkcją.
Korzystanie z widżetu ShopReady Dodaj do koszyka pozwoli Ci wyposażyć stronę Twojego sklepu eCommerce w potężną wersję funkcji Dodaj do koszyka . Za pomocą tego widżetu będziesz mógł zapewnić swoim klientom możliwość dostosowania ilości produktu, który mają w koszyku, bezpośrednio z bloku Dodaj do koszyka.
Możesz także zmodyfikować wygląd przycisku Dodaj do koszyka Elementora za pomocą karty Styl Elementor Style produktu WooCommerce. Tutaj możesz zmienić czcionkę, kolor, tło, margines, dopełnienie i inne atrybuty.
Dodawanie metadanych do strony produktu
Wdrożenie filtra produktów WooCommerce , który wykorzystuje metadane i atrybuty produktów, które dodałeś do WooCommerce podczas dodawania produktów, jest czymś, co powinieneś zrobić, jeśli chcesz zapewnić swoim konsumentom bardziej satysfakcjonujące wrażenia z zakupów.
Poszukaj widgetu ShopReady Meta i umieść go tuż pod przyciskiem „dodaj do koszyka” na stronie poświęconej Twojemu produktowi. Umożliwi to wyświetlenie informacji, o których mowa.
Po wybraniu odpowiedniego tytułu produktu z rozwijanego menu znajdującego się w opcji Demo produktu na karcie Treść, tagi i metadane produktu powinny być wyświetlane dokładnie.
Dodawanie przycisków udostępniania w mediach społecznościowych do strony produktu
Korzystając z prostego bloku przycisków udostępniania w mediach społecznościowych, możesz umożliwić konsumentom udostępnianie postów o produktach w mediach społecznościowych bezpośrednio ze strony produktu WooCommerce dla zakupionego przedmiotu. Które możesz wyprodukować, korzystając tylko z funkcji przeciągania i upuszczania oferowanej przez widżet Elementor Social Share.
Bezpośrednio z zakładki Treść blok można spersonalizować dowolnymi ikonami mediów społecznościowych, tekstem i linkami do udostępniania, wybranymi przez użytkownika. Ponadto karta Elementor Style pozwala użytkownikom zmienić wizualną prezentację bloków udostępniania społecznościowego, jeśli sobie tego życzą.
I na tym kończysz z podstawami dostosowywania stron produktów WooCommerce.
Krok 4: Dodawanie produktów powiązanych z WooCommerce
Korzystanie z widżetu powiązane produkty, który jest zawarty w dodatkach do produktów WooCommerce, pozwoli Ci wyświetlać powiązane produkty na stronie produktu, co jest doskonałą strategią na zwiększenie sprzedaży online. Używając widżetu ShopReady Related Products, możesz łatwo skonstruować wspaniały blok suwaka produktu, który jest podzielony na sekcje.
Aby użyć widżetu, po prostu przeciągnij go i upuść pod blokiem pojedynczego produktu, a następnie wybierz konkretne produkty, które chcesz zaprezentować na stronie pojedynczego produktu z karty Treść .
Krok 5: Dodawanie niestandardowych pól kasy WooCommerce
Jak wspomniano wcześniej, jest to ważny aspekt funkcjonującej platformy e-commerce. Dzięki kreatorowi sklepów WooCommerce, takim jak ShopReady, możesz łatwo wykorzystać krótki kod koszyka WooCommerce i zaimplementować w ten sposób funkcjonalny koszyk eCommerce lub możesz użyć widżetu ShopReady, aby zastosować tę funkcję.
Aby mieć działający koszyk, musisz najpierw dodać widżet „ Dodaj do koszyka” na stronie produktu. Co już zrobiliśmy. Wróćmy więc i stwórzmy samą stronę koszyka, na której wszystkie produkty będą wyświetlane po dodaniu do koszyka.
ShopReady – WooCommerce Shop Builder pozwala użytkownikom wybierać między dwoma różnymi szablonami koszyka, z których można korzystać z pulpitu ShopReady . W panelu ShopReady kliknij menu Szablony , aby włączyć i edytować szablon WooCommerce Preset Cart dostarczony przez ShopReady.
Tworząc nowy szablon koszyka WooCommerce lub edytując istniejący, zostaniesz przekierowany do ekranu Edytora Elementor.
Stąd możesz po prostu dodać widżet koszyka ShopReady , a strona koszyka automatycznie przybierze formę, a tworzenie koszyka na zakupy WordPress bez wtyczki jest tak prostym procesem z ShopReady. Nie wymaga żadnych dodatkowych wtyczek ani narzędzi.
Jeśli masz już jakieś produkty dodane do koszyka, powinno to wyglądać mniej więcej tak.
I masz to, funkcjonalna strona koszyka WooCommerce z funkcjonalnym przyciskiem koszyka. Masz również możliwość dalszego dostosowywania strony koszyka za pomocą Elementora. Dzięki Elementorowi możesz zmienić każdy aspekt strony koszyka, od kolorów tła po ustawienia typografii Elementora.
Możesz także użyć skróconego kodu koszyka zakupów WooCommerce. W takim przypadku będziesz musiał użyć widżetu Elementor ShortCode.
Po zakończeniu dostosowywania strony sklepu upewnij się, że klikniesz Opublikuj / Aktualizuj , aby wprowadzić zmiany w życie dla odwiedzających i klientów.
Wniosek
Cały proces tworzenia niestandardowego przycisku Dodaj do koszyka WooCommerce może wydawać się trudnym zadaniem, ale w miarę postępów w tym przewodniku zobaczysz, że proces tworzenia tej funkcji technicznej nie jest wcale trudny przy odpowiednim zestawie narzędzi. ShopReady WooCommerce Shop Builder to kompletny pakiet, który oferuje wszystkie narzędzia potrzebne do stworzenia solidnej platformy eCommerce od podstaw.
A jeśli napotkasz jakiekolwiek problemy z ShopReady lub procesem tworzenia koszyka, zawsze możesz zajrzeć do dokumentacji koszyka WooCommerce .
Często zadawane pytania dotyczące koszyków WooCommerce
Czy WordPress ma koszyk na zakupy?
WordPress CMS to platforma do hostingu stron internetowych typu barebone. Nie zawiera żadnych funkcji związanych z koszykiem na zakupy ani e-commerce. Ale ponieważ jest to platforma o otwartym kodzie źródłowym, możesz użyć dowolnego z jej narzędzi, wtyczek lub modułów eCommerce stworzonych przez społeczność, aby dodać koszyk do witryny WordPress.
Czy WooCommerce ma koszyk na zakupy?
Tak, podstawowa wtyczka WooCommerce zawiera funkcjonalny przycisk koszyka i stronę koszyka. Ale ma bardzo minimalistyczny charakter. Aby urozmaicić stronę koszyka, możesz użyć dowolnej liczby rozszerzeń WooCommerce lub możesz w pełni wykorzystać opcje dostosowywania kreatora stron Elementor i ShopReady WooCommerce dla stron koszyka eCommerce. Od ikon koszyków WooCommerce po szczegółowe układy stron, wszystko można dostosować za pomocą ShopReady.
Jak stworzyć niestandardową stronę kasy w WooCommerce?
Pobierz i zainstaluj ShopReady – WooCommerce Shop Builder. Teraz utwórz nowy szablon strony kasy WooCommerce z pulpitu nawigacyjnego ShopReady. Zostaniesz przekierowany do Edytora Elementor, stąd możesz użyć widżetu ShopReady Checkout, aby utworzyć funkcjonalną niestandardową stronę kasy w WooCommerce.