Cum să personalizați pagina de mulțumire WooCommerce cu cod

Cel mai important aspect al unei pagini de mulțumire de succes este să vă asigurați că oamenii o văd. Nu ai nevoie de nimic elegant sau complicat. Trebuie doar să facă o primă impresie bună, ieșind în evidență de restul site-ului.

Scopul acestui articol este de a vă oferi un tutorial general despre cum să personalizați pagina de mulțumire WooCommerce sau să comandați pagina primită folosind codul.

De ce să personalizați pagina de mulțumire WooCommerce?

Pagina de mulțumire vă oferă o modalitate de a rămâne în contact cu clienții după achiziția lor.

Este posibil să treceți cu vederea importanța confirmării comenzii sau a paginii de mulțumire din magazinul dvs. online, dar este de fapt o parte crucială a procesului de vânzare.

Pagina de mulțumire WooCommerce implicită este plictisitoare și o fundătură pentru clienți. Clienții sunt confuzi cu privire la ceea ce urmează.

În schimb, dacă îl personalizați, puteți:

• Adăugați instrucțiuni de îmbarcare, pașii următori...
• Promovați produse similare prin vânzare încrucișată și upselling
• Folosiți cupoane pentru a încuraja achizițiile repetate
• Oferiți resurse valoroase clienților
• Implicați clienții cu dovezi sociale, videoclipuri etc.

În lumina acestui fapt, să vedem cum putem crea și personaliza cu ușurință o pagină personalizată de mulțumire folosind cod. Dragi dezvoltatori, toți ochii aici!

Personalizați pagina de mulțumire WooCommerce cu cod

Există trei moduri de a personaliza pagina de mulțumire sau de a comanda pagina primită folosind codul:

1. Crearea unei redirecționări
2. Folosind filtre
3. Suprascrierea fișierelor șablon

De asemenea, păstrați această postare despre adăugarea în siguranță a codului la fișier deschis într-o altă filă pentru referință.

Să vedem fiecare dintre cele trei moduri în detaliu.

Personalizarea paginii de mulțumire prin crearea unei redirecționări

Este simplu să faci redirecționare creând un nou plugin sau deschizând fișierul functions.php și introduceți următorul cod până la sfârșitul fișierului.

add_action( 'template_redirect', 'sa_custom_redirect_after_purchase');
funcția sa_custom_redirect_after_purchase() {
	global $wp;
	if ( is_checkout() && !empty( $wp->query_vars['comandă-primită'] ) ) {
		wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/');
		Ieșire;
	}
}

Iată pagina personalizată de mulțumire după plasarea unei comenzi.

Redirecționarea pare bună, dar îi lipsesc lucruri importante, cum ar fi tabelul rezumat al comenzii, detaliile de facturare și livrare și alte informații importante pe care WooCommerce le oferă în prezent.

Personalizarea paginii de mulțumire folosind filtre

În loc să creați o pagină de mulțumire, este posibil să doriți să schimbați titlul paginii sau să modificați un text înainte de informațiile despre comandă. În astfel de cazuri, puteți utiliza filtre.

Schimbarea titlului paginii de mulțumire

add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
funcția sa_title_order_received( $titlu, $id ) {
	if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
		$title = „Vă mulțumim pentru comandă :)”;
	}
	returnează $title;
}

WooCommerce oferă funcția is_order_received_page() în fișierul includes/wc-conditional-functions.php. Iată cum ar apărea titlul schimbat:

Personalizarea titlului paginii de mulțumire

Puteți face acest lucru pentru a include numele clientului în titlu sau orice altceva.

add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
funcția sa_personalize_order_received_title($titlu, $id) {
	if ( is_order_received_page() && get_the_ID() === $id ) {
		global $wp;

		// Ia comanda. Următoarele linii sunt prezente în order_received() în fișierul includes/shortcodes/class-wc-shortcode-checkout.php
		$order_id = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp->query_vars['comandă-primită'] ) );
		$order_key = apply_filters( 'woocommerce_thankyou_order_key', empty( $_GET['key'] ) ? '' : wc_clean( $_GET['key'] ) );

		dacă ( $id_comanda > 0 ) {
			$comanda = wc_get_order( $comanda_comanda);
			dacă ( ! $comanda || ! hash_equals( $comanda->get_order_key(), $order_key ) ) {
				$comanda = fals;
			}
		}
		if ( $order instanceof WC_Order ) {
			$title = sprintf( "Ești minunat, %s!", esc_html( $comanda->get_billing_first_name() ) );
		}
	}
	returnează $title;
}

Acesta va arăta astfel:

Personalizarea textului înainte de informațiile despre comandă

Textul implicit afișat înaintea informațiilor despre comandă este „Mulțumesc. Comanda dumneavoastră a fost primită.”

Acest text provine din fișierul templates/checkout/thankyou.php. Puteți modifica acest text folosind filtrele disponibile în WooCommerce, care este woocommerce_thankyou_order_received_text .

add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
funcția sa_update_order_received_text( $text, $comandă) {
	$text .= 'V-am trimis prin e-mail chitanța comenzii.';
	returnează $text;
}

Acest cod va adăuga textul „V-am trimis prin e-mail chitanța comenzii”. la textul existent.

Dacă doriți să suprascrieți complet textul, trebuie să evitați concatenarea variabilei $text .

 $text = 'V-am trimis prin e-mail chitanța de achiziție.';

Dacă doriți să adăugați instrucțiuni aici care necesită ca clientul să descarce un formular, puteți face și asta.

add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
funcția sa_change_order_received_text( $text, $comandă ) {
	$text = 'V-am trimis prin e-mail chitanța de achiziție. Asigurați-vă că completați <a href="https://demo.storeapps.org/form.pdf">acest formular înainte de a participa la eveniment.';
	returnează $text;
}

Acesta va arăta astfel:

Personalizarea paginii de mulțumire prin suprascrierea fișierelor șablon WooCommerce

WooCommerce arată conținutul paginii de mulțumire din fișierul șablon thankyou.php care poate fi găsit în folderul woocommerce/templates/checkout/.

Veți avea nevoie de niște cunoștințe PHP dacă doriți să alegeți această metodă pentru a personaliza pagina de mulțumire WooCommerce.

Puteți folosi propriul șablon prin copierea fișierului thankyou.php în folderul temei dvs. într-o structură de foldere similară.

De exemplu, dacă utilizați tema Storefront, atunci thankyou.php ar trebui să fie copiat în:
wp-content/themes/storefront/woocommerce/checkout/ folder. Va trebui să creați cele două foldere, „woocommerce” și „checkout”.

Când WooCommerce găsește că același șablon este prezent în propria ta temă, atunci prioritate este dată șablonului prezent în tema ta.

Să luăm un exemplu. Pe pagina implicită de mulțumire, metoda de plată este afișată la început și în detaliile comenzii.

Dorim să oferim clientului un cod de cupon pentru următoarea lor achiziție și să eliminăm metoda de plată din secțiunea de sus.

Mai jos este șablonul thankyou.php:

<?php
dacă ( ! definit( 'ABSPATH' ) ) {
	Ieșire;
}
?>
 
<div class="woocommerce-order">
 
	<?php if ( $comanda ) : ?>

		<?php if ( $comanda->has_status( 'eșuat' ) ) : ?>

			<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( „Din păcate comanda dvs. nu poate fi procesată, deoarece banca/comerciantul de origine v-a refuzat tranzacția. Vă rugăm să încercați achiziția dvs. din nou.', 'woocommerce' ); ?></p>
 
			<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
				<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php _e( 'Plătiți', 'woocommerce' ) ?>
				<?php if ( is_user_logged_in() ) : ?>
					<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'Contul meu', 'woocommerce' ); ?>
				<?php endif; ?>
			</p>

		<?php else : ?>
 
			<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( „Vă mulțumesc. Comanda dvs. a fost primită. V-am trimis prin e-mail chitanța de comandă pentru această tranzacție.', 'woocommerce' ), $order ); ?></p>
 
			<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">
 				<li class="woocommerce-order-overview__order order">
					<?php _e( 'ID tranzacție:', 'woocommerce'); ?>
					<strong><?php echo $order->get_order_number(); ?></strong>
				</li>
 
				<li class="woocommerce-order-overview__date date">
					<?php _e( 'Data:', 'woocommerce'); ?>
					<strong><?php echo date_i18n( get_option( 'data_format' ), $order->get_date_created() ); ?></strong>
				</li>
 
				<li class="woocommerce-order-overview__total total">
					<?php _e( 'Total:', 'woocommerce'); ?>
					<strong><?php echo $order->get_formatted_order_total(); ?></strong>
				</li>
			</ul>

		<?php endif; ?>

		<p>Felicitări pentru prima comandă. Iată o reducere de 15% la următoarea comandă. Utilizați codul de cupon <strong>WELCOME15</strong> pentru a beneficia de reducere.</p>

		<?php do_action( 'woocommerce_thankyou_' . $comanda->get_payment_method(), $comanda->get_id() ); ?>
		<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
 
	<?php else : ?>
 
		<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Vă mulţumesc. Comanda dvs. a fost primită.', 'woocommerce' ), nul ); ?></p>
 
	<?php endif; ?>
 
</div>

Poate doriți să modificați datele afișate în tabelul cu detaliile comenzii și detaliile clientului (când sunteți autentificat).

Acestea vin dintr-un alt dosar. WooCommerce folosește o funcție woocommerce_order_details_table() care este atașată la woocommerce_thankyou hook .

Funcția woocommerce_order_details_table() este definită în fișierul includes/wc-template-functions.php.

Pagina de mulțumire este o colecție de patru fișiere șablon diferite:

1. templates/checkout/thankyou.php
2. templates/order/order-details.php
3. templates/order/order-details-item.php
4. templates/comanda/detalii-comanda-client.php

Odată ce știți ce date provin de la ce șablon, trebuie doar să copiați șablonul potrivit în folderul temei și asta este tot.

Acum, să vedem cum să personalizați pagina de mulțumire WooCommerce pentru o variantă de produs.

Cum să redirecționați către o pagină personalizată de mulțumire pe baza ID-ului variației folosind cârlig?

add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 ); 
funcția sa_redirect_product_attribute_based( $id_comanda ) {
	$comanda = wc_get_order( $comanda_comanda);
	if ( $order instanceof WC_Order ) {
		foreach( $comanda->get_items() ca $articol ) {
			// Adăugați orice id-ul de variație doriți mai jos aici
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				// schimbați mai jos adresa URL la care doriți să trimiteți clientul
				wp_redirect( 'https://demo.storeapps.org/custom-thank-you/');
			}
		}
	}
}

Imprimați textul pe pagina de mulțumire în funcție de atributul produsului

Extinzând exemplul de mai sus, puteți afișa, de asemenea, orice text personalizat pe pagina de mulțumire WooCommerce, pe baza ID-ului variației. Iată codul pentru el:

add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 ); 
funcția sa_show_custom_text_by_variation_id( $order_id ) {
	$comanda = wc_get_order( $comanda_comanda);
	if ( $order instanceof WC_Order ) {
		foreach( $comanda->get_items() ca $articol ) {
			// Adăugați orice id-ul de variație doriți mai jos aici. Atributele mele sunt Culoare, Dimensiune
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				echo „<p>Nu ezitați să ne contactați în cazul în care doriți să schimbați tricoul cu o altă mărime.</p>';
			}
		}
	}
}

Când adăugați codul, pagina de mulțumire va arăta astfel:

Sunt destul de multe fragmente de cod aici. Dacă nu vă place codarea și doriți o soluție ușoară, citiți mai jos pentru a descoperi un plugin puternic.

Cum să configurați o pagină personalizată de mulțumire pentru fiecare produs și la nivel de site folosind un plugin?

Personalizarea paginii de mulțumire implică o mulțime de elemente. Nu este atât de ușor, așa pare. O mică greșeală pe care o faci în timp ce adaugi fragmentul de cod și totul se destramă.

Prin urmare, dacă doriți să vă concentrați mai mult pe vânzări și marketing și să vă salvați de problemele de codificare, vă sugerăm să utilizați pagina personalizată de mulțumire pentru pluginul WooCommerce.

Vă ajută să configurați o pagină personalizată de mulțumire pentru fiecare produs, precum și la nivel de site. Vom adăuga în curând suport pentru variația produsului.

O pagină de mulțumire optimizată cu acest plugin vă permite să faceți upsell (folosind Smart Offers), să construiți o listă de e-mail, să vă promovați ofertele, să colectați feedback, să afișați mesaje video, cupoane și să faceți alte lucruri.

Pagina dvs. de mulțumire WooCommerce implicită se va transforma într-un instrument de marketing puternic ca acesta:

Mai multe funcții de plugin :

• Patru șabloane de pagini de mulțumire gata făcute, cu o conversie ridicată, pentru a vă ajuta să începeți cu succes.
• Redirecționați utilizatorii după cumpărare/plată către linkuri afiliate, linkuri terță parte sau resurse.
• Vă oferă posibilitatea de a crea pagina de mulțumire conform temei, pluginurilor și editorilor de pagini preferate și de a crea pagina așa cum doriți.

Încercați demonstrația live

Cuvinte finale

Sperăm că acest articol v-ar fi ajutat să înțelegeți importanța personalizării unei pagini personalizate de mulțumire împreună cu o bună înțelegere a modului de a face acest lucru printr-un cod și un plugin.

Utilizarea acestei pagini mici poate fi o oportunitate excelentă de a crește vânzările, indiferent cât de normală ni s-ar părea.