Un visitante entra en la tienda, revisa cinco productos, cierra la pestaña y un minuto después se olvida del sitio. Esta es una imagen familiar para cualquier propietario de WooCommerce. Un bloque de «vistos recientemente» resuelve este problema: un clic en una tarjeta conocida devuelve al visitante al embudo de conversión.

WooCommerce de serie escribe los IDs de los productos vistos en la cookie woocommerce_recently_viewed. Estos datos ya residen en el servidor de su tienda, sin necesidad de un plugin de seguimiento independiente. Solo queda leer la cookie y mostrar los productos. A continuación le presentamos un shortcode listo para usar que hace esto en 30 líneas de PHP moderno.

💡 Resumen rápido:

• Entienda cómo WooCommerce almacena las vistas en una cookie, un breve párrafo de teoría
• Copie el shortcode [recently_viewed_products] en el functions.php de un tema hijo o en Code Snippets
• Coloque el bloque en la página del carrito, en la barra lateral de producto o después de una búsqueda vacía, y haga que los visitantes regresen

Cómo almacena WooCommerce el historial de vistas

Cuando un visitante abre la página de un producto, WooCommerce añade silenciosamente el ID de ese producto a la cookie woocommerce_recently_viewed. Formato: una cadena con el separador |, por ejemplo 123|456|789. La entrada más antigua está a la izquierda, la más reciente a la derecha. La cookie es de sesión: vive hasta que se cierra el navegador.

No necesitamos escribir nuestro propio seguimiento de vistas. WooCommerce ya recopila los datos. La tarea del shortcode: leer la cadena, dividirla en IDs, filtrar solo los productos existentes y publicados, y pasarlos al mecanismo integrado [products].

Este enfoque proporciona el marcado nativo de WooCommerce: cuadrícula adaptable, gestión de stock y precios, botón «Añadir al carrito», todo lo que el shortcode estándar [products] puede hacer, sin tener que reimplementar la plantilla de visualización.

Código listo para usar: shortcode [recently_viewed_products]

Añada este código al functions.php de un tema hijo o mediante el plugin Code Snippets. Registra el shortcode [recently_viewed_products] con dos parámetros: per_page y columns.

1
/**
2
 * Shortcode: [recently_viewed_products per_page="5" columns="4"]
3
 *
4
 * Displays products recently viewed via the native WooCommerce cookie.
5
 * Uses the built-in [products] shortcode for rendering — no custom WP_Query.
6
 */
7
add_shortcode( 'recently_viewed_products', 'sd_recently_viewed_products' );
8
 
9
function sd_recently_viewed_products( $atts ) {
10
    $atts = shortcode_atts( array(
11
        'per_page' => 5,
12
        'columns'  => 4,
13
    ), $atts );
14
 
15
    // Read the WooCommerce cookie
16
    $cookie = ! empty( $_COOKIE['woocommerce_recently_viewed'] )
17
        ? wp_unslash( $_COOKIE['woocommerce_recently_viewed'] )
18
        : '';
19
 
20
    if ( empty( $cookie ) ) {
21
        return '<p>' . esc_html__( 'You have not viewed any products yet.', 'textdomain' ) . '</p>';
22
    }
23
 
24
    // Parse and sanitize product IDs
25
    $viewed_ids = array_filter( array_map( 'absint', explode( '|', $cookie ) ) );
26
 
27
    if ( empty( $viewed_ids ) ) {
28
        return '';
29
    }
30
 
31
    // Keep only the N most recent items (oldest first in cookie, so slice from start)
32
    $viewed_ids = array_slice( $viewed_ids, 0, (int) $atts['per_page'] );
33
 
34
    $ids_string = implode( ',', $viewed_ids );
35
 
36
    return '<h3>' . esc_html__( 'Recently Viewed Products', 'textdomain' ) . '</h3>'
37
        . do_shortcode(
38
            "[products ids=\"$ids_string\" columns=\"{$atts['columns']}\" orderby=\"post__in\"]"
39
        );
40
}

Dónde insertar el código

**Tema hijo **functions.php, la mejor opción. El código sobrevive a las actualizaciones del tema padre y se almacena en control de versiones junto con el resto de la personalización del sitio.

Plugin Code Snippets, si no hay un tema hijo. Instale Code Snippets desde WordPress.org desde el directorio, cree un nuevo fragmento, pegue el código y actívelo. Funciona con cualquier tema.

No inserte el código en el functions.php del tema padre: lo perderá en la primera actualización.

Desglose línea por línea

• shortcode_atts() fusiona los parámetros del usuario con los valores predeterminados, función estándar de WordPress para procesar atributos de shortcode. A diferencia del obsoleto extract(), no crea variables a partir de un array y no contamina el ámbito.
• wp_unslash() elimina las barras de escape del valor de la cookie, práctica estándar al leer superglobales en WordPress.
• explode('|', ...) divide la cadena 123|456|789 en un array de IDs de cadena.
• array_map('absint', ...) convierte cada ID en un entero no negativo, protección contra basura en la cookie.
• array_filter() descarta ceros y valores vacíos: los productos que ya no existen en la base de datos se excluyen a nivel de ID.
• array_slice() deja solo las N vistas más recientes. La cookie escribe primero los IDs antiguos y al final los nuevos, así que recortamos desde el principio del array.
• implode(',', ...) ensambla la cadena 123,456,789 para el parámetro ids del shortcode integrado.
• do_shortcode('[products ids="..."]') lanza el mecanismo nativo de WooCommerce: miniaturas, títulos, precios, botón «Añadir al carrito», todo con el marcado estándar del tema. Los productos agotados no se muestran automáticamente.

No necesita ensamblar manualmente <ul><li><a>.... El [products] integrado ya sabe cómo hacer todo esto y es mantenido por el equipo de WooCommerce.

Cómo usar el shortcode: parámetros y ejemplos

Coloque [recently_viewed_products] en cualquier lugar donde WordPress procese shortcodes: página, entrada, widget de texto, bloque Shortcode en el editor.

Ejemplos:

• [recently_viewed_products per_page="3" columns="3"], fila compacta de tres productos para la barra lateral
• [recently_viewed_products per_page="8" columns="4"], dos filas de cuatro productos para la página del carrito

Si el visitante aún no ha visto ningún producto, el shortcode muestra un mensaje neutro «Aún no ha visto ningún producto», que puede reemplazar con su propio texto en la línea con esc_html__().

En la práctica, la configuración toma tres minutos. En el video de arriba, un desglose paso a paso del trabajo con shortcodes de WooCommerce y su colocación en el sitio.

Dónde colocar el shortcode: lo que funciona

Página del carrito, la ubicación más potente. El visitante ya ha reunido productos, pero antes de finalizar la compra ve un recordatorio de lo que vio antes. Para tiendas con más de 50 productos, esto devuelve una porción notable de vistas abandonadas al carrito.

Barra lateral de la página de producto. El comprador está comparando varios modelos, el bloque «usted vio» mantiene las alternativas frente a sus ojos. Funciona especialmente bien en tiendas de electrónica y ropa, donde la comparación es parte del proceso de selección.

Después de una búsqueda vacía. El mejor recurso alternativo: «No encontró nada, pero esto es lo que revisó antes». En lugar de una página vacía, el visitante ve productos familiares y es más probable que permanezca en el sitio.

Añada el shortcode a un widget de texto de la barra lateral o mediante el bloque Shortcode en el editor Gutenberg. En los hooks del tema (woocommerce_after_cart, woocommerce_before_shop_loop), solo si se siente seguro editando plantillas.

⁉️🤔 Preguntas frecuentes

¿Funciona el shortcode con caché?

El shortcode depende de la cookie PHP woocommerce_recently_viewed, que se lee del lado del servidor. Si la página se almacena en caché a nivel HTTP (mediante Varnish, NGINX FastCGI Cache o un plugin como WP Rocket), el contenido del shortcode también se cacheará, y un visitante podría ver los productos vistos «por otra persona». Solución: excluya de la caché las páginas con el shortcode o active un modo de caché compatible con WooCommerce (ESI o caché de fragmentos).

¿Puedo mostrar los productos vistos sin un shortcode, mediante un hook?

Sí. La función sd_recently_viewed_products() devuelve una cadena, puede llamarse directamente en cualquier hook del tema: echo sd_recently_viewed_products( array( 'per_page' => 4 ) );. Los hooks adecuados son woocommerce_after_cart, woocommerce_after_single_product y woocommerce_before_shop_loop. Considere la caché si la página se cachea por completo.

¿Cuántos productos se almacenan en la cookie?

Por defecto, WooCommerce almacena los IDs de los últimos 10 productos vistos. Esto está establecido en el código de WooCommerce y no es configurable mediante la interfaz. El shortcode determina mediante el parámetro per_page cuántos de esos 10 mostrar.

¿Por qué es mejor este enfoque que un plugin independiente?

Un código de 30 líneas no añade consultas adicionales a la base de datos, usa la misma cookie que WooCommerce ya escribió. Un plugin independiente a menudo incorpora su propio mecanismo de seguimiento (cookies adicionales, eventos JS, tablas de base de datos). Para una tienda típica, el shortcode cubre el escenario por completo, sin sobrecargar la administración.

¿Por qué usar [products], y no su propio WP_Query?

El [products] integrado proporciona la cuadrícula adaptable del tema, precios, botón «Añadir al carrito», gestión de stock y estado de agotado, sin costo adicional. Con un WP_Query manual, tendría que reimplementar todo esto y mantenerlo a través de las actualizaciones de WooCommerce.

Shortcode en 30 líneas: ¿vale la pena?

La cookie woocommerce_recently_viewed son datos que su tienda ya recopila. Un shortcode de 30 líneas lo convierte en un bloque funcional de «vistos recientemente» sin plugins ni consultas adicionales a la base de datos.

• Si tiene una tienda con más de 50 productos, coloque el shortcode en la página del carrito y pruebe un test A/B con un grupo de control sin el bloque.
• Si usa caché agresiva, excluya la página con el shortcode o active la caché de fragmentos.
• Si el visitante no ha visto productos, el shortcode muestra discretamente un mensaje neutro y no rompe la maquetación.

Añada [recently_viewed_products] a su sitio y compruébelo en una ventana de incógnito del navegador: abra un par de productos, luego vaya a la página con el shortcode. Si el bloque no muestra lo que vio, revise su configuración de caché, lo más probable es que esa sea la causa. ¿Qué método utiliza para mostrar los productos vistos, shortcode, plugin o hook del tema? Escríbalo en los comentarios.