Jak skonfigurować przekierowanie WooCommerce po kasie?

Opublikowany: 2021-05-11

Skonfiguruj przekierowanie WooCommerce po realizacji transakcji Czy chcesz przekierować klientów na niestandardową stronę z podziękowaniem? Gdy klienci sfinalizują swoje zamówienia w WooCommerce, są przekierowywani na stronę Otrzymane zamówienie . Ta strona ma do odegrania niezwykle ważną rolę. W tym poście pokażę Ci, jak skonfigurować przekierowanie WooCommerce po kasie, krok po kroku i dostosować stronę otrzymanego zamówienia.

Jednak strona tak naprawdę się nie wyświetla. Możesz przekierować ich na niestandardową stronę z podziękowaniem .

Dostosowanie strony z podziękowaniami zapewnia Twoim klientom wyjątkowe wrażenia z zakupów. Dlatego ważne jest, aby mieć pięknie zaprojektowaną stronę z podziękowaniami, która jest dostosowana do konkretnego produktu.

Dzięki temu Twój sklep będzie wyjątkowy w porównaniu z konkurencją. Na tej stronie możesz również uwzględnić obsługę posprzedażną i zarządzać szczegółami pomocy technicznej.

Jest to niezbędne, jeśli chcesz, aby Twój sklep internetowy generował większą sprzedaż i zwiększał ruch!

Pod koniec tego krótkiego samouczka będziesz mógł programowo przekierowywać klientów na niestandardową stronę. Udostępnimy również fragmenty kodu służące do tworzenia nowej strony z podziękowaniami i zastępowania istniejącej strony.

Głównym celem tego samouczka jest pomoc programistom w zrozumieniu, jak bardzo łatwo jest dostosowywać strony za pomocą fragmentów kodu lub nadpisując szablony WooCommerce.

Czego potrzebujesz, aby przekierować użytkowników na niestandardową stronę z podziękowaniem?

Zanim przejdziesz dalej, powinieneś również utworzyć motyw potomny. Zapewni to, że Twoje zmiany nie zostaną utracone podczas aktualizacji.

Należy pamiętać, że w tym samouczku będziemy używać niestandardowych fragmentów kodu PHP. Wyjaśniliśmy Ci wszystkie kroki, które musisz wykonać, co ułatwi Ci pracę.

Ten samouczek zakłada również, że masz działającą instalację WordPress, a do tego dodano WooCommerce.

Zobaczmy, jak możesz to osiągnąć.

1. Przekierowywanie klientów na niestandardową stronę z podziękowaniami

W tej sekcji użyjemy niestandardowego fragmentu kodu PHP, aby przekierować użytkowników na stronę powitalną po dokonaniu zakupu.

Strony powitalne to świetne sposoby na sprzedaż produktu, dołączenie skierowań lub edukowanie klientów na temat Twojego produktu. Na tej stronie możesz również umieszczać rabaty lub kupony, aby przyciągnąć nowych i lojalnych klientów.

a) Kroki przekierowania klientów po realizacji transakcji w WooCommerce

Oto kroki, które należy wykonać, aby przekierować użytkowników na niestandardową stronę:

  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 przekieruje klientów po dokonaniu zakupu.
  3. Dodaj następujący kod do pliku php : 
add_action( 'woocommerce_thankyou', 'njengah_redirectcustom');

function njengah_redirectcustom( $order_id ){

 $order = wc_get_order( $order_id );

 $url = 'https://yoursite.com/custom-url';

if ( ! $order->has_status( 'failed' ) ) {

 wp_safe_redirect( $url );

exit;

 }

}
  1. Oto wynik: niestandardowa strona z podziękowaniami

Jak działa kod

Fragment kodu przekierowuje klienta na niestandardową stronę po dokonaniu przez użytkownika zakupu.

Sprawdza, czy użytkownik dokonał zakupu i przekierowuje go na adres URL. Pamiętaj, aby zastąpić adres URL odpowiedniej strony, aby ten kod działał.

Twoja niestandardowa strona powinna być pięknie zaprojektowana, aby poprawić wrażenia użytkownika w Twojej witrynie.

b) Nadpisywanie szablonów WooCommerce w celu utworzenia strony z podziękowaniami WooCommerce

Możesz łatwo skonfigurować niestandardową stronę z podziękowaniami, nadpisując szablony WooCommerce. Musisz użyć haka przekierowania szablonu i funkcji zwrotnej z adresem URL przekierowania.

Oto proste kroki, które musisz wykonać:

  1. Pierwszą rzeczą jest sprawdzenie, czy użytkownik jest na stronie kasy, zamówienia lub strony otrzymanego zamówienia, zanim utworzymy niestandardową stronę przekierowującą. Użyjemy funkcji template_redirect(). Następnie dodaj hak akcji template_redirect, jak pokazano poniżej:
 add_action('template_redirect', 'your_callback_function');
  1. Następnym krokiem jest utworzenie funkcji zwrotnej, do której odwołujesz się w powyższym haku przekierowania szablonu. Należy jednak pamiętać, że nazwa funkcji zwrotnej i podpięcia powinny być takie same.
  2. Aby dodać stronę, na którą użytkownik ma zostać przekierowany po pomyślnym sprawdzeniu, musimy użyć funkcji wp_redirect() w funkcji zwrotnej. Zalecamy dodanie wyjścia po funkcji wp_redirect. Pomoże to uniknąć problemów z przekierowaniami.
  3. Aby wstawić kod, kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję.
  4. Zapisz zmiany lub zaktualizuj swój motyw functions.php lub plik wtyczki.

To wszystko, co musisz zrobić. Udało Ci się teraz pomyślnie utworzyć przekierowanie do preferowanej strony po dokonaniu przez użytkownika zakupu.

2. Dostosowywanie strony z podziękowaniami WooCommerce za pomocą filtrów

Zamiast tworzyć niestandardową stronę z podziękowaniami, możesz dostosować istniejącą stronę. Aby to osiągnąć, będziemy hakami filtrującymi i akcji.

Haki akcji umożliwiają wstawianie niestandardowego kodu w różnych punktach. Z drugiej strony hooki filtrów pozwalają manipulować i zwracać zmienną, którą przekazuje.

W tej sekcji użyjemy filtrów, aby zmienić tytuł, spersonalizować tytuł i zmienić tekst przed informacjami o zamówieniu.

Pokażemy Ci również, w jaki sposób możesz zebrać dodatkowe informacje od swoich klientów, tworząc formularz ankiety. Pokażemy Ci również, w jaki sposób możesz wysłać i przetworzyć żądanie AJAX dotyczące formularza.

a) Zmiana tytułu strony z podziękowaniem

WooCommerce udostępnia funkcję is_order_received_page() w pliku include/wc-conditional-functions.php. Użyjemy tej funkcji do zmiany tytułu strony

Oto kroki, które musisz wykonać:

  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 zmieni tytuł strony z podziękowaniami.
  3. Dodaj następujący kod do pliku php : 
add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_thank_you_title' );

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}
  1. Oto wynik: Zmień tytuł

b) Spersonalizuj tytuł

Możesz ulepszyć tytuł strony „Dziękuję”. Możesz dodać szczegóły, takie jak imię i nazwisko klienta lub cokolwiek innego.

Aby to osiągnąć, oto kroki, które musisz wykonać:

  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 spersonalizuje tytuł strony z podziękowaniami.
  3. Dodaj następujący kod do pliku php : 
add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_personalize_order_received_title', 10, 2 );

function njengah_personalize_order_received_title( $title, $id ) {

if ( is_order_received_page() && get_the_ID() === $id ) {

global $wp;

// Get the order. Line 9 to 17 are present in order_received() in includes/shortcodes/class-wc-shortcode-checkout.php file

$order_id  = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['order-received'] ) );

$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );

if ( $order_id > 0 ) {

$order = wc_get_order( $order_id );

if ( $order->get_order_key() != $order_key ) {

$order = false;

}

}

if ( isset ( $order ) ) {

//$title = sprintf( "You are awesome, %s!", esc_html( $order->billing_first_name ) ); // use this for WooCommerce versions older then v2.7

$title = sprintf( "You are awesome, %s!", esc_html( $order->get_billing_first_name() ) );

}

}

return $title;

}
  1. Oto wynik: nadać cechy osobiste

c) Zmiana tekstu przed informacjami o zamówieniu

Domyślnie tekst przed informacją o zamówieniu to „Dziękuję. Twoje zamówienie zostało odebrane.” tekst jest wyświetlany na stronie z podziękowaniami. Pochodzi z pliku templates/checkout/thankyou.php.

W WooCommerce dostępne są filtry, które pozwalają zmienić ten tekst: woocommerce_thankyou_order_received_text.

Aby to zmienić, oto kroki, które musisz wykonać:

  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 spersonalizuje tytuł strony z podziękowaniami.
  3. Dodaj następujący kod do pliku php : 
add_filter('woocommerce_thankyou_order_received_text', 'njengah_change_order_received_text', 10, 2 );

function njengah_change_order_received_text( $str, $order ) {

$new_str = $str . ' We have emailed the purchase receipt to you.';

return $new_str;

}
  1. Pamiętaj, że możesz tutaj dodać własny tekst. Oto wynik: tekst po tytule
  2. Alternatywnie, jeśli chcesz, aby klient pobrał formularz, wtedy można dodać instrukcje. Możesz podać im niestandardowy link, z którego będą mogli pobrać swój produkt. Aby to osiągnąć, dodaj następujący kod w pliku functions.php: 
add_filter('woocommerce_thankyou_order_received_text', 'njengah_change_order_received_text', 10, 2 );

function njengah_change_order_received_text( $str, $order ) {

$new_str = 'We have emailed the purchase receipt to you. Please make sure to fill <a href="http://example.com/some-form.pdf">this form</a> before attending the event';

return $new_str;

}
  1. Oto wynik: link do pobrania

3. Zbierz dodatkowe dane

Możliwe jest zbieranie dodatkowych informacji od użytkownika. Na przykład możesz poprosić ich o ocenę Twojego doświadczenia użytkownika.

Jeśli chcesz to osiągnąć, musisz stworzyć formularz. Musisz również wysłać i przetworzyć żądanie AJAX, aby zostało zarejestrowane na zapleczu.

Rzućmy okiem na kroki, które musisz wykonać:

  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/

3. Przede wszystkim musimy dodać formularz. Jeśli chcesz, aby pojawił się tuż po tytule, musisz użyć haka woocommerce_thankyou_order_received_text.

  1. Dodaj następujący fragment kodu, aby dodać formularz ankiety: 
add_action( 'woocommerce_thankyou', 'njengah_poll_form', 4 );

function njengah_poll_form( $order_id ) {

echo '<h2>What do you think about my shop?</h2>;

<form id="thankyou_form"&gt;

<label><input type="radio" name="like" value="superb"&gt; Superb</label>

<label><input type="radio" name="like" value="good enough"&gt; Good enough</label>

<label><input type="radio" name="like" value="could be better"&gt; Could be better</label>;

<input type="hidden" name="action" value="collect_feedback" />

<input type="hidden" name="order_id" value="' . $order_id . '" />

' . wp_nonce_field( 'thankyou'.$order_id, 'thankyou_nonce', true, false ) . '

</form>';

}
  1. Następnym krokiem jest wysłanie żądania AJAX. Aby to zrobić, dodaj następujący kod do tego samego pliku:

add_action( 'wp_footer', 'njengah_send_thankyou_ajax' );

function njengah_send_thankyou_ajax(){

// exit if we are not on the Thank You page

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

echo "&lt;script&gt;

jQuery( function( $ ) {

$('input[type=radio][name=like]').change(function() {

$.ajax({

url: '" . admin_url('admin-ajax.php') . "',

type: 'POST',

data: $('#thankyou_form').serialize(),

beforeSend : function( xhr ){

$('#thankyou_form').html('Thank you! You feedback has been send!');

},

success : function( data ){

console.log( data );

}

});

});

});

&lt;/script&gt;";

}

  1. Oto wynik: Ankieta
  2. Następnie musimy przetworzyć żądanie AJAX, dodając następujący kod do tego samego pliku:

add_action( 'wp_ajax_collect_feedback', 'njengah_thankyou_ajax' ); // wp_ajax_{AKCJA}

add_action( 'wp_ajax_nopriv_collect_feedback', 'njengah_thankyou_ajax' );

funkcja njengah_thankyou_ajax(){

// kontrola bezpieczeństwa

check_ajax_referer( 'dziekujemy'.$_POST['id_zamówienia'], 'dziekujemy_noce' );

if( $zamówienie = wc_get_order( $_POST['order_id'] ) ) {

$note = $order->get_formatted_billing_full_name() . „myśli, że sklep jest”. $_POST['lubię'] . '.';

$order->add_order_note( $note, 0, true );

}

umierać();

}

  1. Oto wynik końcowy:

Uwaga

Wniosek

Do tej pory powinieneś być w stanie przekierować klientów na niestandardową stronę po dokonaniu zakupu. Udostępniliśmy również, w jaki sposób możesz nadpisać szablon, aby dodać różne elementy na stronie z podziękowaniami.

Podczas edytowania tej strony musisz być bardzo kreatywny, aby wzmocnić współczynnik retencji.

Jednak zawsze należy zachować ostrożność podczas edycji pliku functions.php. Jeśli popełnisz błąd, zostanie wyświetlony błąd.

Możesz także użyć wtyczki do tworzenia stron, aby dostosować swoją stronę z podziękowaniem. Powinieneś zachować aktualność, być może dołączając wideo właściciela sklepu polecającego produkt.

To zaangażuje Twoich klientów i zmotywuje ich do zakupu większej ilości produktów w Twoim sklepie.

Mamy nadzieję, że ten samouczek pomógł rozwiązać Twój problem.

Podobne artykuły

  1. Przekierowanie WooCommerce po realizacji transakcji: Przekierowanie na niestandardową stronę z podziękowaniami
  2. Ponad 100 porad, sztuczek i fragmentów Kompletny przewodnik po ukryciu WooCommerce
  3. Jak dodać obraz produktu stronę kasy WooCommerce
  4. Przewodnik zastępczy obrazu WooCommerce
  5. Jak ukryć wagę produktu w WooCommerce
  6. Jak ukryć tagi w motywie Storefront WooCommerce
  7. Jak zmienić symbol zastępczy kodu kuponu WooCommerce
  8. Jak usunąć, zmienić nazwę i dodać opcje sortowania witryny sklepowej
  9. Jak ukryć kod SKU produktu w WooCommerce?
  10. Jak ukryć kategorię na stronie sklepu WooCommerce
  11. Jak ukryć cenę, jeśli zero w WooCommerce?
  12. Jak ukryć końcowe zera WooCommerce
  13. Jak ukryć i zmienić nazwę karty Adresy Strona Moje konto WooCommerce
  14. Jak ukryć liczbę produktów WooCommerce?
  15. Jak dodać niestandardową wiadomość kasową WooCommerce?
  16. Jak eksportować produkty w WooCommerce
  17. Jak ustawić maksymalną lub minimalną ilość zamówienia WooCommerce?
  18. Jak ukryć SKU, kategorię, tagi Meta Strona produktu WooCommerce
  19. Jak wybrać wszystko oprócz ostatniego dziecka w CSS »Przykład CSS Not Last Child
  20. Jak dostosować stronę kasy w witrynie sklepowej