• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Personalizar página de gracias de WooCommerce

Personalizar página de gracias de WooCommerce

Personalizar página de gracias de WooCommerce

[ 18 febrero 2021 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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.

Modificación de página de gracias WooCommerce

 

El código de los Hooks, que veremos posteriormente, puedes insertarlo como parte del archivo functions.php de tu tema hijo, o usando algún plugin de Snippets.

 

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.

Si la ruta no existe crea las carpetas correspondientes /woocommerce/checkout
Es recomendable que uses un tema hijo para realizar esta sobrescritura.

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • agregar Tabs personalizados en WooCommerceAgregar Tabs personalizados en WooCommerce sin plugins
  • Modificar elementos en página de producto de WooCommerceModificar elementos en página de producto de WooCommerce
  • Personalizar plantilla para una categoría específica en WoocommercePersonalizar plantilla para una categoría específica en Woocommerce
  • Modificar una plantilla de WoocommerceCómo modificar una plantilla de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 4,67 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar enlace leer más en WordPress

Usar el Inspector de código para modificar un theme WordPress

Asignar entradas a una categoría de acuerdo al título en WordPress

5 tipos de complementos de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados