El estándar de la página de tienda de WooCommerce muestra un solo botón debajo de cada producto: «Añadir al carrito». Para la mayoría de las tiendas, esto es suficiente. Pero si usted vende productos que requieren investigación antes de la compra, un único botón «Añadir al carrito» se queda corto. Los compradores quieren abrir primero la página del producto, leer la descripción, revisar las especificaciones y luego añadir al carrito desde allí.

El problema es que WooCommerce no ofrece un ajuste integrado para «añadir un botón Leer más junto a Añadir al carrito». Los plugins para esta tarea o bien están sobrecargados de funciones innecesarias o entran en conflicto con su tema. Eso deja el camino probado: código personalizado en functions.php.

A continuación encontrará una guía paso a paso. Obtendrá dos botones en la página de tienda: «Leer más» (enlaza a la página del producto) y «Añadir al carrito» (funciona como siempre). También cubriremos el caso particular de los productos agotados.

💡 Resumen rápido:

• Eliminar el botón «Añadir al carrito» predeterminado mediante remove_action
• Añadir un botón personalizado «Leer más» que enlace a la página del producto
• Devolver el botón «Añadir al carrito» a una nueva posición junto a «Leer más»
• Corregir los botones duplicados en productos agotados con jQuery
• El código va en el functions.php del tema hijo, seguro y sin plugins

Cómo WooCommerce renderiza los botones en la página de tienda

WooCommerce muestra el botón «Añadir al carrito» a través del hook woocommerce_after_shop_loop_item. Este hook se ejecuta en cada tarjeta de producto dentro del bucle WP_Query en la página de tienda. La función responsable de añadir el botón es woocommerce_template_loop_add_to_cart con prioridad 10.

El hook está vinculado a una acción. Para cambiar el conjunto de botones, trabajamos directamente con él: eliminamos el manejador predeterminado y añadimos el nuestro. No se requieren ediciones de las plantillas de WooCommerce y el tema sigue siendo actualizable.

Paso 1: eliminar el botón «Añadir al carrito» predeterminado

El primer paso es desenganchar la función woocommerce_template_loop_add_to_cart. Coloque este código en el functions.php de su tema hijo o mediante el plugin Code Snippets:

1
/* Remove the standard Add to cart button */
2
function remove_loop_button() {
3
    remove_action(
4
        'woocommerce_after_shop_loop_item',
5
        'woocommerce_template_loop_add_to_cart',
6
        10
7
    );
8
}
9
add_action( 'init', 'remove_loop_button' );

Envolvemos remove_action en una función y la enganchamos al hook init. No puede llamar a remove_action directamente en functions.php porque es posible que WooCommerce no haya inicializado sus hooks cuando el tema se carga. El hook init garantiza que todas las acciones ya están registradas.

Después de insertar este código, la página de tienda perderá el botón «Añadir al carrito». No se preocupe: en el siguiente paso lo recuperaremos, ahora emparejado con «Leer más».

Paso 2: añadir un botón personalizado «Leer más»

El botón «Leer más» es un enlace a la página del producto, estilizado como un botón estándar de WooCommerce. Usamos $product->get_permalink() para obtener la URL y do_shortcode para el envoltorio:

1
/* Add a More details button */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart'
5
);
6
function replace_add_to_cart() {
7
    global $product;
8
    $link = $product->get_permalink();
9
    echo do_shortcode(
10
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
11
    );
12
}

La función se engancha a la misma acción woocommerce_after_shop_loop_item con la prioridad predeterminada de 10. Recupera el objeto $product mediante global, obtiene la URL de la página del producto y muestra un enlace con la clase button. WooCommerce recoge automáticamente los estilos de botón del tema activo.

Observe la llamada a esc_url(): escapar la URL es obligatorio por seguridad. Puede reemplazar la clase addtocartbutton por la suya propia si desea estilos personalizados.

Paso 3: devolver el botón «Añadir al carrito» junto al otro

El botón «Añadir al carrito» sigue siendo necesario en la página de tienda; sin él, los compradores no pueden añadir productos al carrito directamente. Pero ahora debe aparecer DESPUÉS del botón «Leer más». Para lograrlo, registramos el manejador nativo con prioridad 20 (después de nuestro botón con prioridad 10):

1
/* Restore the Add to cart button */
2
add_action( 'after_setup_theme', 'lets_add_cart_button' );
3
function lets_add_cart_button() {
4
    add_action(
5
        'woocommerce_after_shop_loop_item',
6
        'woocommerce_template_loop_add_to_cart',
7
        20
8
    );
9
}

Envolvemos add_action en el hook after_setup_theme por la misma razón que la eliminación: es posible que WooCommerce no esté cargado cuando functions.php se ejecuta. La prioridad 20 coloca «Añadir al carrito» estrictamente después de «Leer más» (prioridad 10).

Resultado: debajo de cada producto en la página de tienda, ahora tiene dos botones. Primero «Leer más», luego «Añadir al carrito».

El video demuestra un enfoque alternativo que añade botones personalizados a productos individuales y a toda la página de tienda. El principio de trabajar con hooks es el mismo que hemos cubierto anteriormente.

Qué falla con los productos agotados

El código anterior funciona perfectamente para productos que están en stock. Pero para los artículos agotados surge un conflicto: WooCommerce reemplaza automáticamente el botón «Añadir al carrito» por «Leer más» para dichos productos. El resultado son DOS botones «Leer más» seguidos: el nuestro personalizado y el reemplazo de WooCommerce.

El problema no está en la lógica de nuestro código; así es como está diseñado el núcleo de WooCommerce. La función estándar woocommerce_template_loop_add_to_cart renderiza un enlace «Leer más» en lugar del botón «Añadir al carrito» para los artículos agotados. Nuestro botón «Leer más» personalizado permanece, por lo que obtenemos un duplicado.

Paso 4: eliminar el botón extra con jQuery

La forma más directa de eliminar el botón duplicado es jQuery. El script encuentra el enlace que contiene el texto «Leer más» que está dentro del contenedor span estándar de WooCommerce y lo elimina:

1
/* Remove the duplicate More details button for out-of-stock items */
2
jQuery( document ).ready( function( $ ) {
3
    $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
4
 
5
    $( 'button.button.woof_reset_search_form' ).on( 'click', function() {
6
        $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
7
    });
8
});

El script hace dos cosas. Primero, al cargar la página, elimina todos los enlaces con la clase product_type_simple que contienen el texto «Leer más». Segundo, adjunta un manejador al botón de restablecimiento de filtros de WooCommerce (woof_reset_search_form) porque después del filtrado AJAX, el DOM se actualiza y los duplicados reaparecen.

Coloque el código jQuery en un archivo .js separado y encólelo mediante wp_enqueue_script en functions.php, o péguelo en el campo «JavaScript personalizado» de su tema o de un plugin como Simple Custom CSS and JS.

Enfoque alternativo: un filtro en lugar de la eliminación

Si prefiere evitar jQuery, existe un método más elegante: el filtro woocommerce_product_is_in_stock. Comprueba la disponibilidad del producto antes de mostrar el botón personalizado:

1
/* Do not show the More details button for unavailable items */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart_conditional',
5
    10
6
);
7
function replace_add_to_cart_conditional() {
8
    global $product;
9
 
10
    if ( ! $product->is_in_stock() ) {
11
        return;
12
    }
13
 
14
    $link = $product->get_permalink();
15
    echo do_shortcode(
16
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
17
    );
18
}

El método $product->is_in_stock() devuelve false para productos agotados, por lo que nuestro botón simplemente no se renderiza. WooCommerce muestra su propio «Leer más» para dichos productos. Para los artículos en stock, ambos botones funcionan según lo previsto. Este enfoque es más limpio: sin JS, menos conflictos de filtros.

Qué variante elegir depende de su tienda. jQuery es más universal (funciona con cualquier plugin de filtrado), mientras que el filtro PHP es más ligero y rápido.

⁉️🤔 Preguntas frecuentes

El código no funciona y los botones no aparecen. ¿Qué está mal?

Primero, asegúrese de que el código está en el functions.php del tema HIJO, no del tema padre (el padre se sobrescribe en las actualizaciones). Segundo, verifique que WooCommerce está activo y actualizado a la última versión. Tercero, compruebe si su tema anula el hook woocommerce_after_shop_loop_item. Algunos temas reemplazan completamente la plantilla de la tarjeta de producto y los hooks de WooCommerce no se ejecutan en ella.

¿Puedo cambiar el texto del botón «Leer más» por otra cosa?

Sí. En la función replace_add_to_cart(), reemplace la cadena 'Read More' en los atributos de la etiqueta <a> con el texto que necesite, por ejemplo «Ver», «Seleccionar» o «Descripción». El texto es estático y no afecta a la funcionalidad.

¿Por qué el selector de jQuery usa product_type_simple?

Porque WooCommerce asigna clases diferentes a los botones según el tipo de producto: product_type_simple para productos simples, product_type_variable para los variables. Si su tienda tiene productos variables agotados, añada un segundo selector para product_type_variable o use un a.button.ajax_add_to_cart más general.

¿Es seguro insertar código PHP en functions.php?

Es seguro bajo dos condiciones. Primero, haga una copia de seguridad de su functions.php antes de editarlo (o use un tema hijo para que el original permanezca intacto). Segundo, inserte el código mediante FTP/SFTP o el «Editor de temas» del administrador en «Apariencia → Editor de temas» en lugar de mediante plugins de fragmentos con autocarga. Si ocurre un error de sintaxis, WordPress mostrará una pantalla en blanco y restaurar el archivo es más fácil por FTP.

Los botones no se parecen a los botones nativos de mi tema. ¿Cómo los estilizo?

La clase button en la etiqueta <a> proporciona los estilos básicos de WooCommerce. Si el botón aún se ve diferente, su tema probablemente anula los selectores de botones de forma más específica (por ejemplo, .products .button en lugar de solo .button). Copie las clases CSS del botón nativo «Añadir al carrito» usando el inspector de su navegador y añádalas al atributo class de su enlace personalizado.

Qué usar en 2026: ¿código o un plugin?

La elección entre código personalizado y un plugin depende de tres factores. Si está ajustando un solo botón en la página de tienda y quiere evitar la sobrecarga de plugins, el código de este artículo es suficiente. No añade peso en el administrador, no crea consultas adicionales a la base de datos y no se rompe con las actualizaciones de WooCommerce (los hooks woocommerce_after_shop_loop_item y woocommerce_template_loop_add_to_cart han sido estables desde la versión 3.0).

Sin embargo, si necesita cambiar el comportamiento de los botones en diferentes páginas o para distintas categorías de productos, vale la pena considerar plugins: YITH WooCommerce Customize My Account Page ofrece un editor visual de botones, y WooCommerce Product Add-Ons le permite añadir campos personalizados antes de la compra.

Comience con código. Es gratuito, transparente y está totalmente bajo su control. Si más adelante necesita más, pase a plugins, ahora con una comprensión clara de exactamente qué funciones necesita.