Cómo usar los ganchos de pago de WooCommerce

En esta guía, aprenderá a usar 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 ganchos son funciones poderosas que le permiten cambiar o agregar código sin tener que modificar los archivos principales. Los ganchos brindan mucha flexibilidad y los desarrolladores los usan para cambiar las funcionalidades predeterminadas de WooCommerce.

Hay dos tipos diferentes de anzuelo:

• Los ganchos de acción le permiten agregar código personalizado para realizar ciertas acciones cuando ocurre un evento.
• Los ganchos de filtro cambian 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 en WooCommerce son los ganchos de pago. Y si tiene una tienda en línea, deberá usarla para personalizar el proceso de 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 alguna lógica para aumentar el precio o limitar a los usuarios por rol, y mucho más.

Los ganchos de WooCommerce funcionan exactamente como los ganchos nativos de WordPress. Entonces, 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 secundarios para WordPress o nuestra guía detallada sobre cómo crear un tema secundario con un complemento o manualmente.

Si esta es la primera vez que usa ganchos, simplemente puede copiar estos scripts y pegarlos directamente en el archivo functions.php de su Child Theme. 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');
función QuadLayers_callback_function(){
    # añade tu código aquí
}

Donde 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');
función quadlayers_change_breadcrumb ($ contenido) {
$contenido .= "QuadLayers";
devolver $contenido;
}

Lista de ganchos de pago para WooCommerce

Hay muchos ganchos de WooCommerce que puedes usar en la página de pago. Algunos de los principales son:

• woocommerce_before_checkout_form
• woocommerce_checkout_antes_de_los_detalles_del_cliente
• woocommerce_checkout_facturación
• woocommerce_before_checkout_billing_form
• woocommerce_checkout_envío
• woocommerce_before_order_notas
• woocommerce_after_order_notas
• woocommerce_checkout_después_del_pedido_revisión
• woocommerce_checkout_después_de_los_detalles_del_cliente
• 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_pago
• woocommerce_review_order_after_submit
• woocommerce_review_order_after_pago
• woocommerce_after_checkout_form

Todos ellos tienen nombres que se explican por sí mismos. Si desea ver la lista completa de ganchos de WooCoommerce, consulte esta documentación. Y para ver cómo funciona cada gancho, échale un vistazo a este post.

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ías algo como esto:

 add_action('woocommerce_after_checkout_billing_form','QuadLayers_callback_function');
función QuadLayers_callback_function(){
echo 'aquí va el texto del contenido o html';
}

En este caso, solo estamos agregando algo de texto, pero puede agregar estructuras HTML complejas y crear su lógica personalizada con funciones de 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 ganchos de WooCommerce

Aquí, le mostraremos algunos ejemplos de lo que puede hacer para personalizar la página de pago utilizando 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 del pedido. En este caso hemos añadido un código QR pero puedes incluir otras imágenes, un GIF animado o imágenes de fondo.

 add_action('woocommerce_review_order_before_payment','example_callback');
función ejemplo_devolución( ) {
    echo '<img src="https://quadlayers.com/wp-content/uploads/2020/06/frame.png" width="200px" height="200px">';  
} 

Cambiar migas de pan en la página de pago

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

 add_filter('woocommerce_breadcrumb_defaults', 'quadlayers_change_breadcrumb');
función 'quadlayers_change_breadcrumb' ($ por defecto) {
    $predeterminado['inicio'] = 'Tienda';
    devolver $predeterminado;
}

Muestre insignias de confianza junto al botón Realizar pedido

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

 add_action('woocommerce_review_order_after_submit', 'quadlayers_trust_badges');
función quadlayers_trust_badges() {
    echo '<div class="insignias-de-confianza">
    <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>Agregué las insignias de confianza de arriba con un gancho de WooCommerce</i></div>';
} 

Editar campos de pago existentes

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

 add_filter('woocommerce_checkout_fields', 'quadlayers_labels_placeholders', 9999); 
función quadlayers_labels_placeholders ($ f ) { 	
	$f['billing']['billing_first_name']['label'] = '¿Cómo te llamas?';
	$f['order']['order_comments']['placeholder'] = '¿Qué tienes en mente?'; 
	devolver $f; 
} 

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 al finalizar la compra. 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 (esté marcado o no).

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

// insertar casilla de verificación en el pago de woocommerce 
function quadlayers_subscribe_checkout ($ pago) { 
	woocommerce_form_field('suscrito', array(
		'tipo' => 'casilla de verificación',
		'clase' => array('misha-field formulario-fila-ancho'),
		'label' => ' Suscríbete a nuestro boletín.',
		), $pago->get_value( 'suscrito' ) ); 
}
// guarda el valor del campo
función quadlayers_save_function ($ order_id ) { 
	if( !empty( $_POST['métodocontacto'] ) )
		update_post_meta( $order_id, 'contactmethod', sanitize_text_field( $_POST['contactmethod'] ) ); 
	if( !empty( $_POST['suscrito'] ) && $_POST['suscrito'] == 1 )
		update_post_meta( $order_id, 'suscrito', 1); 
}

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 te recomendamos estas dos:

• Checkout Manager 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 gratuita, 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 usar estos ganchos para personalizar diferentes secciones de su pago. Sin embargo, ¡hay mucho más que puedes hacer! Así que te animamos a que juegues con ellos y des rienda suelta a 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 disfrutaste la lectura, ¡comparte esta publicación en las redes sociales!