How to Create WooCommerce Recently Viewed Products

Table of Contents

Are you looking for a way to display recently viewed products using a shortcode?

In this post, I want to show you how to create WooCommerce’s recently viewed product shortcode. By default, WooCommerce allows you to use a widget to display the list of products a customer has recently viewed.

This built-in solution is very effective, and we believe it will become a Gutenberg block soon.

However, you may want to display related products on a new page. This means that you need to create a shortcode.

WooCommerce Recently Viewed Products Shortcode

In this brief tutorial, we will share how you can create a simple shortcode for displaying recently viewed products. Before you proceed, you need to note that this solution involves handling code.

If you are not familiar with handling code, we recommend contacting a qualified WordPress developer so that you do not mess up your site.

You should also create a child theme so that your changes are not lost during an update.

Let us see how you can achieve this.

Steps to Add Recently Viewed Products Shortcode

To create the shortcode, we will take advantage of the existing [products] shortcode and “pass” product IDs to it without the need of reinventing the wheel.

Alternatively, you can create a plugin that registers a shortcode into a theme. We will use this method, as it is the easiest.

You need to create a new folder with the name of the plugin.

If you see no recent products it’s because you still need to have a Recently Viewed Products widget active. The “woocommerce_recently_viewed” cookie is stored only when the recently viewed products widget is in use.

The most important data we need are stored in a cookie called $_COOKIE[‘woocommerce_recently_viewed’].

You can include your own code to track/create cookies if wanted:

function custom_track_product_view() {

    if ( ! is_singular( 'product' ) ) {

        return;

    }

    global $post;

    if ( empty( $_COOKIE['woocommerce_recently_viewed'] ) )

        $viewed_products = array();

    else

        $viewed_products = (array) explode( '|', $_COOKIE['woocommerce_recently_viewed'] );

    if ( ! in_array( $post-&gt;ID, $viewed_products ) ) {

        $viewed_products[] = $post-&gt;ID;

    }

    if ( sizeof( $viewed_products ) &gt; 15 ) {

        array_shift( $viewed_products );

    }

    // Store for session only

    wc_setcookie( 'woocommerce_recently_viewed', implode( '|', $viewed_products ) );

}

add_action( 'template_redirect', 'custom_track_product_view', 20 );



Here is the full code for the plugin:




function njengah_woocommerce_recently_viewed_products( $atts, $content = null ) {

// Get shortcode parameters

extract(shortcode_atts(array(

&quot;per_page&quot; =&gt; '5'

), $atts));

// Get WooCommerce Global

global $woocommerce;

// Get recently viewed product cookies data

$viewed_products = ! empty( $_COOKIE['woocommerce_recently_viewed'] ) ? (array) explode( '|', $_COOKIE['woocommerce_recently_viewed'] ) : array();

$viewed_products = array_filter( array_map( 'absint', $viewed_products ) );

// If no data, quit

if ( empty( $viewed_products ) )

return __( 'You have not viewed any product yet!', 'rc_wc_rvp' );

// Create the object

ob_start();

// Get products per page

if( !isset( $per_page ) ? $number = 5 : $number = $per_page )

// Create query arguments array

$query_args = array(

'posts_per_page' =&gt; $number,

'no_found_rows'  =&gt; 1,

'post_status'    =&gt; 'publish',

'post_type'      =&gt; 'product',

'post__in'       =&gt; $viewed_products,

'orderby'        =&gt; 'rand'

);

// Add meta_query to query args

$query_args['meta_query'] = array();

// Check products stock status

$query_args['meta_query'][] = $woocommerce-&gt;query-&gt;stock_status_meta_query();

// Create a new query

$r = new WP_Query($query_args);

// If query return results

if ( $r-&gt;have_posts() ) {

$content = '&lt;ul class=&quot;rc_wc_rvp_product_list_widget&quot;&gt;';

// Start the loop

while ( $r-&gt;have_posts()) {

$r-&gt;the_post();

global $product;

$content .= '&lt;li&gt;

&lt;a href=&quot;' . get_permalink() . '&quot;&gt;

' . ( has_post_thumbnail() ? get_the_post_thumbnail( $r-&gt;post-&gt;ID, 'shop_thumbnail' ) : woocommerce_placeholder_img( 'shop_thumbnail' ) ) . ' ' . get_the_title() . '

&lt;/a&gt; ' . $product-&gt;get_price_html() . '

&lt;/li&gt;';

}

$content .= '&lt;/ul&gt;';

}

// Get clean object

$content .= ob_get_clean();

// Return whole content

return $content;

}

// Register the shortcode

add_shortcode(&quot;woocommerce_recently_viewed_products&quot;, &quot;njengah_woocommerce_recently_viewed_products&quot;);



After adding the code, add the [woocommerce_recently_viewed_products per_page="5"] on any page.

This is the outcome:

Conclusion

In this brief tutorial, we have shared how you can display recently viewed products using a shortcode.

You should be careful when editing the functions.php file because if you make a mistake, it will display a critical error.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Create WooCommerce Recently Viewed Products Shortcode

WooCommerce Recently Viewed Products Shortcode

Steps to Add Recently Viewed Products Shortcode

Conclusion

Similar Articles

Related