Cum să configurați redirecționarea WooCommerce după finalizare

Doriți să redirecționați clienții către o pagină personalizată de mulțumire? Când clienții își finalizează comenzile în WooCommerce, aceștia sunt redirecționați către pagina Comandă primită . Această pagină are un rol incredibil de important de jucat. În această postare, vă arăt cum să configurați redirecționarea WooCommerce după finalizare, pas cu pas și să personalizați pagina comenzii primite.

Cu toate acestea, pagina nu se livrează cu adevărat. Poate doriți să le redirecționați către o pagină personalizată de mulțumire .

Personalizarea paginii de mulțumire creează o experiență unică de cumpărături pentru clienții tăi. Acesta este motivul pentru care este important să aveți o pagină de mulțumire frumos concepută, personalizată pentru produsul dvs. specific.

De asemenea, este un drum lung pentru a vă face magazinul unic în comparație cu concurenții dvs. Puteți include, de asemenea, serviciul post-vânzare și gestionați detaliile de asistență pe această pagină.

Acest lucru este esențial dacă doriți ca magazinul dvs. online să genereze mai multe vânzări și să crească traficul!

Până la sfârșitul acestui scurt tutorial, veți putea redirecționa clienții către o pagină personalizată în mod programatic. De asemenea, vom distribui câteva fragmente de cod pentru a crea o nouă pagină de mulțumire și pentru a suprascrie pagina existentă.

Scopul principal al acestui tutorial este de a ajuta dezvoltatorii să înțeleagă cum este foarte ușor să personalizezi pagini folosind fragmente de cod sau suprascriind șabloane WooCommerce.

De ce aveți nevoie pentru a redirecționa utilizatorii către o pagină personalizată de mulțumire?

Înainte de a continua, ar trebui să creați și o temă copil. Acest lucru vă va asigura că modificările dvs. nu se vor pierde în timpul unei actualizări.

Este important să rețineți că vom folosi fragmente de cod PHP personalizate în acest tutorial. V-am explicat toți pașii pe care trebuie să îi urmați, care vă vor ușura munca.

Acest tutorial presupune, de asemenea, că aveți o instalare WordPress funcțională, iar WooCommerce este adăugat pe deasupra.

Să vedem cum poți realiza asta.

1. Redirecționarea clienților către o pagină personalizată de mulțumire

În această secțiune, vom folosi un fragment de cod PHP personalizat pentru a redirecționa utilizatorii către o pagină de bun venit după ce au finalizat achiziția.

Paginile de bun venit sunt modalități excelente de a vinde un produs, de a include recomandări sau de a educa clienții despre produsul dvs. De asemenea, puteți include reduceri sau cupoane pe această pagină pentru a atrage clienți noi și fideli.

a) Pași pentru redirecționarea clienților după finalizarea comenzii în WooCommerce

Iată pașii pe care trebuie să îi urmați pentru a redirecționa utilizatorii către o pagină personalizată:

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va redirecționa clienții după finalizarea comenzii.
3. Adăugați următorul cod în fișierul 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;

 }

}

4. Acesta este rezultatul:

Cum funcționează codul

Fragmentul de cod redirecționează clientul către o pagină personalizată după ce utilizatorul a finalizat o achiziție.

Acesta verifică dacă utilizatorul și-a finalizat achiziția și îl redirecționează către adresa URL. Nu uitați să înlocuiți adresa URL a paginii corespunzătoare pentru ca acest cod să funcționeze.

Pagina dvs. personalizată ar trebui să fie frumos proiectată pentru a îmbunătăți experiența utilizatorului pe site-ul dvs.

b) Suprascrierea șabloanelor WooCommerce pentru a configura o pagină de mulțumire WooCommerce

Puteți configura cu ușurință o pagină personalizată de mulțumire suprascriind șabloanele WooCommerce. Trebuie să utilizați cârligul de redirecționare șablon și o funcție de apel invers cu adresa URL de redirecționare.

Iată pașii simpli pe care trebuie să-i urmezi:

1. Primul lucru este să verificați dacă utilizatorul se află pe pagina de finalizare a comenzii, pe pagina comenzii sau pe pagina comenzii primite înainte de a crea pagina personalizată de redirecționare. Vom folosi funcția template_redirect(). După aceea, adăugați cârligul de acțiune template_redirect, așa cum se arată mai jos:

 add_action('template_redirect', 'your_callback_function');

2. Următorul pas este să creați funcția de apel invers la care ați făcut referire în șablonul de redirecționare de mai sus. Cu toate acestea, este important să rețineți că numele din funcția de apel invers și cârligul ar trebui să se potrivească.
3. Pentru a adăuga pagina în care doriți ca utilizatorul să fie redirecționat după finalizarea cu succes, trebuie să folosim funcția wp_redirect() în funcția de apel invers. Vă recomandăm să adăugați o ieșire după funcția wp_redirect. Acest lucru va ajuta la evitarea problemelor de redirecționare.
4. Pentru a insera codul, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția.
5. Salvați modificările sau actualizați tema functions.php sau fișierul plugin.

Asta e tot ce trebuie să faci. Acum ați creat cu succes redirecționarea către pagina preferată după ce un utilizator își finalizează achiziția.

2. Personalizarea paginii de mulțumire WooCommerce cu filtre

În loc să creați o pagină personalizată de mulțumire, puteți personaliza pagina existentă. Pentru a realiza acest lucru, vom fi filtru și cârlige de acțiune.

Cârligele de acțiune vă permit să introduceți cod personalizat în diferite puncte. Cârligele de filtrare, pe de altă parte, vă permit să manipulați și să returnați o variabilă, pe care o trece.

În această secțiune, vom folosi filtre pentru a schimba titlul, a personaliza titlul și a modifica textul înainte de informațiile de comandă.

De asemenea, vă vom arăta cum puteți colecta informații suplimentare de la clienții dvs. prin crearea unui formular de sondaj. De asemenea, vă vom arăta cum puteți trimite și procesa o solicitare AJAX pentru formular.

a) Modificarea titlului paginii de mulțumire

WooCommerce oferă funcția is_order_received_page() în fișierul includes/wc-conditional-functions.php. Vom folosi această funcție pentru a schimba titlul paginii

Iată pașii pe care trebuie să-i urmezi:

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va schimba titlul paginii de mulțumire.
3. Adăugați următorul cod în fișierul php :

add_filter( 'woocommerce_endpoint_order-received_title', 'njengah_thank_you_title' );

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}

4. Acesta este rezultatul:

b) Personalizați Titlul

Puteți îmbunătăți titlul paginii „Mulțumesc”. Puteți adăuga detalii precum numele clientului sau orice altceva.

Pentru a realiza acest lucru, iată pașii pe care trebuie să îi urmați:

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor temă este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va personaliza titlul paginii de mulțumire.
3. Adăugați următorul cod în fișierul 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;

}

4. Acesta este rezultatul:

c) Modificarea textului înainte de informațiile de comandă

În mod implicit, textul dinaintea informațiilor despre comandă este „Mulțumesc. Comanda dumneavoastră a fost primită.” textul este afișat pe pagina de mulțumire. Acesta provine din fișierul templates/checkout/thankyou.php.

Există filtre disponibile în WooCommerce care vă permit să schimbați acest text: woocommerce_thankyou_order_received_text.

Pentru a-l schimba, iată pașii pe care trebuie să-i urmezi:

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor temă este deschisă, căutați fișierul cu funcțiile temei unde vom adăuga funcția care va personaliza titlul paginii de mulțumire.
3. Adăugați următorul cod în fișierul 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;

}

4. Nu uitați că puteți adăuga propriul text aici. Acesta este rezultatul:
5. Alternativ, dacă doriți ca clientul să descarce un formular, atunci pot fi adăugate instrucțiunile. Le puteți oferi un link personalizat de unde își pot descărca produsul. Pentru a realiza acest lucru, adăugați următorul cod în fișierul 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;

}

6. Acesta este rezultatul:

3. Colectați detalii suplimentare

Este posibil să colectați informații suplimentare de la utilizator. De exemplu, le puteți cere să vă evalueze experiența utilizatorului.

Dacă doriți să realizați acest lucru, trebuie să creați un formular. De asemenea, trebuie să trimiteți și să procesați o solicitare AJAX pentru ca aceasta să fie înregistrată în back-end.

Să ne uităm la pașii pe care trebuie să îi urmați:

1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
2. Din meniul Tablou de bord, faceți clic pe Meniu Aspect > Meniu Editor de teme . Când pagina Editor de teme este deschisă, căutați fișierul cu funcțiile temei/

3. În primul rând, trebuie să adăugăm un formular. Dacă doriți să apară imediat după titlu, trebuie să utilizați cârligul woocommerce_thankyou_order_received_text.

4. Adăugați următorul fragment de cod pentru a adăuga un formular de sondaj:

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>';

}

5. Următorul pas este să trimiteți cererea AJAX. Pentru a face acest lucru, adăugați următorul cod la același fișier:

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 "<script>

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 );

}

});

});

});

</script>";

}

6. Acesta este rezultatul:
7. După aceea, trebuie să procesăm cererea AJAX adăugând următorul cod la același fișier:

add_action( 'wp_ajax_collect_feedback', 'njengah_thankyou_ajax'); // wp_ajax_{ACȚIUNE}

add_action( 'wp_ajax_nopriv_collect_feedback', 'njengah_thankyou_ajax');

funcția njengah_thankyou_ajax(){

// verificare de securitate

check_ajax_referer( 'mulțumesc'.$_POST['id_comandă'], 'mulțumesc_nonce' );

if( $comanda = wc_get_order( $_POST['id_comanda'] ) ) {

$notă = $comanda->get_formatted_billing_full_name() . " crede că magazinul este " . $_POST['like'] . '.';

$comanda->add_order_note( $notă, 0, adevărat);

}

a muri();

}

8. Acesta este rezultatul din spate:

Concluzie

Până acum, ar trebui să puteți redirecționa clienții către o pagină personalizată după finalizare. Am împărtășit, de asemenea, cum puteți suprascrie șablonul pentru a adăuga diferite elemente pe pagina de mulțumire.

Trebuie să fiți foarte creativi atunci când editați această pagină pentru a vă consolida rata de păstrare.

Cu toate acestea, ar trebui să fiți întotdeauna atenți când editați fișierul functions.php. Dacă faceți o greșeală, va fi afișată o eroare.

De asemenea, puteți utiliza un plugin de generare de pagini pentru a vă personaliza pagina de mulțumire. Ar trebui să-l păstrați relevant, incluzând poate un videoclip cu proprietarul magazinului care recomandă un produs.

Acest lucru va implica clienții dvs. și aceștia vor fi motivați să cumpere mai multe produse din magazinul dvs.

Sperăm că acest tutorial a ajutat la rezolvarea problemei dvs.

Articole similare

1. Redirecționare WooCommerce după finalizare: Redirecționare către pagina personalizată de mulțumire
2. Peste 100 de sfaturi, trucuri și fragmente Ghid de ascundere final pentru WooCommerce
3. Cum se adaugă imaginea produsului Pagina de plată WooCommerce
4. Ghid pentru substituenți imagini WooCommerce
5. Cum să ascundeți greutatea produsului în WooCommerce
6. Cum să ascundeți etichetele în tema magazinului WooCommerce
7. Cum se schimbă substituentul codului de cupon WooCommerce
8. Cum să eliminați, să redenumiti și să adăugați opțiuni de sortare în vitrine
9. Cum să ascundeți codul SKU al produsului în WooCommerce
10. Cum să ascundeți categoria din pagina magazinului WooCommerce
11. Cum să ascundeți prețul dacă este zero în WooCommerce
12. Cum să ascundeți Zerourile Finale WooCommerce
13. Cum să ascund și să redenumești fila Adrese Pagina Contului meu WooCommerce
14. Cum să ascundeți numărul de produse WooCommerce
15. Cum să adăugați un mesaj personalizat de plată WooCommerce
16. Cum să exportați produse în WooCommerce
17. Cum să configurați cantitatea maximă sau minimă de comandă pentru WooCommerce
18. Cum să ascundeți SKU, Categorie, Etichete Meta Pagina produsului WooCommerce
19. Cum să selectați toate, cu excepția ultimului copil în CSS » Exemplu CSS nu ultimul copil
20. Cum să personalizați pagina de plată a magazinului