Cómo personalizar la página de agradecimiento de WooCommerce con código
Publicado: 2022-09-15El aspecto más importante de una página de agradecimiento exitosa es asegurarse de que la gente la vea. No necesitas nada sofisticado o complicado. Solo necesita causar una buena primera impresión al destacarse del resto del sitio.
El propósito de este artículo es brindarle un tutorial general sobre cómo personalizar la página de agradecimiento de WooCommerce o la página de pedido recibido usando código.
¿Por qué personalizar la página de agradecimiento de WooCommerce?
La página de agradecimiento le brinda una forma de mantenerse en contacto con sus clientes después de su compra.
Puede pasar por alto la importancia de la confirmación del pedido o la página de agradecimiento en su tienda en línea, pero en realidad es una parte crucial del proceso de venta.
La página de agradecimiento predeterminada de WooCommerce es aburrida y un callejón sin salida para los clientes. Los clientes están confundidos en cuanto a lo que sigue.
En cambio, si lo personaliza, puede:
- Añadir instrucciones de incorporación, próximos pasos...
- Promocionar productos relacionados a través de ventas cruzadas y ventas adicionales
- Utilice cupones para fomentar la repetición de compras
- Proporcionar recursos valiosos a los clientes.
- Involucre a los clientes con pruebas sociales, videos, etc.
A la luz de eso, veamos cómo podemos crear y personalizar fácilmente una página de agradecimiento personalizada usando código. Estimados desarrolladores, ¡todos los ojos aquí!
Personaliza la página de agradecimiento de WooCommerce con código
Hay tres formas de personalizar la página de agradecimiento o la página de pedido recibido usando código:
- Crear una redirección
- Usar filtros
- Sobrescribir archivos de plantilla
Además, mantenga esta publicación sobre cómo agregar código de manera segura al archivo abierto en otra pestaña como referencia.
Veamos cada una de las tres formas en detalle.
Personalización de la página de agradecimiento creando una redirección
Es simple hacer la redirección creando un nuevo complemento o abriendo el archivo functions.php e ingresando el siguiente código al final del archivo.
add_action('template_redirect', 'sa_custom_redirect_after_purchase');
función sa_custom_redirect_after_purchase() {
global $wp;
if ( is_checkout() && !empty( $wp->query_vars['order-received'] ) ) {
wp_redirect('https://demo.storeapps.org/woocommerce/thank-you/');
salida;
}
}
Aquí está la página de agradecimiento personalizada después de realizar un pedido.
La redirección parece buena, pero faltan cosas importantes como la tabla de resumen de pedidos, los detalles de facturación y envío y otra información importante que WooCommerce proporciona actualmente.
Personalización de la página de agradecimiento usando filtros
En lugar de crear una página de agradecimiento, es posible que desee cambiar el título de la página o cambiar algún texto antes de la información del pedido. En tales casos, puede utilizar filtros.
Cambiar el título de la página de agradecimiento
add_filter('the_title', 'sa_title_order_received', 10, 2);
función sa_title_order_received( $título, $id ) {
if ( function_exists( 'is_order_received_page' ) && is_order_received_page() && get_the_ID() === $id ) {
$titulo = "Gracias por su pedido :)";
}
devolver $título;
}
WooCommerce proporciona la función is_order_received_page() en el archivo includes/wc-conditional-functions.php. Así es como aparecería el título modificado:
Personalización del título de la página de agradecimiento
Puede hacer esto para incluir el nombre del cliente en el título o cualquier otra cosa.
add_filter('the_title', 'sa_personalize_order_received_title', 10, 2);
función sa_personalize_order_received_title ($título, $id) {
if ( is_order_received_page() && get_the_ID() === $id ) {
global $wp;
// Obtener el pedido. Las siguientes líneas están presentes en order_received() en el archivo 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_pedido > 0 ) {
$pedido = wc_get_order( $order_id );
if ( ! $pedido || ! hash_equals( $pedido->get_order_key(), $pedido_clave ) ) {
$pedido = falso;
}
}
if ($instancia de pedido de WC_Order) {
$title = sprintf( "¡Eres genial, %s!", esc_html( $order->get_billing_first_name() ) );
}
}
devolver $título;
}
Esto se verá así:
Personalización del texto antes de la información del pedido
El texto predeterminado que se muestra antes de la información del pedido es “Gracias. Tu orden ha sido recibida.".
Este texto proviene del archivo templates/checkout/thankyou.php. Puede cambiar este texto usando un filtro disponible en WooCommerce que es woocommerce_thankyou_order_received_text .
add_filter('woocommerce_thankyou_order_received_text', 'sa_update_order_received_text', 10, 2);
función sa_update_order_received_text( $texto, $pedido ) {
$text .= 'Le hemos enviado por correo electrónico el recibo del pedido.';
devolver $texto;
}
Este código agregará el texto "Le hemos enviado por correo electrónico el recibo del pedido". al texto existente.
Si desea sobrescribir el texto por completo, debe evitar concatenar la variable $texto .
$text = 'Le hemos enviado por correo electrónico el recibo de compra.';
Si desea agregar instrucciones aquí que requieren que el cliente descargue un formulario, también puede hacerlo.
add_filter('woocommerce_thankyou_order_received_text', 'sa_change_order_received_text', 10, 2);
function sa_change_order_received_text( $texto, $pedido ) {
$text = 'Le hemos enviado por correo electrónico el recibo de compra. Asegúrese de completar <a href="https://demo.storeapps.org/form.pdf">este formulario antes de asistir al evento.';
devolver $texto;
}
Esto se verá así:
Personalización de la página de agradecimiento sobrescribiendo los archivos de plantilla de WooCommerce
WooCommerce muestra el contenido de la página de agradecimiento del archivo de plantilla thankyou.php que se puede encontrar en la carpeta woocommerce/templates/checkout/.
Necesitará algunos conocimientos de PHP si desea elegir este método para personalizar la página de agradecimiento de WooCommerce.
Puede usar su propia plantilla copiando el archivo thanksyou.php a la carpeta de su tema en una estructura de carpetas similar.
Por ejemplo, si está utilizando el tema Storefront, entonces su thanksyou.php debe copiarse en:
wp-content/themes/storefront/woocommerce/checkout/ carpeta. Deberá crear las dos carpetas, 'woocommerce' y 'checkout'.
Cuando WooCommerce encuentra que la misma plantilla está presente en su propio tema, se le da prioridad a la plantilla presente en su tema.
Tomemos un ejemplo. En la página de agradecimiento predeterminada, el método de pago se muestra al principio y en los detalles del pedido.
Queremos proporcionar un código de cupón al cliente para su próxima compra y eliminar el método de pago de la sección superior.
A continuación se muestra la plantilla de gracias.php:
<?php
if ( ! definido( 'ABSPATH' ) ) {
salida;
}
?>
<div class="pedido de woocommerce">
<?php si ($pedido): ?>
<?php if ( $pedido->has_status( 'fallido' ) ) : ?>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php _e( 'Desafortunadamente, su pedido no se puede procesar porque el banco/comerciante de origen rechazó su transacción. Intente realizar la compra de nuevo.', 'woocommerce' ); ?></p>
<p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions">
<a href="<?php echo esc_url( $pedido->get_checkout_pago_url() ); ?>" class="botón pagar"><?php _e( 'Pagar', 'woocommerce' ) ?>
<?php si (is_user_logged_in()) : ?>
<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php _e( 'Mi cuenta', 'woocommerce' ); ?>
<?php endif; ?>
</p>
<?php más: ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Gracias. Hemos recibido su pedido. Le hemos enviado por correo electrónico recibo de pedido para esta transacción.', 'woocommerce' ), $order ); ?></p>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-detalles order_details">
<li class="woocommerce-order-overview__order order">
<?php _e( 'ID de transacción:', 'woocommerce' ); ?>
<strong><?php echo $pedido->get_order_number(); ?></fuerte>
</li>
<li class="woocommerce-order-overview__date fecha">
<?php _e( 'Fecha:', 'woocommerce' ); ?>
<strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></fuerte>
</li>
<li class="woocommerce-order-overview__total total">
<?php _e( 'Total:', 'woocommerce' ); ?>
<strong><?php echo $pedido->get_formatted_order_total(); ?></fuerte>
</li>
</ul>
<?php endif; ?>
<p>Felicitaciones por su primer pedido. Aquí tienes un 15% de descuento en tu próximo pedido. Utilice el código de cupón <strong>WELCOME15</strong> para aprovechar el descuento.</p>
<?php do_action( 'woocommerce_thankyou_' . $pedido->get_pago_método(), $pedido->get_id() ); ?>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<?php más: ?>
<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', __( 'Gracias. Hemos recibido su pedido', 'woocommerce' ), nulo ); ?></p>
<?php endif; ?>
</div>
Es posible que desee cambiar los datos que se muestran en la tabla de detalles del pedido y los detalles del cliente (cuando haya iniciado sesión).
Esos vienen de otro archivo. WooCommerce usa una función woocommerce_order_details_table() que se adjunta al woocommerce_thankyou hook .
La función woocommerce_order_details_table() se define en el archivo include/wc-template-functions.php.
La página de agradecimiento es una colección de cuatro archivos de plantilla diferentes:
- plantillas/pago/gracias.php
- plantillas/pedido/pedido-detalles.php
- plantillas/pedido/pedido-detalles-item.php
- plantillas/pedido/pedido-detalles-cliente.php
Una vez que sepa qué datos provienen de qué plantilla, solo necesita copiar la plantilla correcta en la carpeta de su tema y eso es todo.
Ahora, veamos cómo personalizar la página de agradecimiento de WooCommerce para una variación del producto.
¿Cómo redirigir a una página de agradecimiento personalizada basada en la ID de variación usando un gancho?
add_action('woocommerce_thankyou', 'sa_redirect_product_attribute_based', 10, 1);
función sa_redirect_product_attribute_based ($order_id) {
$pedido = wc_get_order( $order_id );
if ($instancia de pedido de WC_Order) {
foreach( $pedido->get_items() as $item ) {
// Agregue cualquier ID de variación que desee a continuación aquí
if ( !empty( $elemento[ 'variation_id' ] ) && 446 == $elemento[ 'variation_id' ] ) {
// cambie a continuación a la URL a la que desea enviar a su cliente
wp_redirect('https://demo.storeapps.org/custom-thank-you/');
}
}
}
}
Imprimir texto en la página de agradecimiento según el atributo del producto
Ampliando el ejemplo anterior, también puede mostrar cualquier texto personalizado en la página de agradecimiento de WooCommerce según la identificación de variación. Aquí está el código para ello:
add_action('woocommerce_thankyou', 'sa_show_custom_text_by_variation_id', 10, 1);
función sa_show_custom_text_by_variation_id ($ order_id) {
$pedido = wc_get_order( $order_id );
if ($instancia de pedido de WC_Order) {
foreach( $pedido->get_items() as $item ) {
// Agregue cualquier ID de variación que desee a continuación aquí. Mis atributos son Color, Tamaño
if ( !empty( $elemento[ 'variation_id' ] ) && 446 == $elemento[ 'variation_id' ] ) {
echo '<p>No dudes en comunicarte con nosotros en caso de que quieras cambiar la camiseta por una talla diferente.</p>';
}
}
}
}
Cuando agregue el código, la página de agradecimiento se vería así:
Eso es un montón de fragmentos de código aquí. Si no le gusta la codificación y desea una solución fácil, lea a continuación para descubrir un poderoso complemento.
¿Cómo configurar una página de agradecimiento personalizada por producto y en todo el sitio usando un complemento?
Personalizar la página de agradecimiento involucra muchos elementos. No es tan fácil parece que sí. Un pequeño error que comete al agregar el fragmento de código y todo se vuelve loco.
Por lo tanto, si desea concentrarse más en sus ventas y marketing y ahorrarse las molestias de la codificación, le sugerimos que utilice el complemento Página de agradecimiento personalizada para WooCommerce.
Le ayuda a configurar una página de agradecimiento personalizada por producto y en todo el sitio. Pronto agregaremos soporte para la variación del producto.
Una página de agradecimiento optimizada con este complemento le permite aumentar las ventas (usando Smart Offers), crear una lista de correo electrónico, promocionar sus ofertas, recopilar comentarios, mostrar mensajes de video, cupones y hacer otras cosas.
Su página de agradecimiento predeterminada de WooCommerce se convertirá en una poderosa herramienta de marketing como esta:
Más características del complemento :
- Cuatro plantillas de página de agradecimiento listas para usar y de alta conversión para ayudarlo a comenzar con una explosión.
- Redirigir a los usuarios después de la compra/pago a enlaces de afiliados, enlaces de terceros o recursos.
- Le brinda la oportunidad de crear la página de agradecimiento según su tema, complementos y editores de página favoritos, y diseñar la página de la manera que desee.
Pruebe la demostración en vivo
Ultimas palabras
Con suerte, este artículo lo habría ayudado a comprender la importancia de personalizar una página de agradecimiento personalizada junto con una buena comprensión de cómo hacerlo a través de un código y un complemento.
El uso de esta pequeña página puede ser una excelente oportunidad para aumentar las ventas, por muy normal que nos parezca.