Mostrar el historial de productos comprados en la página de Mi cuenta

¿Quieres mejorar la experiencia de tus clientes en tu tienda online? ¿Conseguir más valoraciones en tu tienda online? Añadir una pestaña personalizada del historial de compras en la página «Mi Cuenta» de WooCommerce es una excelente manera de hacerlo.

En este tutorial y con el apoyo como siempre del vídeo de Youtube, te mostraré cómo implementar una nueva pestaña llamada «Productos Adquiridos» que muestra todos los productos comprados por el usuario con detalles útiles como imagen, precio, y un enlace directo al pedido y a la valoración del producto como podemos ver aquí:

Así que si quieres esta funcionalidad, sigue leyendo.

Beneficios de Implementar la Pestaña «Productos Adquiridos»

• Mejorar la experiencia del usuario: Los clientes pueden ver fácilmente todos los productos adquiridos en un solo lugar, lo que facilita la navegación y ahorra tiempo.
• Impulsar la interacción: El botón para valorar productos fomenta la generación de reseñas, lo que mejora la reputación de tu tienda.
• Facilidad de seguimiento: Los clientes pueden acceder rápidamente al número de pedido asociado y ver los detalles completos del mismo.
• Aumento de la retención: Ofrecer funciones personalizadas y útiles incrementa la fidelidad de tus clientes hacia tu tienda.

Implementar esta funcionalidad en WooCommerce

Para poder implementarlo, añade el siguiente código a tu fichero functions.php o bien en tu plugin de funcionalidades como explico aquí.

---

// Agregar un nuevo endpoint "productos-adquiridos" a la página Mi Cuenta
add_action( 'init', 'add_purchased_products_endpoint' );
function add_purchased_products_endpoint() {
    // Registra el endpoint para la URL de la cuenta de WooCommerce
    add_rewrite_endpoint( 'productos-adquiridos', EP_ROOT | EP_PAGES );
}

// Agregar enlace al nuevo endpoint en el menú de Mi Cuenta
add_filter( 'woocommerce_account_menu_items', 'add_purchased_products_link', 10, 1 );
function add_purchased_products_link( $items ) {
    // Insertar la pestaña "Productos Adquiridos" debajo de la de "Pedidos"
    $new_items = [];
    foreach ( $items as $key => $value ) {
        $new_items[ $key ] = $value;
        if ( 'orders' === $key ) {
            // Agregar el nuevo enlace al array del menú
            $new_items['productos-adquiridos'] = 'Productos Adquiridos';
        }
    }
    return $new_items;
}

// Mostrar el contenido del nuevo endpoint
add_action( 'woocommerce_account_productos-adquiridos_endpoint', 'purchased_products_content' );
function purchased_products_content() {
    // Obtener todos los pedidos completados del usuario actual
    $customer_orders = wc_get_orders( array(
        'customer_id' => get_current_user_id(),
        'status'      => array_map( 'wc_get_order_status_name', wc_get_is_paid_statuses() ),
    ));

    if ( $customer_orders ) {
        // Iniciar tabla HTML para mostrar los productos adquiridos
        echo '<table class="woocommerce-table shop_table shop_table_responsive">';
        echo '<thead><tr><th>Imagen</th><th>Producto</th><th>Precio</th><th>Número de Pedido</th><th>Acciones</th></tr></thead><tbody>';

        foreach ( $customer_orders as $order ) {
            foreach ( $order->get_items() as $item ) {
                $product = $item->get_product();
                if ( $product ) {
                    echo '<tr>';
                    // Mostrar imagen del producto
                    echo '<td>' . $product->get_image( 'thumbnail' ) . '</td>';
                    // Mostrar enlace al producto adquirido
                    echo '<td><a href="' . esc_url( $product->get_permalink() ) . '">' . esc_html( $item->get_name() ) . '</a></td>';
                    // Mostrar precio del producto
                    echo '<td>' . wc_price( $product->get_price() ) . '</td>';
                    // Mostrar enlace al pedido relacionado con la fecha del pedido
                    echo '<td><a href="' . esc_url( $order->get_view_order_url() ) . '">' . esc_html( $order->get_order_number() ) . '</a><br>' . esc_html( wc_format_datetime( $order->get_date_created() ) ) . '</td>';
                    // Agregar botón para valorar el producto
                    echo '<td><a class="button" href="' . esc_url( $product->get_permalink() . '#reviews' ) . '">Valorar Producto</a></td>';
                    echo '</tr>';
                }
            }
        }

        echo '</tbody></table>';
    } else {
        // Mostrar mensaje si no hay productos adquiridos
        echo '<p>No se han encontrado productos adquiridos.</p>';
    }
}

// Agregar título personalizado al endpoint "productos-adquiridos"
add_filter( 'woocommerce_endpoint_productos-adquiridos_title', 'purchased_products_title' );
function purchased_products_title( $title ) {
    return 'Productos Adquiridos';
}

// Asegurar que el endpoint funcione correctamente al guardar los enlaces permanentes
add_action( 'woocommerce_flush_rewrite_rules', 'flush_rewrite_rules' );

IMPORTANTE: Después de implementarlo para que funcione todo correctamente ve al administrador de WordPress a Ajustes > Enlaces Permanentes > Actualizar sin tocar nada. Para que la nueva ruta que hemos implementado a esa pestaña funcione.

Si no sabes como pegar el código o te has pedido aquí te dejo el vídeo de cómo hacerlo: