Jak dostosować stronę z podziękowaniami WooCommerce za pomocą kodu?

Najważniejszym aspektem udanej strony z podziękowaniami jest upewnienie się, że ludzie ją zobaczą. Nie potrzebujesz niczego wymyślnego ani skomplikowanego. Musi tylko zrobić dobre pierwsze wrażenie, wyróżniając się na tle reszty witryny.

Celem tego artykułu jest przedstawienie ogólnego samouczka dotyczącego dostosowywania strony z podziękowaniami WooCommerce lub zamawiania otrzymanej strony za pomocą kodu.

Po co dostosowywać stronę z podziękowaniami WooCommerce?

Strona z podziękowaniami umożliwia pozostanie w kontakcie z klientami po ich zakupie.

Możesz przeoczyć znaczenie potwierdzenia zamówienia lub strony z podziękowaniem w Twoim sklepie internetowym, ale w rzeczywistości jest to kluczowa część procesu sprzedaży.

Domyślna strona z podziękowaniami WooCommerce jest nudna i ślepa uliczka dla klientów. Klienci są zdezorientowani, co dalej.

Zamiast tego, jeśli go dostosujesz, możesz:

• Dodaj instrukcje wprowadzające, kolejne kroki…
• Promuj powiązane produkty poprzez cross-selling i upselling
• Użyj kuponów, aby zachęcić do powtórnych zakupów
• Zapewnij klientom cenne zasoby
• Angażuj klientów za pomocą dowodów społecznościowych, filmów itp.

W związku z tym zobaczmy, jak możemy łatwo utworzyć i dostosować niestandardową stronę z podziękowaniem za pomocą kodu. Drodzy deweloperzy, wszystkie oczy tutaj!

Dostosuj stronę z podziękowaniami WooCommerce za pomocą kodu

Istnieją trzy sposoby dostosowania strony z podziękowaniem lub zamówienia otrzymanej strony za pomocą kodu:

1. Tworzenie przekierowania
2. Korzystanie z filtrów
3. Nadpisywanie plików szablonów

Zachowaj również ten post na temat bezpiecznego dodawania kodu do pliku otwartego w innej karcie w celach informacyjnych.

Przyjrzyjmy się szczegółowo każdemu z trzech sposobów.

Dostosowywanie strony z podziękowaniem poprzez utworzenie przekierowania

Przekierowanie można łatwo wykonać, tworząc nową wtyczkę lub otwierając plik functions.php i wpisując poniższy kod na końcu pliku.

add_action( 'template_redirect', 'sa_custom_redirect_after_purchase' );
funkcja sa_custom_redirect_after_purchase() {
	globalne $wp;
	if ( is_checkout() && !empty( $wp->query_vars['zamówienie-otrzymane']) ) {
		wp_redirect( 'https://demo.storeapps.org/woocommerce/thank-you/' );
		Wyjście;
	}
}

Oto niestandardowa strona z podziękowaniami po złożeniu zamówienia.

Przekierowanie wydaje się dobre, ale brakuje w nim ważnych rzeczy, takich jak tabela podsumowania zamówień, szczegóły rozliczeń i wysyłki oraz inne ważne informacje, które obecnie dostarcza WooCommerce.

Dostosowywanie strony z podziękowaniem za pomocą filtrów

Zamiast tworzyć stronę z podziękowaniami, możesz zmienić tytuł strony lub zmienić tekst przed informacjami o zamówieniu. W takich przypadkach możesz użyć filtrów.

Zmiana tytułu strony z podziękowaniem

add_filter( 'the_title', 'sa_title_order_received', 10, 2 );
function sa_title_order_received( $title, $id ) {
	if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
		$title = "Dziękujemy za zamówienie :)";
	}
	zwróć $tytuł;
}

WooCommerce udostępnia funkcję is_order_received_page() w pliku include/wc-conditional-functions.php. Tak wyglądałby zmieniony tytuł:

Personalizacja tytułu strony z podziękowaniami

Możesz to zrobić, aby w tytule umieścić nazwę klienta lub cokolwiek innego.

add_filter( 'the_title', 'sa_personalize_order_received_title', 10, 2 );
function sa_personalize_order_received_title( $title, $id ) {
	if ( is_order_received_page() && get_the_ID() === $id ) {
		globalne $wp;

		// Zdobądź zamówienie. Następujące wiersze są obecne w order_received() w pliku include/shortcodes/class-wc-shortcode-checkout.php
		$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 ( $ id_zamówienia > 0 ) {
			$zamówienie = wc_get_order( $order_id );
			if ( ! $order || ! hash_equals( $order->get_order_key(), $order_key ) ) {
				$zamówienie = fałsz;
			}
		}
		if ( $order instanceof WC_Order ) {
			$title = sprintf( "Jesteś niesamowity, %s!", esc_html( $order->get_billing_first_name() ) );
		}
	}
	zwróć $tytuł;
}

Będzie to wyglądać tak:

Dostosowywanie tekstu przed informacjami o zamówieniu

Domyślny tekst wyświetlany przed informacjami o zamówieniu to „Dziękujemy. Twoje zamówienie zostało odebrane”.

Ten tekst pochodzi z pliku templates/checkout/thankyou.php. Możesz zmienić ten tekst za pomocą filtrów dostępnych w WooCommerce, czyli woocommerce_thankyou_order_received_text .

add_filter( 'woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2 );
function sa_update_order_received_text( $text, $order ) {
	$text .= 'Wysłaliśmy Ci potwierdzenie zamówienia.';
	zwróć $tekst;
}

Do tego kodu zostanie dołączony tekst „Wysłaliśmy Ci potwierdzenie zamówienia w wiadomości e-mail”. do istniejącego tekstu.

Jeśli chcesz całkowicie nadpisać tekst, musisz unikać łączenia zmiennej $text .

 $text = 'Wysłaliśmy Ci potwierdzenie zakupu.';

Jeśli chcesz dodać tutaj instrukcje, które wymagają od klienta pobrania formularza, możesz to zrobić.

add_filter( 'woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2 );
function sa_change_order_received_text( $text, $order ) {
	$text = 'Wysłaliśmy Ci potwierdzenie zakupu. Pamiętaj, aby wypełnić <a href="https://demo.storeapps.org/form.pdf">ten formularz przed uczestnictwem w wydarzeniu.';
	zwróć $tekst;
}

Będzie to wyglądać tak:

Dostosowanie strony z podziękowaniem poprzez nadpisanie plików szablonów WooCommerce

WooCommerce pokazuje zawartość strony z podziękowaniami z pliku szablonu thankyou.php , który można znaleźć w folderze woocommerce/templates/checkout/.

Będziesz potrzebować trochę wiedzy na temat PHP, jeśli chcesz wybrać tę metodę, aby dostosować stronę z podziękowaniami WooCommerce.

Możesz użyć własnego szablonu, kopiując plik thankyou.php do folderu motywu w podobnej strukturze folderów.

Na przykład, jeśli używasz motywu Storefront, Twój thankyou.php powinien zostać skopiowany do:
wp-content/themes/storefront/woocommerce/checkout/ folder. Będziesz musiał utworzyć dwa foldery, „woocommerce” i „kasa”.

Gdy WooCommerce stwierdzi, że ten sam szablon jest obecny w Twoim motywie, pierwszeństwo ma szablon znajdujący się w Twoim motywie.

Weźmy przykład. Na domyślnej stronie z podziękowaniem metoda płatności jest pokazana na początku oraz w szczegółach zamówienia.

Chcemy przekazać klientowi kod kuponu na następny zakup i usunąć metodę płatności z górnej sekcji.

Poniżej znajduje się szablon thankyou.php:

<?php
if ( ! zdefiniowano( 'ABSPATH' ) ) {
	Wyjście;
}
?>
 
<div class="woocommerce-order">
 
	<?php if ( $order ): ?>

		<?php if ( $order->has_status( 'nieudane') ) : ?>

			<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( 'Niestety Twoje zamówienie nie może zostać przetworzone, ponieważ bank/sprzedawca, z którego pochodzisz, odrzucił Twoją transakcję. Spróbuj dokonać zakupu jeszcze raz.', '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( 'Zapłać', 'woocommerce') ?>
				<?php if ( is_user_logged_in() ): ?>
					<a href="<?php echo esc_url( wc_get_page_permalink( 'mojekonto' ) ); ?>" class="button pay"><?php _e( 'Moje konto', 'woocommerce' ); ?>
				<?php endif; ?>
			</p>

		<?php jeszcze : ?>
 
			<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Dziękujemy. Twoje zamówienie zostało otrzymane. Wysłaliśmy Ci wiadomość e-mail potwierdzenie zamówienia dla tej transakcji.', 'woocommerce' ), $order ); ?></p>
 
			<ul class="przegląd-zamówień-woocommerce woocommerce-thankyou-order-details order_details">
 				<li class="woocommerce-order-overview__order order">
					<?php _e( 'Identyfikator transakcji:', '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( 'format_daty' ), $order->get_date_created() ); ?></strong>
				</li>
 
				<li class="woocommerce-order-overview__total total">
					<?php _e( 'Łącznie:', 'woocommerce' ); ?>
					<strong><?php echo $order->get_formatted_order_total(); ?></strong>
				</li>
			</ul>

		<?php endif; ?>

		<p>Gratulujemy pierwszego zamówienia. Oto 15% zniżki na następne zamówienie. Użyj kodu kuponu <strong>WELCOME15</strong>, aby skorzystać z rabatu.</p>

		<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>
		<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
 
	<?php jeszcze : ?>
 
		<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Dziękujemy. Twoje zamówienie zostało otrzymane.', 'woocommerce' ), zero ); ?></p>
 
	<?php endif; ?>
 
</div>

Możesz zmienić dane wyświetlane w tabeli szczegółów zamówienia i dane klienta (po zalogowaniu).

Te pochodzą z innego pliku. WooCommerce używa funkcji woocommerce_order_details_table() dołączonej do woocommerce_thankyou hook .

Funkcja woocommerce_order_details_table() jest zdefiniowana w pliku include/wc-template-functions.php.

Strona z podziękowaniami to zbiór czterech różnych plików szablonów:

1. szablony/zamówienie/dziekujemy.php
2. szablony/zamówienie/szczegóły-zamówienia.php
3. szablony/zamówienie/szczegóły-zamówienia.php
4. szablony/zamówienie/szczegóły-zamówienia-customer.php

Gdy już wiesz, jakie dane pochodzą z którego szablonu, wystarczy skopiować odpowiedni szablon do folderu motywu i to wszystko.

Zobaczmy teraz, jak dostosować stronę z podziękowaniami WooCommerce do odmiany produktu.

Jak przekierować do niestandardowej strony z podziękowaniem na podstawie identyfikatora odmiany za pomocą haka?

add_action( 'woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1 ); 
function sa_redirect_product_attribute_based( $order_id ) {
	$zamówienie = wc_get_order( $order_id );
	if ( $order instanceof WC_Order ) {
		foreach( $order->get_items() as $item ) {
			// Dodaj poniżej dowolny identyfikator odmiany
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				// zmień poniżej na adres URL, na który chcesz wysłać klienta
				wp_redirect( 'https://demo.storeapps.org/custom-thank-you/' );
			}
		}
	}
}

Wydrukuj tekst na stronie z podziękowaniami na podstawie atrybutu produktu

Rozszerzając powyższy przykład, możesz również wyświetlić dowolny niestandardowy tekst na stronie z podziękowaniami WooCommerce na podstawie identyfikatora odmiany. Oto kod na to:

add_action( 'woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1 ); 
funkcja sa_show_custom_text_by_variation_id( $order_id ) {
	$zamówienie = wc_get_order( $order_id );
	if ( $order instanceof WC_Order ) {
		foreach( $order->get_items() as $item ) {
			// Dodaj tutaj dowolny identyfikator odmiany, który chcesz. Moje atrybuty to Kolor, Rozmiar
			if ( !empty( $item[ 'variation_id' ] ) && 446 == $item[ 'variation_id' ] ) {
				echo '<p>Nie wahaj się skontaktować z nami, jeśli chcesz wymienić koszulkę na inny rozmiar.</p>';
			}
		}
	}
}

Po dodaniu kodu strona z podziękowaniem będzie wyglądać tak:

To całkiem sporo fragmentów kodu. Jeśli nie interesujesz się kodowaniem i chcesz prostego rozwiązania, przeczytaj poniżej, aby odkryć potężną wtyczkę.

Jak skonfigurować niestandardową stronę z podziękowaniem dla produktu i całej witryny za pomocą wtyczki?

Dostosowywanie strony z podziękowaniem obejmuje wiele elementów. Wydaje się, że to nie takie proste. Mały błąd, który popełnisz podczas dodawania fragmentu kodu, i wszystko się psuje.

Dlatego jeśli chcesz bardziej skupić się na sprzedaży i marketingu oraz oszczędzić sobie kłopotów z kodowaniem, sugerujemy skorzystanie z niestandardowej strony z podziękowaniem dla wtyczki WooCommerce.

Pomaga skonfigurować niestandardową stronę z podziękowaniami dla każdego produktu, a także dla całej witryny. Wkrótce dodamy obsługę odmian produktów.

Strona z podziękowaniami zoptymalizowana za pomocą tej wtyczki pozwala sprzedawać (za pomocą inteligentnych ofert), budować listę e-mailową, promować swoje oferty, zbierać opinie, wyświetlać wiadomości wideo, kupony i robić inne rzeczy.

Twoja domyślna strona z podziękowaniami WooCommerce zmieni się w potężne narzędzie marketingowe, takie jak to:

Więcej funkcji wtyczek :

• Cztery gotowe, wysoce konwertujące szablony stron z podziękowaniami, które pomogą Ci zacząć z hukiem.
• Przekieruj użytkowników po zakupie/płatności do linków partnerskich, linków stron trzecich lub zasobów.
• Daje możliwość zbudowania strony z podziękowaniami zgodnie z ulubionym motywem, wtyczkami i edytorami stron oraz zaprojektowania strony tak, jak chcesz.

Wypróbuj demo na żywo

Ostatnie słowa

Mamy nadzieję, że ten artykuł pomógłby ci zrozumieć znaczenie dostosowywania niestandardowej strony z podziękowaniami oraz dobre zrozumienie, jak to zrobić za pomocą kodu i wtyczki.

Korzystanie z tej małej strony może być doskonałą okazją do zwiększenia sprzedaży, niezależnie od tego, jak normalnie może nam się to wydawać.