Improve UX

Show recently viewed products on WooCommerce

Pinterest LinkedIn Tumblr

This feature can increase user experience on your e-commerce. Your customers won’t miss their favorite products thanks to Recently Viewed Products sections. This article introduces 2 free and 1 paid plugins also 1 snippet for it.

1- Recently viewed and most viewed products ( Free )

Also, this plugin is totally free. You can display recently also most viewed products with shortcodes.

Unless you add shortcode to somewhere, it won’t display anything.

As you can see on the picture, you can add shortcode into a post or wherever!
After shortcode, plugin has added the products
Settings page is under WooCommerce Title

2- Wc Recently viewed products ( Free )

It is a totally free plugin.Simply, you display recently viewed products.

After activation, it displays the products on product page automatically. You can set showing product number. Also, you have options to display on shop and cart pages.

It displays the products on Product Page
You can access this settings page under WooCommerce Title

3- Yith WooCommerce recently viewed products ( Paid )

This plugin checks products that users have previously viewed and send tailored emails with special offers.

Show the “recently viewed” section where you want

You can show the section where you want by using a shortcode or simply, you can show it on the Cart page or in My Account area. Also, you can use a widget to show in a sidebar or another widget area.

You can show it by using shortcode

Create unlimited shortcodes with your custom settings

You can build your own shortcode on the settings page. There are many options to detail your product section. You will just have to copy and paste them where you want them to be. Quick and easy.

Show a “Most viewed products” section

Also, you can show most viewed products.

Follow and show every time

Every time, you will follow the products that users look at and you can display them even if your customer change their browsers.

Schedule automatic emails to bring your users back to your shop

This plugin sends attractive e-mails to bring your customers back to your shop automatically.

All Features

  • Display as many suggested products as you want
  • Show only suggested products “In stock”
  • You will have control over the cookies
  • Create a custom page that shows “you looked at these” for every user
  • Sort suggested products by sales, prices, latest viewed, random, or publication date
  • Create a slider for suggested products
  • Send a customized e-mail if a user doesn’t come again since your custom number of day
  • Integrate with Mandrill
  • Add a coupon in the email
  • Shortcodes

Coding Solution

Also, you have a shortcode option thanks to the below snippet. Its usage is simple; there are only simple 3 steps.

You will get a section like this:

Firstly, you will paste the below code to your function.php.

//short code to get the woocommerce recently viewed products
 <?php  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->ID, $viewed_products ) ) {
        $viewed_products[] = $post->ID;
    }

    if ( sizeof( $viewed_products ) > 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 );
 function rc_woocommerce_recently_viewed_products( $atts, $content = null ) {
    // Get shortcode parameters
    extract(shortcode_atts(array(
        "per_page" => '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' => $number,
                    'no_found_rows'  => 1,
                    'post_status'    => 'publish',
                    'post_type'      => 'product',
                    'post__in'       => $viewed_products,
                    'orderby'        => 'rand'
                    );
    // Add meta_query to query args
    $query_args['meta_query'] = array();
    // Check products stock status
    $query_args['meta_query'][] = $woocommerce->query->stock_status_meta_query();
    // Create a new query
    $r = new WP_Query($query_args);

    // ----
    if (empty($r)) {
      return __( 'You have not viewed any product yet!', 'rc_wc_rvp' );

    }?>
 <?php while ( $r->have_posts() ) : $r->the_post(); 
   $url= wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

   ?>

   <!-- //put your theme html loop hare -->
 <li >
    <a class="product-picture" href="<?php echo get_post_permalink(); ?>" title="Show details for Watches">
        <img alt="Picture of Watches" src="<?php echo $url;?>" title="Show details for Watches" />
    </a>
<a class="product-name" href="<?php echo get_post_permalink(); ?>"><?php the_title()?></a>
</li>   
<!-- end html loop  -->
<?php endwhile; ?>



    <?php wp_reset_postdata();
    return '<div class="woocommerce columns-5 facetwp-template">' . ob_get_clean() . '</div>';
    // ----
    // Get clean object
    $content .= ob_get_clean();
    // Return whole content
    return $content;
}
// Register the shortcode
add_shortcode("woocommerce_recently_viewed_products", "rc_woocommerce_recently_viewed_products");
    ?>

You can look at the resource from Github by clicking here.

Now, you can display it wherever with below shortcode.

[woocommerce_recently_viewed_products]

Also you can custom your displaying settings.

Here are some usefull change:

Change product number per section

As a default, the snippet shows up to 5 products on a recently viewed products section. You have two options to set your target product number.

Via per_page attribute in the shortcode, you can set it. For example, if you want to show maximum 2 products on a section, you should use the below shortcode:

[woocommerce_recently_viewed_products per_page="2"]

But this way needs the per_page attribute for every shortcode. If you want to set a new absolute number, you can follow the below steps.

Note: After this change, per_page attribute won’t work anymore.

Find below code in the snippet:

// Get products per page
    if( !isset( $per_page ) ? $number = 5 : $number = $per_page )
        // Create query arguments array
        $query_args = array(
            'posts_per_page' => $number,
            'no_found_rows'  => 1,
            'post_status'    => 'publish',
            'post_type'      => 'product',
            'post__in'       => $viewed_products,
            'orderby'        => 'rand'
        );

And change $number with your goal.For example, to display maximum 7 products on a section, you should change it like this:

// Get products per page
    if( !isset( $per_page ) ? $number = 5 : $number = $per_page )
        // Create query arguments array
        $query_args = array(
            'posts_per_page' => 7,
            'no_found_rows'  => 1,
            'post_status'    => 'publish',
            'post_type'      => 'product',
            'post__in'       => $viewed_products,
            'orderby'        => 'rand'
        );

That’s it. Now, every short-code will use your absolute target number while display. So, you don’t need to use the same attributes in every shortcode.

By following WooFocus, you can learn more WooCommerce Tutorials & Tricks.

Write A Comment