¿Cómo usar los ganchos de pago de WooCommerce?

En esta guía, aprenderá cómo usar los ganchos de pago en WooCommerce. Echaremos un vistazo a algunos de los ganchos principales y le daremos algunos ejemplos de lo que puede hacer con ellos. Entonces, prepárese para personalizar su página de pago y aumentar sus tasas de conversión.

¿Qué son los ganchos de WooCommerce?

Los Hooks son funciones poderosas que le permiten cambiar o agregar código sin tener que modificar los archivos principales. Los Hooks brindan mucha flexibilidad y los desarrolladores los usan para cambiar las funcionalidades predeterminadas de WooCommerce.

Hay dos tipos diferentes de anzuelos:

  • Ganchos de acción le permite agregar código personalizado para realizar ciertas acciones cuando ocurre un evento.
  • Ganchos de filtro cambiar el comportamiento de una variable o función existente.

Gracias a los ganchos de WooCommerce, los desarrolladores pueden crear soluciones altamente personalizadas de una manera muy práctica y flexible. Algunos de los ganchos más importantes de WooCommerce son los ganchos de pago. Y si tiene una tienda en línea, deberá utilizarla para personalizar el pago y mejorar sus tasas de conversión.

Ganchos de pago de WooCommerce

Los ganchos de pago son solo un tipo de los múltiples ganchos que admite WooCommerce y se ejecutan en la página de pago. Puede usar estos ganchos de pago para editar notas, agregar contenido antes de los campos de facturación, antes de la revisión del pedido o después del formulario de pago, aplicar algo de lógica para aumentar el precio o limitar los usuarios por función, y mucho más.

Los ganchos de WooCommerce funcionan exactamente como los ganchos nativos de WordPress. Por lo tanto, si está familiarizado con los ganchos de WordPress, dominar los ganchos de WooCommerce será fácil.

Antes que empecemos

Antes de saltar a los ganchos, le recomendamos que cree un tema hijo. Hay muchas herramientas que puede utilizar. Puede consultar nuestra lista de los mejores complementos de temas infantiles para WordPress o nuestra guía detallada sobre cómo crear un tema infantil con un complemento o manualmente.

Si es la primera vez que usa hooks, simplemente puede copiar estos scripts y pegarlos directamente en el functions.php archivo de su tema infantil. Al final de la publicación, encontrará algunos ejemplos de cosas que puede hacer con los ganchos de pago para darle algunas ideas.

¿Cómo usar los ganchos de pago de WooCommerce?

Como vimos antes, hay ganchos de acción y ganchos de filtro de WooCommerce y ambos tienen una sintaxis similar.

Este es un ejemplo de un gancho de acción:

add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
function QuadLayers_callback_function(){
    # add your code here
}

Dónde woocommerce_after_checkout_billing_form es el gancho y QuadLayers_callback_function es la función que creamos para agregar nuestros scripts personalizados.

Los ganchos de filtro, por otro lado, funcionan de la misma manera, pero necesitan recibir y devolver un parámetro en la función. Por ejemplo:

add_filter('woocommerce_breadcrumb_defaults','quadlayers_change_breadcrumb');
function quadlayers_change_breadcrumb( $content) {
$content .= "QuadLayers";
return $content;
}

Lista de ganchos de pago para WooCommerce

Hay muchos ganchos de WooCommerce que puede usar en la página de pago. Algunas de las principales son:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

Todos ellos tienen nombres que se explican por sí mismos. Si desea echar un vistazo a la lista completa de los ganchos de WooCoommerce, consulte esta documentación. Y para ver cómo funciona cada anzuelo, eche un vistazo a esta publicación.

Por ejemplo, supongamos que desea agregar algún contenido después del formulario de facturación y antes del título de la sección de envío. Usaría algo como esto:

add_action(‘woocommerce_after_checkout_billing_form’,’QuadLayers_callback_function’);
function QuadLayers_callback_function(){
echo ‘here goes the content text or html’;
}

En este caso, solo estamos agregando texto, pero puede agregar estructuras HTML complejas y crear su lógica personalizada con funciones PHP. Echemos un vistazo a algunos ejemplos para darle algunas ideas sobre cómo aprovechar al máximo los ganchos de pago de WooCommerce.

¿Cómo personalizar la página de pago con los ganchos de WooCommerce?

Aquí, le mostraremos algunos ejemplos de lo que puede hacer para personalizar la página de pago usando los ganchos de WooCommerce en su sitio.

Agregar una imagen a la revisión del pedido

Puede agregar una imagen a la página de revisión de pedidos. En este caso, hemos agregado un código QR pero puede incluir otras imágenes, un GIF animado o imágenes de fondo.

add_action('woocommerce_review_order_before_payment','example_callback');
function example_callback( ) {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px" style="margin:auto">';  
}
Agregue un código QR para revisarlo.
Agregar un código QR a la revisión del pedido.

Cambiar migas de pan en la página de pago

Puede evitar que los usuarios vuelvan a la página de inicio editando las rutas de navegación. En este ejemplo, le mostraremos cómo cambiar el Casa texto en la ruta de navegación para Tienda.

add_filter( 'woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb' );
function 'quadlayers_change_breadcrumb'( $default ) {
    $default['home'] = 'Store';
    return $default;
}
Ganchos de pago de WooCommerce - breadcrumb-checkout
Edite las rutas de navegación de la página de pago.

Mostrar insignias de confianza junto al botón Realizar pedido

Los ganchos de pago de WooCommerce ofrecen excelentes opciones para generar confianza y dar tranquilidad a los clientes cuando están a punto de comprar. Al mostrar insignias de confianza junto al Realizar pedido , puede mejorar sus tasas de conversión y generar confianza en su marca.

add_action( 'woocommerce_review_order_after_submit', 'quadlayers_trust_badges' );
function quadlayers_trust_badges() {
    echo '<div class="trust-badges">
    <img src="https://www.pngitem.com/pimgs/m/19-197703_transparent-secure-checkout-png-best-trust-badges-for.png">
    </div><div class="trust-badge-message"><i>I added the trust badges above with a WooCommerce hook</i></div>';
}
Ganchos de pago de WooCommerce - trust-badges-checkout
Muestre insignias de confianza en la página de pago de WooCommerce.

Editar campos de pago existentes

La mejor manera de personalizar completamente la página de pago es editando etiquetas y marcadores de posición de campos. En este ejemplo, vamos a editar la etiqueta del nombre y el marcador de posición de la nota de pedido usando el woocommerce_checkout_fields gancho.

add_filter( 'woocommerce_checkout_fields' , 'quadlayers_labels_placeholders', 9999 ); 
function quadlayers_labels_placeholders( $f ) { 	
	$f['billing']['billing_first_name']['label'] = 'What's your name?';
	$f['order']['order_comments']['placeholder'] = 'What's on your mind?'; 
	return $f; 
}
Ganchos de pago de WooCommerce: marcador de posición de pago
Reemplace el marcador de posición y las etiquetas del formulario de pago de WooCommerce.

Agregar un campo de pago personalizado

Finalmente, aquí hay un ejemplo más complejo. Le mostraremos cómo crear un nuevo campo personalizado que permita a los clientes suscribirse a su boletín de noticias en la caja. Para eso, usaremos dos ganchos: uno para mostrar el campo para suscribirse y otro para guardar el estado del botón en la base de datos (ya sea que esté marcado o no).

add_action( 'woocommerce_after_order_notes', 'quadlayers_subscribe_checkout' );
add_action( 'woocommerce_checkout_update_order_meta', 'quadlayers_save_function' );

// insert checkbox in woocommerce checkout 
function quadlayers_subscribe_checkout( $checkout ) { 
	woocommerce_form_field( 'subscribed', array(
		'type'	=> 'checkbox',
		'class'	=> array('misha-field form-row-wide'),
		'label'	=> ' Subscribe to our newsletter.',
		), $checkout->get_value( 'subscribed' ) ); 
}
// save field value
function quadlayers_save_function( $order_id ){ 
	if( !empty( $_POST['contactmethod'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['subscribed'] ) && $_POST['subscribed'] == 1 )
		update_post_meta( $order_id, 'subscribed', 1 ); 
}
Ganchos de pago de WooCommerce: suscripción-pago
Agregue una casilla de verificación en la página de pago de WooCommerce.

Personaliza la página de pago con complementos

Si no se siente cómodo usando ganchos, también puede personalizar su página de pago usando complementos. Existen muchas herramientas, pero recomendamos estas dos:

  • Administrador de pagos para WooCommerce: Con más de 70,000 instalaciones activas, este es uno de los complementos de pago más populares para WooCommerce. Checkout Manager le permite personalizar, agregar, editar y eliminar campos en la página de pago. Tiene una versión gratuita y 3 planes premium que comienzan en 20 USD.
  • Pago directo para WooCommerce: Con esta herramienta freemium, puede simplificar el proceso de pago y aumentar sus tasas de conversión. Puede acortar el proceso de compra redirigiendo a sus clientes desde la página del producto directamente a la caja. Direct Checkout tiene una versión gratuita y planes premium que comienzan en 20 USD (pago único).

Para obtener más información sobre cómo usar estos complementos y mejorar la página de pago, consulte nuestra guía detallada.

Conclusión

Con todo, con los ganchos de WooCommerce puedes personalizar tu página de pago y aumentar las tasas de conversión. Aquí, le mostramos algunos ejemplos de cómo utilizar estos ganchos para personalizar diferentes secciones de su pago. Sin embargo, ¡hay mucho más que puedes hacer! Por eso, te animamos a que juegues con ellos y desates tu creatividad.

Para obtener más ejemplos e información sobre cómo personalizar la página de pago de WooCommerce, consulte esta guía paso a paso.

Háganos saber en la sección de comentarios a continuación si tiene alguna pregunta. Y si te gustó la lectura, ¡comparte esta publicación en las redes sociales!