WooCommerce: Umieść koszyk i kasę na tej samej stronie

To jest twój ostateczny przewodnik – wraz ze skróconymi kodami, fragmentami i obejściami – aby całkowicie pominąć stronę koszyka i mieć zarówno tabelę koszyka, jak i formularz kasy na tej samej stronie.

Ale najpierw… dlaczego chcesz to zrobić? Cóż, jeśli sprzedajesz produkty z wysokimi biletami (tj. średnio sprzedajesz około jednego produktu na zamówienie), jeśli chcesz zaoszczędzić dodatkowy krok (dwa kroki zamieniają się lepiej niż trzy: „Dodaj do koszyka” > „Strona koszyka” > „Strona kasy” – i to nie jest nauka rakietowa), jeśli Twoje niestandardowe cele przepływu pracy i e-commerce wymagają od Ciebie zarządzania koszykiem i kasą razem, cóż, ten samouczek jest dla Ciebie.

Istnieje mieszanka krótkich kodów, ustawień i fragmentów kodu PHP, których możesz użyć, aby to zadziałało po wyjęciu z pudełka. I zaufaj mi, to jest łatwiejsze niż myślisz.

Podczas gdy wielu programistów decyduje się na przekształcenie procesu kasowania w „ Wieloetapowe kasowanie ” (ehm, nie wiem dlaczego – im więcej kroków, tym większe prawdopodobieństwo porzucenia koszyka), tutaj zobaczymy dokładnie odwrotnie.

Więc jak oni to robią?

Oto kompletny, prosty przewodnik krok po kroku, jak umieścić koszyk i kasę na tej samej stronie . Daj mu szansę, przeprowadź testy i śledzenie WooCommerce i zobacz, czy konwertuje się lepiej

Krok 1: Dodaj krótki kod do koszyka @ Strona kasy

Najpierw musisz dodać krótki kod „woocommerce_cart” do strony kasy. W ten sposób mówimy WooCommerce, że chcemy mieć tabelę koszyka na górze i formularz kasy poniżej .

Aktualizacja: 19.10.2018. W pierwszej wersji tego samouczka sugerowałem dodanie krótkiego kodu [woocommerce_cart] nad krótkim kodem „woocommerce_checkout” na stronie kasy (zrzut ekranu). Niestety powoduje to błąd na stronie „Dziękujemy” po złożeniu zamówienia. W rzeczywistości wyświetlany jest tam komunikat „pusty koszyk”, ponieważ zawartość strony kasy (która zawiera krótki kod koszyka) wyświetla się również na stronie z podziękowaniami (nie jestem pewien, dlaczego!). Musimy więc znaleźć sposób na załadowanie krótkiego kodu [woocommerce_cart] na stronie kasy, ALE nie na stronie z podziękowaniami. Oto poprawka i tak, to zgrabny fragment PHP.

Fragment PHP: Wyświetl tabelę koszyka nad formularzem kasowym @ WooCommerce Checkout page

/**
 * @snippet       Display Cart @ Checkout Page Only - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

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

function bbloomer_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) return;

echo do_shortcode('[woocommerce_cart]');

}

Dzięki tej niewielkiej zmianie Twoja nowa strona realizacji transakcji będzie wyglądać tak, jak na poniższym zrzucie ekranu. Uwaga – jeśli znasz układ strony koszyka, możesz pamiętać sekcję „Zabezpieczenia koszyka” (tj. „ Sumy koszyka ”, gdzie wyświetlane są sumy częściowe, koszty wysyłki i sumy)… cóż, jest to automatycznie ukryte tylko dlatego, że ponownie za pomocą dwóch krótkich kodów na tej samej stronie. Czy to nie cudowne?

Krok 2: Usuń stronę koszyka @ Ustawienia WooCommerce (zaktualizowane dla Woo 3.7+)

Prawdopodobnie sama zmiana krótkiego kodu wystarczy, aby uzyskać to, czego potrzebujesz (koszyk i kasa na tej samej stronie). Jednak na wypadek, gdybyś naprawdę chciał zrobić to dobrze, potrzebnych jest kilka poprawek.

W rzeczywistości, jeśli Kasa jest opróżniona (mam na myśli, że Koszyk jest opróżniony na stronie Kasy), WooCommerce przekieruje użytkowników do strony Koszyk i wyświetli komunikat o pustym koszyku („Powrót do Sklepu”).

Teraz naszym celem jest całkowite pozbycie się strony koszyka , aby użytkownicy nigdy jej nie zobaczyli.

Aktualizacja: 21.08.2019. Do wersji WooCommerce 3.7 możliwe było ustawienie strony „Do kasy” jako strony „Koszyk” i „Zamówienie”. Nie jest to już możliwe, więc po prostu postępuj zgodnie z nowymi instrukcjami.

Z tego powodu musisz wyłączyć stronę Koszyk (w WooCommerce > Ustawienia > Zaawansowane) – po prostu kliknij mały „x” i „Zapisz zmiany”. Oto zaktualizowany zrzut ekranu od wersji WooCommerce 3.7:

Krok 3: Usuń stronę koszyka @ Strony WordPress

Nie ma potrzeby robienia zrzutu ekranu.

Teraz, gdy strona koszyka nie jest już przydatna, czas usunąć ją ze stron WordPress . Przekierowania są już na miejscu, a tabela koszyka znajduje się już na stronie kasy, więc nie musisz się martwić.

Śmiało i wrzuć stronę koszyka do kosza!

Krok 4 (Bonus): Przekieruj pustą kasę

Następnie istnieje małe obejście na wypadek, gdybyś nie chciał wyświetlać pustej strony kasy, jeśli użytkownicy uzyskują do niej bezpośredni dostęp lub gdy tabela koszyka jest opróżniona.

Na przykład możesz chcieć przekierować puste koszyki na stronę główną, a może na stronę sklepu (lub jeszcze lepiej do ostatnio oglądanego produktu), aby klienci mogli ponownie rozpocząć zakupy.

Oto mały fragment dla Ciebie – mały bonus – dzięki któremu możesz na przykład przekierować pustą stronę kasy na stronę główną . Wypróbuj to!

Fragment PHP: Przekieruj pusty koszyk @ WooCommerce Checkout z koszykiem

/**
 * @snippet       Redirect Empty Cart/Checkout - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=80321
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.7
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

add_action( 'template_redirect', 'bbloomer_redirect_empty_cart_checkout_to_home' );

function bbloomer_redirect_empty_cart_checkout_to_home() {
	if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && ! is_wc_endpoint_url( 'order-pay' ) && ! is_wc_endpoint_url( 'order-received' ) ) {
		wp_safe_redirect( home_url() );
		exit;
	}
}