¿Te gustaría dar un aspecto diferente a la página de gracias de WooCommerce, o incluso cambiarla completamente?, en este artículo veremos cómo editar el título, el texto o incluso cambiar por completo esta página que tiene por defecto WooCommerce.
Resultado Final
Como resultado final queremos cambiar algunos textos que vienen por defecto y agregar secciones.
Cambiar el título de la página de gracias
WooCommerce tiene un Hook dinámico para las páginas principales de la tienda que crea el plugin, en este caso nos interesa la página de gracias, por lo tanto el hook a utilizar es woocommerce_endpoint_order-received_title.
En el siguiente ejemplo cambiamos el título de la página y además agregamos el nombre del usuario.
add_filter( 'woocommerce_endpoint_order-received_title', 'dcms_thank_you_title');
function dcms_thank_you_title(){
$current_user = wp_get_current_user();
$first_name = esc_html( $current_user->user_firstname );
return '¡'. $first_name. ' tu orden fué recibida!';
}
Cambiar el texto de la página de gracias
La página por defecto tiene un texto bajo el título, podemos cambiarlo usando el Hook woocommerce_thankyou_order_received_text, con el siguiente código cambiamos ese texto y además agregamos el nombre del usuario.
add_filter( 'woocommerce_thankyou_order_received_text', 'dcms_thank_you_text', 10, 2 );
function dcms_thank_you_text( $text, $order ){
return $order->get_billing_first_name() . ' te mostramos detalles de tu orden:';
}
Redireccionar la página de gracias
Si quieres mostrar una página diferente a la que viene por defecto con WooCommerce puedes evaluar hacer una redirección hacia otra url que tenga una página de gracias personalizada, lo haces con el siguiente código.
add_action( 'template_redirect', 'dcms_redirect_after_purchase' );
function dcms_redirect_after_purchase() {
global $wp;
if ( is_checkout() && ! empty( $wp->query_vars['order-received'] ) ) {
wp_redirect( 'http://tudominio.com/tu_pagina_de_gracias' );
exit;
}
}
Usar lo hooks de la página de gracias
La página de gracias de WooCommerce tienes algunos hooks, incluso alguno de ellos ya lo hemos usado en las secciones anteriores, puedes revisar todos los hooks que tienes disponible revisando el código del archivo: wp-content/plugins/woocommerce/templates/checkout/thankyou.php
En el siguiente ejemplo usaremos el hook woocommerce_before_thankyou para agregar una nueva sección.
add_action('woocommerce_before_thankyou', 'dcms_before_thankyou',10,1);
function dcms_before_thankyou(){
echo "<h3> 👉 Llena el siguiente formulario <a href='#' >Formulario</a></h3>";
}
Sobrescribir la página de gracias
En un artículo anterior, habíamos visto cómo sobrescribir los archivos de plantilla de WooCommerce, en este caso lo haremos con el archivo thankyou.php.
Lo primero sería ubicar ese archivo en la siguiente ruta:
wp-content/plugins/woocommerce/templates/checkout/thankyou.php
Copia ese archivo a la siguiente ruta
wp-content/themes/TUTHEME/woocommerce/checkout/thankyou.php
Una vez tengas el archivo como parte de los archivos de tu theme entonces puedes hacer todos los cambios que requieras.
Conclusión
Como has podido comprobar, puedes personalizar la página de gracias de WooCommerce directamente a través de código, ya sea haciendo redirecciones, usando Hoooks o sobrescribiendo el archivo que genera esta página.
¿Aún con dudas?, en el siguiente artículo se detallan los puntos anteriores.
Artículos Relacionados
(3 votos, promedio: 4,67 de 5)
Cargando...