Cómo configurar la redirección de WooCommerce después del pago

Publicado: 2021-05-11

¿Quieres redirigir a los clientes a una página de agradecimiento personalizada? Cuando los clientes completan sus pedidos en WooCommerce, son redirigidos a la página Pedido recibido . Esta página tiene un papel increíblemente importante que desempeñar. En esta publicación, le muestro cómo configurar la redirección de WooCommerce después del pago, paso a paso y personalizar la página del pedido recibido.

Sin embargo, la página realmente no entrega. Es posible que desee redirigirlos a una página de agradecimiento personalizada.

Personalizar la página de agradecimiento crea una experiencia de compra única para sus clientes. Por eso es importante tener una página de agradecimiento bellamente diseñada que esté personalizada para su producto específico.

También contribuye en gran medida a que su tienda sea única en comparación con sus competidores. También puede incluir el servicio posventa y administrar los detalles de soporte en esta página.

¡Esto es esencial si desea que su tienda en línea genere más ventas y aumente el tráfico!

Al final de este breve tutorial, podrá redirigir a los clientes a una página personalizada mediante programación. También compartiremos algunos fragmentos de código para crear una nueva página de agradecimiento y sobrescribir la página existente.

El objetivo principal de este tutorial es ayudar a los desarrolladores a comprender cómo es muy fácil personalizar páginas utilizando fragmentos de código o sobrescribiendo plantillas de WooCommerce.

¿Qué necesita para redirigir a los usuarios a una página de agradecimiento personalizada?

Antes de continuar, también debe crear un tema secundario. Esto asegurará que sus cambios no se pierdan durante una actualización.

Es importante tener en cuenta que utilizaremos fragmentos de código PHP personalizados en este tutorial. Te hemos explicado todos los pasos que debes seguir, que te facilitarán el trabajo.

Este tutorial también asume que tiene una instalación de WordPress en funcionamiento, y WooCommerce se agrega además de eso.

Veamos cómo puedes lograr esto.

1. Redirigir a los clientes a una página de agradecimiento personalizada

En esta sección, utilizaremos un fragmento de código PHP personalizado para redirigir a los usuarios a una página de bienvenida después de que hayan completado su compra.

Las páginas de bienvenida son excelentes formas de vender un producto, incluir referencias o educar a los clientes sobre su producto. También puede incluir descuentos o cupones en esta página para atraer a clientes nuevos y leales.

a) Pasos para redirigir a los clientes después del pago en WooCommerce

Aquí los pasos que debe seguir para redirigir a los usuarios a una página personalizada:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que redirigirá a los clientes después del pago.
Agregue el siguiente código al archivo 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-&amp;gt;has_status( 'failed' ) ) {

 wp_safe_redirect( $url );

exit;

 }

}

Este es el resultado:

Cómo funciona el código

El fragmento de código redirige al cliente a una página personalizada después de que el usuario haya completado una compra.

Comprueba si el usuario ha completado su compra y lo redirige a la URL. Recuerde reemplazar la URL de la página adecuada para que este código funcione.

Su página personalizada debe estar bellamente diseñada para mejorar la experiencia del usuario en su sitio.

b) Sobrescribir plantillas de WooCommerce para configurar una página de agradecimiento de WooCommerce

Puede configurar fácilmente una página de agradecimiento personalizada sobrescribiendo las plantillas de WooCommerce. Debe usar el enlace de redirección de plantilla y una función de devolución de llamada con la URL de redirección.

Estos son los sencillos pasos que debe seguir:

Lo primero es comprobar si el usuario está en la página de pago, en la página de pedidos o en la página de pedidos recibidos antes de crear la página de redireccionamiento personalizada. Usaremos la función template_redirect(). Después de eso, agregue el enlace de acción template_redirect como se muestra a continuación:

 add_action('template_redirect', 'your_callback_function');

El siguiente paso es crear la función de devolución de llamada a la que se hace referencia en el enlace de redirección de plantilla anterior. Sin embargo, es importante tener en cuenta que el nombre en la función de devolución de llamada y el gancho deben coincidir.
Para agregar la página a la que desea que se redirija al usuario después de un pago exitoso, debemos usar la función wp_redirect() en la función de devolución de llamada. Recomendamos agregar una salida después de la función wp_redirect. Esto ayudará a evitar problemas de redirección.
Para insertar el código, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas , busque el archivo de funciones del tema donde agregaremos la función.
Guarde los cambios o actualice su tema functions.php o el archivo del complemento.

Eso es todo lo que necesitas hacer. Ahora ha creado con éxito la redirección a su página preferida después de que un usuario complete su compra.

2. Personalización de la página de agradecimiento de WooCommerce con filtros

En lugar de crear una página de agradecimiento personalizada, puede personalizar la página existente. Para lograrlo, seremos ganchos de filtro y acción.

Los ganchos de acción le permiten insertar código personalizado en varios puntos. Los ganchos de filtro, por otro lado, le permiten manipular y devolver una variable, que pasa.

En esta sección, usaremos filtros para cambiar el título, personalizar el título y cambiar el texto antes de la información del pedido.

También le mostraremos cómo puede recopilar información adicional de sus clientes creando un formulario de encuesta. También le mostraremos cómo puede enviar y procesar una solicitud AJAX para el formulario.

a) Cambiar el título de la página de agradecimiento

WooCommerce proporciona la función is_order_received_page() en el archivo includes/wc-conditional-functions.php. Usaremos esta función para cambiar el título de la página.

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que cambiará el título de la página de agradecimiento.
Agregue el siguiente código al archivo php :

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

function njengah_thank_you_title( $old_title ){

return 'You\'re awesome!';

}

Este es el resultado:

b) Personalizar el Título

Puede mejorar el título de la página "Gracias". Puede agregar detalles como el nombre del cliente o cualquier otra cosa.

Para lograr esto, estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que personalizará el título de la página de agradecimiento.
Agregue el siguiente código al archivo 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() &amp;amp;&amp;amp; 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&amp;nbsp; = apply_filters( 'woocommerce_thankyou_order_id', absint( $wp-&amp;gt;query_vars['order-received'] ) );

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

if ( $order_id &amp;gt; 0 ) {

$order = wc_get_order( $order_id );

if ( $order-&amp;gt;get_order_key() != $order_key ) {

$order = false;

}

}

if ( isset ( $order ) ) {

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

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

}

}

return $title;

}

Este es el resultado:

c) Cambiar el texto antes de la información del pedido

De forma predeterminada, el texto antes de la información del pedido es “Gracias. Tu orden ha sido recibida." el texto se muestra en la página de agradecimiento. Viene del archivo templates/checkout/thankyou.php.

Hay filtros disponibles en WooCommerce que te permiten cambiar este texto: woocommerce_thankyou_order_received_text.

Para cambiarlo, estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema donde agregaremos la función que personalizará el título de la página de agradecimiento.
Agregue el siguiente código al archivo 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;

}

Recuerda que puedes añadir tu propio texto aquí. Este es el resultado:
Alternativamente, si desea que el cliente descargue un formulario, aquí es cuando se pueden agregar las instrucciones. Puede proporcionarles un enlace personalizado donde puedan descargar su producto. Para lograr esto, agregue el siguiente código en el archivo 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 &amp;lt;a href="http://example.com/some-form.pdf"&amp;gt;this form&amp;lt;/a&amp;gt; before attending the event';

return $new_str;

}

Este es el resultado:

3. Recopilar detalles adicionales

Es posible recopilar información adicional del usuario. Por ejemplo, puede pedirles que califiquen su experiencia de usuario.

Si desea lograr esto, debe crear un formulario. También debe enviar y procesar una solicitud AJAX para que se registre en el back-end.

Echemos un vistazo a los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema/

3. En primer lugar, tenemos que añadir un formulario. Si desea que aparezca justo después del título, debe usar el gancho woocommerce_thankyou_order_received_text.

Agregue el siguiente fragmento de código para agregar un formulario de encuesta:

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

}

El siguiente paso es enviar la solicitud AJAX. Para hacer esto, agregue el siguiente código al mismo archivo:


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

}

Este es el resultado:
Después de eso, necesitamos procesar la solicitud AJAX agregando el siguiente código al mismo archivo:

add_action('wp_ajax_collect_feedback', 'njengah_thankyou_ajax'); // wp_ajax_{ACCIÓN}

add_action('wp_ajax_nopriv_collect_feedback', 'njengah_thankyou_ajax');

función njengah_gracias_ajax(){

// control de seguridad

check_ajax_referer('gracias'.$_POST['order_id'], 'gracias_nonce');

if( $pedido = wc_get_order( $_POST['order_id'] ) ) {

$nota = $pedido->get_formatted_billing_full_name() . 'piensa que la tienda es'. $_POST['me gusta'] . '.';

$pedido->add_order_note( $nota, 0, verdadero);

}

morir();

}

Este es el resultado en el back-end:

Nota

Conclusión

A estas alturas, debería poder redirigir a los clientes a una página personalizada después del pago. También hemos compartido cómo puede sobrescribir la plantilla para agregar diferentes elementos en la página de agradecimiento.

Debe ser muy creativo al editar esta página para fortalecer su tasa de retención.

Sin embargo, siempre debe tener cuidado al editar el archivo functions.php. Si comete un error, se mostrará un error.

También puede usar un complemento de creación de páginas para personalizar su página de agradecimiento. Debes mantenerlo relevante, tal vez incluyendo un video del dueño de la tienda recomendando un producto.

Esto atraerá a sus clientes y los motivará a comprar más productos en su tienda.

Esperamos que este tutorial haya ayudado a resolver su problema.