WooCommerce: Display Products Ordered with Permalink in My Account Orders Table

In this tutorial, we’ll learn how to enhance the My Account Orders table in WooCommerce by displaying the products ordered alongside the order details. By default, WooCommerce provides basic order information but doesn’t include a detailed list of purchased products. Adding this functionality allows customers to quickly access their ordered products and easily navigate to their respective product pages for more information.

• Default
• After Changes

/**
* Snippet Name:  Display products with permalink in My Account Orders table
* Snippet Author: wpsnippets.dev
*/

// Adding a Custom Column to My Account Orders Table
function wps_add_order_products_column( $columns ) {
    $new_columns = array();
    foreach ( $columns as $key => $column ) {
        $new_columns[ $key ] = $column;
        if ( 'order-number' === $key ) {
            $new_columns['order-products'] = __( 'Products', 'textdomain' );
        }
    }
    return $new_columns;
}
add_filter( 'woocommerce_my_account_my_orders_columns', 'wps_add_order_products_column' );

// Display products with permalink in My Account Orders table
function wps_display_order_products_column_content( $order ) {
    $order_id = $order->get_id();
    $order = wc_get_order( $order_id );

    if ( $order ) {
        $items = $order->get_items();

        foreach ( $items as $item_id => $item ) {
            $product_id = $item->get_product_id();
            $product = wc_get_product( $product_id );

            if ( $product ) {
                $product_permalink = $product->get_permalink();
                $product_name = $item->get_name();
                echo '<p><a href="' . esc_url( $product_permalink ) . '">' . $product_name . '</a></p>';
            }
        }
    }
}
add_action( 'woocommerce_my_account_my_orders_column_order-products', 'wps_display_order_products_column_content', 10, 1 );

Code Explanation

This code snippet uses mainly 2 functions:

1. Adding a Custom Column to My Account Orders Table
   • The function wps_add_order_products_column adds a custom column named “Products” after the “Order ID” column. It loops through the existing columns and adds the new ‘Products’ column after the ‘Order Number’ column.
   • This hooks into the woocommerce_my_account_my_orders_columns filter hook, which allows you to manipulate the columns displayed in the My Account Orders table.
   • The wps_add_order_products_column function adds the “Products” column to the My Account Orders table, while the wps_display_order_products_column_content function retrieves the products ordered for each order and generates HTML output with product names linked to their respective product pages.
2. Displaying Products in the Custom Column
   • This function wps_display_order_products_column_content displays the products associated with each order in the ‘Products’ column. It retrieves the order ID, fetches the order object, and then retrieves the items in the order.
   • It hooks into the woocommerce_my_account_my_orders_column_order-products action hook, which allows you to add content to the custom column. For each item, it retrieves the product ID, gets the product object, and retrieves its permalink and name.

Overall, these functions enhance the My Account Orders table in WooCommerce by adding a custom column that displays the products ordered with their respective permalinks.