Hosting WordPress Webempresa

Personalizar Pagina de Gracias en WooCommerce

por | Oct 25, 2022 | WooCommerce

Personalizar Pagina de Gracias en Woocommerce

Uno de los puntos por los que pasa un determinado usuario al tramitar una compra es la pagina de gracias, la cual nos muestra un pequeño enunciado y los detalles de nuestra orden. Mencionada pagina suele ser omitida sin que se considere el valor que puede llegar a tener para las conversiones dentro de nuestra tienda en linea.

A continuación, vamos a ver mediante diferentes situaciones como podemos personalizar los textos de nuestra pagina de gracias en WooCommerce o en definitiva utilizar una pagina con una estructura creada directamente por nosotros.

  Personalizar textos en la pagina de gracias en WooCommerce


Al hacer un pedido desde WooCommerce el aspecto convencional de la pagina de gracias es el siguiente:

personalizar página de gracias WooCommerce

A continuación, vamos a realizar lo siguiente:

  • Cambiar el titulo de la pagina de gracias de WooCommerce
  • Agregar un enunciado personalizado con un enlace
  • Cambiar el texto correspondiente a “Gracias, Tu pedido ha sido recibido” de WooCommerce

Estos ajustes van a ser posibles por medio de unos fragmentos de código los cuales vamos a agregarlos de la siguiente manera.

Por medio de la edición del archivo functions.php que esta ubicado en nuestra cuenta de hosting dentro de nuestro cPanel/WePanel en la ruta Administrador de archivos -> public_html -> wp-content -> Themes -> Tu_Tema (se recomienda que sea en un tema hijo de WordPress para no perder ajustes tras una actualización en el tema principal).

En CPanel

archivos cpanel

En WePanel

archivos wepanel

Por medio de un plugin que nos permite agregar snippets en WordPress de forma aislada códigos específicos llamado Code Snippets:

Code Snippets

Cada código corresponde a una función especifica, la cual su contenido vamos a adaptarlo a nuestras necesidades

  Cambiar el titulo de la pagina de gracias en WooCommerce


Para cambiar el titulo de la pagina de gracias en WooCommerce vamos a utilizar el siguiente fragmento de código:


add_filter( 'the_title', 'we_gracias_titulo', 10, 2 );
function we_gracias_titulo( $title, $id = null ) {
    if ( function_exists( 'is_order_received_page' ) &&
         is_order_received_page() && get_the_ID() === $id ) {
        $title = "Tu pedido ha sido recibido";
    }
    return $title;
}

El cual podemos modificar los textos que están incluidos en las comillas en el apartado de “title”.

modificar título página de gracias WooCommerce

  Agregar un enunciado personalizado con un enlace


Para agregar un enunciado personalizado con un enlace vamos a utilizar el siguiente fragmento de código:


add_action('woocommerce_before_thankyou', 'we_gracias_titulo_nuevo',10,1);
function we_gracias_titulo_nuevo(){
	echo "<h3> Para mas informacion sobre tu pedido <a href='#'>Contactanós</a></h3>";
}

El cual podemos modificar el código HTML que esta dentro de las comillas del “echo”.

  Cambiar el texto correspondiente a “Gracias, Tu pedido ha sido recibido”


Para cambiar el texto que corresponde a “Gracias, Tu pedido ha sido recibido” en WooCommerce vamos a utilizar el siguiente fragmento de código:


add_filter( 'woocommerce_thankyou_order_received_text', 'we_gracias_texto', 10, 2 );
function we_gracias_texto( $text, $order ){
	return 'Hola '.  $order->get_billing_first_name() . ', los detalles de tu pedido son los siguientes:';
}

El cual podemos modificar los textos que están incluidos en las comillas simples en el apartado de “return”, además estamos invocando el nombre del usuario en el texto desde el codigo “$order->get_billing_first_name()” esto puede omitirse.

  Resultados finales


Luego de haber agregado los respectivos fragmentos de código vamos a tener un resultado como el siguiente:

página de gracias personalizada en WooCommerce

Recordemos que cada uno de los fragmentos puede utilizarse de forma independiente para cada caso que quieran modificar o agregar texto.

  Pagina de gracias personalizada


Si bien ya hemos podido ver como modificar y agregar textos a la pagina convencional de gracias que presenta WooCommerce también podemos por medio de un fragmento de código hacer una redirección para que en lugar de ver la pagina de gracias que regularmente vemos pues el usuario sea redireccionado a una pagina personalizada.

Debemos tener en cuenta que esta pagina ya debe estar creada y su contenido va a ser el que gustes

Vamos a agregar el siguiente fragmento de código para implementar nuestra pagina de gracias personalizada.


add_action( 'template_redirect', 'we_nuega_gracias' );
function we_nuega_gracias() {
	global $wp;
	if ( is_checkout() && ! empty( $wp->query_vars['order-received'] ) ) {
		wp_redirect( 'https://webempresa.com' );
		exit;
	}
}

En este código vamos a cambiar el valor de la URL dentro del elemento “wp_redirect” por el enlace que corresponda a nuestra pagina personalizada de gracias en WooCommerce que debe estar previamente creada.

redirección página de gracias

  Pagina de gracias personalizada con plugin


Si en tu caso no quieres verte involucrado con agregar códigos siempre hay una alternativa por medio de plugins y este caso no es la excepción,

Desde el apartado de plugins vamos a buscar e instalar “Thanks Redirect for WooCommerce”.

Thanks Redirect for WooCommerce

Una vez instalado vamos a tener disponible la opcion del plugin desde WooCommerce-> Thankls Redirect o como también desde Woocommerce-> Productos-> Thanks Redirect.

Desde este apartado tenemos disponible las siguientes opciones

  • Global Redirect Settings: Si se habilita esta opción todos los pedidos realizados seran redireccionados a las URL estipuladas en los próximos campos
  • Thanks Redirect URL: Definir enlace para la pagina de gracias
  • Order Failure Redirect URL: Definir enlace para la pagina cuando falla una orden

página de gracias WooCommerce redireccionada

Lo mas interesante de este plugin es que además de brindarnos la capacidad de una redirección extra la cual se trata de si sucede un error en la orden y es marcada como fallida, no es necesario que configuremos las opciones globales si en su lugar queremos configurar distintas paginas de gracias por producto, Si, esto es posible, vamos a echarle un vistazo.

Desde la vista de edición del producto vamos a poder apreciar que tenemos dos campos extras donde uno corresponde a la redirección a la pagina de gracias y otro a la redirección a la pagina de error si la orden fue fallida.

campos extra página de gracias WooCommerce

  Conclusiones


Hemos podido ver como podemos o bien modificar de forma puntual el contenido de la pagina de gracias por defecto en WooCommerce o en su lugar utilizar una pagina personalizada, además con el uso de plugins prácticos como el utilizado en el ejemplo podemos expandir aun mas la customización de el flujo que va a tener un usuario acorde al producto que vaya a comprar.

Si deseas saber mas al respecto de como crear tu tienda con WooCommerce e implementar ajustes a medida como el que hemos visto en este articulo te recomiendo echarle un vistazo a los siguientes enlaces que seguro serán de tu interés.

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa