Mostrar productos vistos recientemente en WooCommerce

Este snippet utiliza cookies para rastrear los productos que los usuarios han visto recientemente en tu tienda WooCommerce. Cuando un usuario visita una página de producto, el ID del producto se guarda en una cookie. Luego, el snippet utiliza esta información para mostrar una lista de estos productos con el título «Productos vistos recientemente».

Instalación del Snippet

Para instalar este snippet, sigue los pasos a continuación:

  1. Ve al panel de administración de WordPress.
  2. Navega a Apariencia > Editor de Temas.
  3. Encuentra el archivo functions.php de tu tema activo.
  4. Copia y pega el código del snippet al final del archivo functions.php.
  5. Guarda los cambios.

Casos de Uso

Mejora la Experiencia del Usuario

Al mostrar productos que el usuario ha visto recientemente, haces que sea más fácil para ellos volver a encontrar esos productos, mejorando así su experiencia de navegación.

Aumenta las Oportunidades de Venta

Este tipo de funcionalidad puede actuar como un recordatorio sutil para los usuarios sobre productos que les interesaron pero que no compraron, aumentando las posibilidades de que finalicen la compra.

Personalización

El snippet está configurado para mostrar el título «Productos vistos recientemente» por defecto. Sin embargo, puedes cambiar este título editando la variable $title en el código.

$title = '<h3>Tu título personalizado aquí</h3>';

Consideraciones

Cookies

Este snippet utiliza cookies para rastrear los productos vistos, por lo que debes asegurarte de estar en cumplimiento con las leyes y regulaciones sobre privacidad y cookies en tu jurisdicción.

Compatibilidad

Este snippet está diseñado para funcionar con WooCommerce, por lo que asegúrate de tener instalada y activada esta extensión en tu sitio WordPress.

Snippet para WooCommerce

<?php
/**
 * Añadimos shortcode para mostrar los productos vistos recientemente.
 */
function bf_recent_viewed_products() {
    $viewed_products = ! empty( $_COOKIE['woocommerce_recently_viewed'] ) ? (array) explode( '|', wp_unslash( $_COOKIE['woocommerce_recently_viewed'] ) ) : array();
    $viewed_products = array_reverse( array_filter( array_map( 'absint', $viewed_products ) ) );

    if ( empty( $viewed_products ) ) {
        return;
    }

    $title = '<h3>Productos vistos recientemente</h3>';
    $product_ids = implode( ',', $viewed_products );

    // Utilizar WC_Shortcode_Products en lugar de do_shortcode
    $attributes = array(
        'ids' => $product_ids,
        // Otros atributos aquí, si los necesitas
    );

    ob_start();
    $products = new WC_Shortcode_Products( $attributes, 'products' );
    $products->get_content();
    $product_content = ob_get_clean();

    return $title . $product_content;
}

add_shortcode( 'productos_vistos_recientemente', 'bf_recent_viewed_products' );

 

¡Más Snippets, Más Opciones!

Al compartir, motivamos a más desarrolladores a contribuir. Ayúdanos a hacer de este directorio un punto de referencia en snippets.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

¿Cómo implementar este snippet en la web?

Tienes 2 opciones, una de ellas es mediante plugin y la otra pegando el código en tu web.

1. Añadir snippet con plugin

code-snippets

Code Snippets

Por Code Snippets Pro

  1. Descarga el plugin o búscalo en el repositorio de plugins de Wordpress e instálalo en tu web.
  2. En el menú lateral del Escritorio verás un nuevo enlace (Fragmetos de código). Ves a Fragmentos de código > Añadir nuevo.
  3. Se abrirá una página con un título, bloque de código, descripción y etiquetas, rellena el título con el que quieras guardarlo, ejemplo: Añadir Google Analytics.
  4. En la parte código verás que está activo PHP, ahí pega el código del snippet
  5. La descripción y las etiquetas solo son para tu información y para que luego encuentres más fácil los snippets.
  6. Publicar y activar el snippet.

2. Añadir snippet en el functions.php

Diseño web con WordPress

Accede al archivo functions.php de tu tema o tema hijo, pega el snippet y guarda el archivo.

Lo encontrarás en Apariencia > Editor de archivos de tema, pinchas sobre el enlace  functions.php y pegas el código al final del archivo.

Relacionados: