Cómo editar la página de agradecimiento de WooCommerce mediante programación

¿Quieres personalizar la página de agradecimiento en tu tienda? En esta guía, le mostraremos diferentes formas de editar la página de agradecimiento de WooCommerce mediante programación .

¿Por qué debería personalizar la página de agradecimiento de WooCommerce?

La página de agradecimiento es la página que ven los usuarios después de completar un pedido . De forma predeterminada, simplemente agradece a los compradores por su compra y proporciona información básica sobre el pedido, como el número de pedido, los artículos comprados, el precio, el método de pago, etc. No hay nada de malo en eso, pero puedes hacer un uso mucho mejor de esta página.

La página de agradecimiento a menudo se pasa por alto, pero puede ser extremadamente poderosa. Tenga en cuenta que todos sus compradores lo verán después de realizar un pedido, por lo que es una gran oportunidad para aumentar las ventas o brindar información útil a sus clientes. Al personalizar la página de agradecimiento, puede ofrecer una experiencia posterior a la compra mucho mejor para sus compradores.

Si alguien ve tu página de agradecimiento es porque ha realizado un pedido en tu tienda. Esto significa que confían en ti (al menos lo suficiente como para comprarte). Como probablemente sepa, es mucho más fácil venderle a alguien que ya le ha comprado que a nuevos clientes. Aunque su objetivo principal no sea vender algo, puede trabajar para convertir a ese comprador en un cliente recurrente.

Por ejemplo, puede editar la página de agradecimiento y agregar guías útiles, enlaces de referencia que los usuarios pueden compartir para obtener una recompensa, ofertas exclusivas, descuentos en compras futuras y más.

Hay varias formas en las que puede personalizar la página de agradecimiento para mejorar la experiencia de usuario y hacer que los clientes regresen a su tienda. En la siguiente sección, le mostraremos diferentes métodos para editar la página de agradecimiento de WooCommerce mediante programación .

Cómo editar la página de agradecimiento de WooCommerce mediante programación: 2 métodos

Hay dos formas principales de editar la página de agradecimiento mediante programación en WooCommerce :

1. usando ganchos
2. Sobrescribir archivos de plantilla

Además, también puedes combinar ambos métodos dependiendo de cada requerimiento específico.

Echemos un vistazo más de cerca a ambas formas.

NOTA : Como editaremos algunos archivos principales, antes de comenzar, le recomendamos que cree una copia de seguridad completa de su sitio e instale un tema secundario. Si no está seguro de cómo hacerlo, consulte esta guía para crear uno o usar cualquiera de estos complementos.

1) Personaliza la página de agradecimiento usando ganchos

Para ejecutar los ganchos de WooCommerce, trabajaremos en el archivo functions.php del tema secundario. Necesitamos este archivo para sobrescribir el del tema principal.

Algunos de los ganchos que ofrece WooCommerce funcionan en la página de agradecimiento, como woocommerce_before_thankyou y woocommerce_thankyou . Además, puede editar el título y el contenido con ganchos de filtro como woocommerce_endpoint_order-received_title y woocommerce_thankyou_order_received_text .

Para usar cualquiera de estos ganchos, activará cada uno de ellos agregando el siguiente fragmento de código al archivo functions.php del tema secundario:

 add_action('woocommerce_before_thankyou','QuadLayers_before_thankyou');
función QuadLayers_before_thankyou(){
    echo "PRUEBA";
}

Los ganchos de filtro funcionan de manera similar, pero deben devolver un valor. El gancho de filtro 'woocommerce_before_thankyou' editará el título de la página de agradecimiento de la siguiente manera:

 add_filter('woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title'); 
función QuadLayers_thank_you_title ($ título_antiguo) { 
     return '¡Eres increíble!'; 
}

2) Edite los archivos de plantilla de sobrescritura de la página de agradecimiento

Otra forma de editar la página de agradecimiento de WooCommerce mediante programación es sobrescribiendo los archivos de plantilla. Vale la pena señalar que sobrescribir archivos de plantilla le brinda mucha flexibilidad, pero cuando sobrescribe un archivo de plantilla, los ganchos que funcionan en ese archivo ya no funcionarán.

Para sobrescribir los archivos de plantilla, debe copiar el archivo thanksyou.php ubicado en la carpeta de plantillas del complemento WC y pegar el archivo con el mismo nombre en la carpeta WooCommerce de su tema secundario, incluida la subcarpeta de pago, de la siguiente manera:

Para obtener más información sobre cómo personalizar los archivos de plantilla en WooCommerce, consulte esta guía.

Después de eso, podrá editar libremente el archivo thanksyou.php de su tema secundario y sobrescribir el predeterminado.

Scripts de muestra para editar la página de agradecimiento de WooCommerce mediante programación

En esta sección, le mostraremos diferentes scripts que puede usar para editar su página de agradecimiento de WooCommerce mediante programación. Para este tutorial, usaremos el tema Storefront, por lo que podría verse un poco diferente si usa un tema diferente.

Así es como se ve la página de agradecimiento predeterminada en WooCommerce:

1) Agregue contenido personalizado a la página de agradecimiento

Como se vio anteriormente, podemos usar ganchos de WooCommerce para agregar un título personalizado. Esta vez agregaremos más contenido útil, para que los clientes puedan seguirnos en las redes sociales.

Pegue el siguiente código en el archivo functions.php de su tema hijo:

 add_filter('woocommerce_endpoint_order-received_title', 'QuadLayers_thank_you_title'); 
función QuadLayers_thank_you_title ($ título_antiguo) { 
     return '¡Eres increíble!'; 
}
add_filter('woocommerce_thankyou_order_received_text', 'QuadLayers_thank_you_details', 20, 2); 
función QuadLayers_gracias_detalles ($ gracias_título, $ pedido) { 
    $cadena= '<h3><b>Oh ' . $pedido->get_billing_first_name() . '</b>, ¡muchas gracias por su pedido!</h3>';
    $str.='<p>Nos pondremos en contacto contigo en breve para entregarte tu compra.</p>';
    $str.='<p>Estén atentos para recibir los últimos anuncios y síganos en nuestros perfiles de redes sociales</p>>';
    $str.= '<div><div><a href="#twitter.com"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Twitter_Logo.png" / ></a></div>'; 
    $str.='<div><a href="#facebook.com"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" /></a></div>'; 
    $str.='<div><a href="#instagram.com"><img src="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Instagram_colored_svg_1-512. png" /></a></div></div>';
   $str.='<p>Aquí está toda la información sobre su pedido. ¡Salud!</p>';    
    devolver $cadena;
}

Recuerde reemplazar las URL de las imágenes con la ruta URL de su propio sitio web. Además de eso, debe insertar vínculos de retroceso en sus perfiles de redes sociales, de modo que cuando los usuarios hagan clic en el enlace, se conviertan en seguidores.

Este será el resultado:

2) Mostrar información del producto en la página de agradecimiento

Otra alternativa interesante es mostrar otros productos, para que los clientes puedan comprar otros artículos que les interesen. Para mostrar productos específicos, puede usar códigos cortos de WooCommerce como este:

 add_action('woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2);
función QuadLayers_thankyou_page(){
   $sh = '<h4>Es posible que desee comprobar estos otros productos. </h4>';
  $sh .='<div class="tx_account">'.do_shortcode('
 ').'</div>';
    echo $sh;
}

Aquí estamos usando el código abreviado del producto para mostrar los productos destacados y el resultado es este:

3) Mostrar los detalles de la cuenta en la página de agradecimiento

Del mismo modo, podemos adjuntar detalles de la cuenta del usuario y mostrar pestañas útiles con sus pedidos, dirección, información de la cuenta y más.

 add_action('woocommerce_thankyou', 'QuadLayers_thankyou_page', 10, 2);
función QuadLayers_thankyou_page(){
   $sh = "<h2>Tu cuenta</h2>";
   $sh .='<div class="tx_account">'.do_shortcode(' [ woocommerce_my_account ] ').'</div>'; echo $sh; }

Después de pegar esto en el archivo functions.php , su página de agradecimiento debería verse así:

4) Dar cupones cuando las compras excedan un cierto precio total

Personalizar la página de agradecimiento puede ser una excelente manera de convertir a un comprador ocasional en un cliente leal. Los cupones de descuento para futuras compras son una excelente manera de lograrlo.

La siguiente secuencia de comandos agregará un texto al final de la página de agradecimiento cuando el precio total del pedido sea superior a $100.

 add_action('woocommerce_thankyou', 'QuadLayers_thankyou_order', 10, 2); 
función QuadLayers_thankyou_order($order_id){
    $pedido = wc_get_order( $order_id );
    $total=0;
    foreach ($pedido->get_items() as $item_key => $item ):
        $elemento_datos=$elemento->get_data();       
        $item_total=intval($item_data['total']);
        $total+=$item_total;        
    endforeach;
    si ($ total> 100):
        echo "<p>El monto de su pedido supera el rango de 100$, por lo que se beneficia con un cupón especial para su próximo pedido.</p><p> No se preocupe, estará activo hasta que decida regresar !</p><p>Utilice el siguiente cupón <code>[RTC_discount]</code>en su próximo pedido para obtener un descuento especial del 33%</p>";
    terminara si;
}

En este ejemplo, elegimos $100, pero asegúrese de ajustar el valor en la línea 8 ( si ($total>100) :) a algo que tenga sentido para su negocio.

5) Eliminar y editar los detalles del pedido en la página de agradecimiento

Ahora echemos un vistazo a un ejemplo más complejo y hagamos algunos cambios en el archivo de plantilla de WooCommerce thankyou.php . Si no está familiarizado con la edición de archivos de plantilla, puede consultar esta guía.

En el siguiente ejemplo, eliminaremos el correo electrónico, el monto total y el método de pago de la página del pedido, ya que también se muestran en los detalles del pedido. Esto significa que solo vamos a dejar el número de identificación del pedido y la fecha del pedido.

Al mismo tiempo, hemos movido la lista de detalles del pedido a la parte superior y hemos editado las etiquetas.

Para hacer esto, cree un archivo thankyou.php en su tema hijo como se explica en la sección anterior y pegue el siguiente código en él:

 <?php definido( 'ABSPATH' ) || salir;?>
<div class="pedido de woocommerce">
<?php if ($pedido): do_action('woocommerce_before_thankyou', $pedido->get_id() ); ?> <?php if ( $pedido->has_status( 'fallido' ) ) : ?>
 <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_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( $order->get_checkout_payment_url() ); ?>" class= "botón pagar"><?php esc_html_e( 'Pagar', 'woocommerce' ); ?></a><?php if ( is_user_logged_in() ) : ?><a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="botón de pago"><?php esc_html_e('Mi cuenta', 'woocommerce' ); ?></a><?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', esc_html__( 'Gracias. Su pedido ha sido recibido', 'woocommerce' ), $pedido ); ></p>
<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>
<ul class="woocommerce-order-overview woocommerce-thankyou-order-detalles order_details">
<li class="woocommerce-order-overview__order order"><?php esc_html_e( 'ID de número de pedido:', 'woocommerce' ); ><strong><?php echo $pedido->get_order_number(); // phpcs: ignorar WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong></li>
<li class="woocommerce-order-overview__date date"><?php esc_html_e( 'Date:', 'woocommerce' ); ?><strong><?php echo wc_format_datetime( $order->get_date_created() ); ></fuerte></li>
</ul>
<?php endif; ?>
<?php else : ?><p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Gracias. Su pedido ha sido recibido.', 'woocommerce' ), null );>
</p><?php endif; ?>
</div>

Si todo salió bien, debería ver algo como esto:

Conclusión

Con todo, la página de agradecimiento a menudo se pasa por alto, pero puede tener un gran impacto en su negocio. Al agregar enlaces de referencia, ofertas exclusivas y descuentos para compras futuras, puede aumentar sus ventas y aumentar la cantidad de clientes que regresan.

En esta guía, hemos visto dos formas de editar la página de agradecimiento de WooCommerce mediante programación:

• con ganchos
• Sobrescribir archivos de plantilla

Ambos métodos son efectivos y pueden funcionar en diferentes situaciones, así que elija el que mejor se adapte a sus requisitos específicos.

A estas alturas, debería poder personalizar su página de agradecimiento y:

• Agregue contenido personalizado, como enlaces de redes sociales
• Mostrar productos
• Mostrar detalles de la cuenta
• Dar descuentos cuando el cliente alcanza un cierto gasto mínimo
• Eliminar y editar detalles del pedido

Finalmente, tenga en cuenta que los mismos ganchos definidos en los archivos de plantilla de WooCommerce son los que puede usar en el archivo functions.php del tema secundario. Entonces, si elimina los ganchos del archivo de plantilla, dejarán de funcionar en su sitio web.

Para obtener más guías para personalizar su tienda, eche un vistazo a:

• Cómo personalizar la página de la tienda en WooCommerce
• Edite la página del producto de WooCommerce mediante programación
• Cómo personalizar la página Mi cuenta de WooCommerce

¿Has personalizado tu página de agradecimiento? ¿Qué método usaste? ¡Háganos saber en la sección de comentarios!