WooCommerce: Hooks "Antes y Después" del Botón "Añadir al Carrito"

En el desarrollo con WooCommerce, personalizar el comportamiento del botón de "Añadir al carrito" puede mejorar la experiencia del usuario y añadir funcionalidades únicas. Los hooks de WooCommerce permiten insertar código personalizado antes o después de este botón en distintas partes del sitio.

A continuación, te explico cómo puedes hacer uso de estos hooks tanto en las páginas de productos individuales como en las páginas de archivo de productos, con ejemplos prácticos para facilitar la integración.

add_action( 'woocommerce_before_add_to_cart_button', 'mostrar_texto_antes' );

function mostrar_texto_antes(){
    echo '<p>Mensaje personalizado antes del botón.</p>';
}

Este código añadirá el texto especificado justo antes de que el botón se muestre en la página del producto.

Ejemplo de uso: Añadir contenido después del botón

Para mostrar un mensaje o contenido adicional justo después del botón, puedes usar woocommerce_after_add_to_cart_button. Un ejemplo sencillo sería:

add_action( 'woocommerce_after_add_to_cart_button', 'mostrar_texto_despues' );

function mostrar_texto_despues(){
    echo '<p>Mensaje personalizado después del botón.</p>';
}

Este hook es útil para indicar recomendaciones, productos relacionados o incluso mensajes promocionales.

Hooks en páginas de archivo o categorías de productos

En las páginas de archivo, como las de categorías de productos, los hooks funcionan de manera ligeramente diferente. El hook principal aquí es woocommerce_loop_add_to_cart_link, que te permite modificar el botón de "Añadir al carrito" en el loop de productos.

Añadir texto antes y después del botón en las páginas de archivo

Para añadir texto o contenido antes y después del botón de "Añadir al carrito" en las páginas de archivo de productos, puedes utilizar un filtro como este:

add_filter( 'woocommerce_loop_add_to_cart_link', 'modificar_boton_carrito_archivo', 10, 3 );

function modificar_boton_carrito_archivo( $html, $producto, $args ) {
    $antes = '<p>Texto antes del botón</p>';
    $despues = '<p>Texto después del botón</p>';
    return $antes . $html . $despues;
}

Este filtro te permite modificar el HTML del botón añadiendo elementos personalizados antes y después.

Personalizar para productos específicos

Además, puedes aplicar condiciones para que el contenido añadido solo aparezca en ciertos productos. Por ejemplo, puedes verificar si un producto está en oferta o aplicar la lógica solo a ciertos ID de productos. Este ejemplo muestra cómo hacerlo solo si el producto no está en oferta:

add_filter( 'woocommerce_loop_add_to_cart_link', 'modificar_carrito_productos_no_oferta', 10, 3 );

function modificar_carrito_productos_no_oferta( $html, $producto, $args ) {
    if( !$producto->is_on_sale() ) {
        $antes = '<p>Producto no en oferta.</p>';
        return $antes . $html;
    }
    return $html;
}

Conclusión

Los hooks de WooCommerce antes y después del botón "Añadir al carrito" ofrecen una excelente oportunidad para personalizar la experiencia del usuario en tu tienda online. Desde mensajes promocionales hasta contenido interactivo, estos hooks permiten una flexibilidad significativa sin tener que modificar directamente el código fuente de WooCommerce.

Además, al aplicar condiciones para productos específicos o páginas de archivo, puedes ofrecer una experiencia más personalizada y orientada a la conversión.