Jak umieścić koszyk WooCommerce i kasę na jednej stronie?

Opublikowany: 2020-09-21

Umieść koszyk WooCommerce i kasę na jednej stronie

W tym krótkim samouczku podzielę się rozwiązaniem, w jaki sposób możesz umieścić koszyk WooCommerce i kasę na jednej stronie. To znacznie zoptymalizowałoby proces kasy i zaoszczędziłoby klientom dużo czasu, ponieważ nie czekają na załadowanie kolejnej strony. To rozwiązanie może być wykorzystane, jeśli chcesz zaoszczędzić dodatkowy krok, zwłaszcza w przypadku produktów o wysokiej wartości, które są sprzedawane po około jednym produkcie na zamówienie.

Koszyk WooCommerce i kasa na jednej stronie

Klienci, którzy regularnie robią zakupy online, zawsze potrzebują szybkiego procesu realizacji transakcji. Mogą wybrać inny sklep, jeśli prędkość ładowania jest niska lub jeśli są przekierowywani na inne strony przed dokonaniem płatności. Głównym powodem, dla którego wiele osób korzysta z WooCommerce w swoim sklepie internetowym, jest możliwość jego modyfikacji.

Domyślny proces kasy w WooCommerce ma dwie oddzielne strony dla koszyka i kasy. Chcę zilustrować, w jaki sposób możesz umieścić koszyk WooCommerce i kasę na jednej stronie, aby poprawić wrażenia użytkownika i zwiększyć konwersje.

To będzie twój ostateczny przewodnik, ponieważ istnieje mieszanka krótkich kodów, ustawień i fragmentów kodu PHP, których możesz użyć, aby to zadziałało. Może się to wydawać nieco skomplikowane, ale jeśli będziesz uważnie podążał za krokami, którymi zamierzam się podzielić, okaże się to łatwiejsze niż myślisz.

Głównym powodem takiego postępowania jest to, że w procesie Multi-Step Checkout istnieje większe prawdopodobieństwo problemów z porzucaniem koszyka, co poprawia sprzedaż w Twoim sklepie WooCommerce.

Biorąc to wszystko pod uwagę, oto prosty przewodnik krok po kroku, jak umieścić koszyk i kasę na tej samej stronie. Co więcej, możesz zdecydować się na testy i śledzenie WooCommerce, aby sprawdzić, czy współczynnik konwersji jest lepszy.

Kroki, aby umieścić koszyk WooCommerce i kasę na jednej stronie

  1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
  2. Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję, która umieści koszyk i kasę na jednej stronie.
  3. Dodaj następujący kod na końcu pliku php . Oznacza to, że musimy dodać krótki kod „woocommerce_cart” do strony kasy. Pamiętaj, aby zapisać zmiany :
 /**

 * Wyświetl koszyk @ Tylko strona kasy – WooCommerce

*/

add_action( 'woocommerce_before_checkout_form', 'njengah_cart_on_checkout_page_only', 5 );

funkcja njengah_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'otrzymano zamówienie' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}
  1. Aby zobaczyć wynik, po prostu odśwież stronę kasy i powinieneś zobaczyć to: strona koszyka na górze kasy

Warto wspomnieć, że jeśli znasz układ strony Koszyk, być może znasz sekcję Sumy koszyka . Ten zgrabny kod, który udostępniłem, automatycznie ukrywa sumy z powodu dwóch skrótów na tej samej stronie. To fajna funkcja.

  1. Sam krótki kod załatwia sprawę, ale jeśli przyjrzysz się trochę, odkryjesz, że strona koszyka nadal pojawia się jako samodzielna . Dodatkowo koszyk jest opróżniany na stronie kasy, a WooCommerce przekieruje użytkowników do strony koszyka i wyświetli komunikat o pustym koszyku. Oznacza to, że należy wprowadzić kilka poprawek, aby to zmienić. Musisz całkowicie pozbyć się strony koszyka, aby użytkownicy nigdy jej nie widzieli.

Na pulpicie nawigacyjnym WordPressa kliknij WooCommerce > Ustawienia. Na stronie ustawień kliknij kartę Zaawansowane i po prostu kliknij mały „x” i Zapisz zmiany, jak pokazano: usuwanie strony koszyka

  1. Następnie musisz usunąć stronę Koszyk . Dzieje się tak, ponieważ nie jest już użyteczny, a przekierowania są już na miejscu, a tabela koszyka znajduje się już na stronie kasy.
  2. Jeśli jednak chcesz przekierować pustą stronę kasy, jeśli użytkownicy uzyskują do niej bezpośredni dostęp lub gdy tabela koszyka jest pusta , oto mały fragment dla Ciebie. Pomoże Ci to przekierować pustą stronę kasy na stronę główną.

Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję, która przekieruje pustą stronę kasy na stronę główną.

  1. Dodaj następujący kod na końcu pliku php .
 /**

* Przekieruj pusty koszyk/do kasy - WooCommerce

*/




add_action( 'template_redirect', 'njengah_redirect_empty_cart_checkout_to_home' );

funkcja njengah_redirect_empty_cart_checkout_to_home() {

if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'zamówienie-zapłata' ) && ! is_wc_endpoint_url( 'zamówienie-otrzymane' )) {

wp_safe_redirect( home_url() );

Wyjście;

}

}
  1. Aby zobaczyć wynik, usuń wszystkie produkty z koszyka, a zostaniesz przekierowany na stronę główną, jak pokazano: przeadresować

Wniosek

To jest to! Teraz masz zoptymalizowany proces kasy i nie musisz się martwić problemami z porzucaniem koszyka w swoim sklepie WooCommerce. W pierwszym fragmencie dodałem krótki kod „woocommerce_cart” do strony kasy, aby dodać tabelę koszyka na górze i formularz kasy poniżej. Należy jednak pamiętać, że musisz całkowicie pozbyć się strony koszyka, aby użytkownicy nigdy jej nie widzieli.

Dodatkowo dodałem bonusowy fragment kodu PHP, który pomoże Ci przekierować pustą kasę. Mam nadzieję, że ten krótki post dostarczył rozwiązania, w jaki sposób możesz umieścić koszyk WooCommerce i kasę na jednej stronie.

Podobne artykuły

  1. Jak zmienić ikony bramki płatności WooCommerce?
  2. Jak dodać ikony płatności WooCommerce w stopce [HTML]
  3. Jak ukryć ikonę PayPal na stronie kasy WooCommerce
  4. Jak zmienić rozmiar obrazów produktów WooCommerce?
  5. Jak przekierować stronę WordPress bez wtyczek?
  6. Jak zainstalować WooCommerce Storefront krok po kroku [Kompletny przewodnik]
  7. Zmień tekst przejścia do kasy w WooCommerce
  8. Jak wyświetlać produkty WooCommerce według kategorii?
  9. Ukryj lub usuń pole ilości na stronie produktu WooCommerce
  10. Jak ukryć sumę częściową koszyka w WooCommerce lub usunąć wiersz sumy częściowej?
  11. Jak ukryć pole kodu kuponu WooCommerce?
  12. Jak wyłączyć metodę płatności dla określonej kategorii?
  13. Jak ukryć przycisk Dodaj do koszyka w WooCommerce?
  14. Jak uzyskać metody płatności w WooCommerce » Przykład kodu
  15. Jak utworzyć stronę mojego konta w WooCommerce?
  16. Co to jest motyw witryny sklepu WooCommerce? [Odpowiedź]
  17. Jak przekierować do koszyka po zalogowaniu w WooCommerce
  18. Jak zmienić tekst przycisku Dodaj do koszyka na stronie sklepu WooCommerce?
  19. Jak pominąć koszyk i przekierować do strony kasy WooCommerce
  20. Jak zmienić powiadomienie „Dodano do koszyka” WooCommerce?