WooCommerce Tips and Tricks: Shortcode for Displaying All Products Purchased by User
WooCommerce is an open-source e-commerce plugin for WordPress that allows users to create an online store and sell products or services. One of the most important features of WooCommerce is the ability to display products purchased by a user on their account page. This feature allows users to view all the products they have purchased, their order status, and other relevant details. In this blog post, we will discuss how to display all products purchased by a user via shortcode in WooCommerce.
Firstly, let’s understand what shortcodes are. Shortcodes are simple codes that enable users to add dynamic content to their WordPress site without having to know any coding. Shortcodes are used to perform a specific function, such as displaying content or inserting a form, etc.
In WooCommerce, shortcodes are used to display various types of information about the products, such as the product name, price, and description. You can use shortcodes to create a page that displays all the products purchased by a user. Here’s how you can do it:
Step 1: Creating a Shortcode
To create a shortcode, you need to add a code snippet to your WordPress theme’s functions.php file. Here’s the code snippet you can use to create a shortcode for displaying all the products purchased by a user:
// Display all products purchased by user via shortcode
function display_user_products_purchased( $atts ) {
$user_id = get_current_user_id();
$args = array(
'post_type' => 'product',
'meta_query' => array(
array(
'key' => '_customer_user',
'value' => $user_id,
'compare' => '=',
),
),
'posts_per_page' => -1,
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
$output = '<ul>';
while ( $loop->have_posts() ) {
$loop->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
$output .= '</ul>';
} else {
$output = 'No products found';
}
wp_reset_postdata();
return $output;
}
add_shortcode( 'user_products_purchased', 'display_user_products_purchased' );
This code creates a function called display_user_products_purchased() that queries the database for all the products purchased by the current user. It then generates a list of links to the products and returns it as output. Finally, the code registers the shortcode with the name user_products_purchased.
Step 2: Adding the Shortcode to a Page
Once you have created the shortcode, you can use it to display all the products purchased by a user on a page. To do this, you need to create a new page in WordPress and add the following shortcode to the page content:
[user_products_purchased]
When you publish the page, the shortcode will be replaced with a list of all the products purchased by the current user.
Step 3: Styling the Output
The output generated by the shortcode may not look great by default, so you may want to add some CSS to style it. You can use the following CSS code to style the list of products:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
li a {
color: #000;
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
This code styles the unordered list by removing the bullet points and setting the margin and padding to zero. It
also sets the margin-bottom of the list items to 10px and sets the color and text-decoration for the links to the product pages.
Step 4: Enhancing the Output
While the shortcode we created above will display a list of all products purchased by a user, it may not provide enough information for some users. Here are some ways you can enhance the output:
- Add more information about the products: You can modify the shortcode to include more information about the products, such as the product image, price, and description. To do this, you can use the WooCommerce functions to get the product data and display it in the output.
- Group the products by order: Instead of displaying all the products purchased by a user in a single list, you can group the products by order. This will make it easier for users to see which products were purchased together and provide them with a better overall view of their purchase history.
- Provide filters and sorting options: If your users have a large number of products purchased, it may be helpful to provide them with filters and sorting options to make it easier for them to find the products they’re looking for. You can use plugins or custom code to add filtering and sorting options to the shortcode output.
For example we could do some or all of the following.
Adding Product Image:
To add the product image to the output, you can use the get_the_post_thumbnail() function in WordPress, which retrieves the post thumbnail as a HTML img element.
Here’s an example code that adds the product image to the output:
function display_user_products_purchased( $atts ) {
$user_id = get_current_user_id();
$args = array(
'post_type' => 'product',
'meta_query' => array(
array(
'key' => '_customer_user',
'value' => $user_id,
'compare' => '=',
),
),
'posts_per_page' => -1,
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
$output = '<ul>';
while ( $loop->have_posts() ) {
$loop->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_post_thumbnail() . get_the_title() . '</a></li>';
}
$output .= '</ul>';
} else {
$output = 'No products found';
}
wp_reset_postdata();
return $output;
}
This code adds the get_the_post_thumbnail() function to retrieve the post thumbnail for each product and appends it to the output before the product title.
Adding Product Price:
To add the product price to the output, you can use the get_price_html() function in WooCommerce, which retrieves the formatted price for a product.
Here’s an example code that adds the product price to the output:
function display_user_products_purchased( $atts ) {
$user_id = get_current_user_id();
$args = array(
'post_type' => 'product',
'meta_query' => array(
array(
'key' => '_customer_user',
'value' => $user_id,
'compare' => '=',
),
),
'posts_per_page' => -1,
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
$output = '<ul>';
while ( $loop->have_posts() ) {
$loop->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_post_thumbnail() . get_the_title() . ' - ' . wc_price( get_post_meta( get_the_ID(), '_price', true ) ) . '</a></li>';
}
$output .= '</ul>';
} else {
$output = 'No products found';
}
wp_reset_postdata();
return $output;
}
This code adds the get_price_html() function to retrieve the formatted price for each product and appends it to the output after the product title.
Adding Product Description:
To add the product description to the output, you can use the get_the_excerpt() function in WordPress, which retrieves the post excerpt as a string.
Here’s an example code that adds the product description to the output:
function display_user_products_purchased( $atts ) {
$user_id = get_current_user_id();
$args = array(
'post_type' => 'product',
'meta_query' => array(
array(
'key' => '_customer_user',
'value' => $user_id,
'compare' => '=',
),
),
'posts_per_page' => -1,
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
$output = '<ul>';
while ( $loop->have_posts() ) {
$loop->the_post();
$output .= '<li><a href="' . get_permalink() . '">' . get_the_post_thumbnail() . get_the_title() . ' - ' . wc_price( get_post_meta( get_the_ID(), '_price', true ) ) . '<br />' . get_the_excerpt() . '</a></li>';
}
$output .= '</ul>';
} else {
$output = 'No products found';
}
wp_reset_postdata();
return $output;
}
This code adds the `get_the_excerpt()` function to retrieve the product description for each product and appends it to the output after the product title and price.
By enhancing the output with additional information, you can provide your users with a better view of the products they have purchased.
Conclusion
In this blog post, we discussed how to display all products purchased by a user via shortcode in WooCommerce. We created a shortcode that queries the database for all the products purchased by the current user and generates a list of links to those products. We also discussed ways to enhance the output by adding more information about the products, grouping the products by order, and providing filters and sorting options. By following the steps outlined above, you can provide your users with a better view of their purchase history and make it easier for them to find the products they’re looking for.
