Quick View for WooCommerce With Shortcodes: Complete Guide

Published on: Updated: June 14, 2019

As an online store owner, you might consider adding product quick view to improve search engine visibility, increase conversions, and boost sales. The easiest way to do this is by using WooCommerce quick view shortcodes to add quick view buttons anywhere on your site.

WooCommerce product shortcodes for WooCommerce Quick View Pro

With this in mind, in this article, we’ll explain how to use a Quick View shortcode to showcase featured products (with quick view buttons), on your product pages or anywhere on your online store. We’ll also explore two different methods for displaying WooCommerce products outside of the main shop and category pages.

What are shortcodes, and how can they be used in WooCommerce?

Shortcodes in WooCommerce allow users to add functionality just about anywhere on their website. For example, you could add a shortcode to your homepage, landing pages, blog posts, widgets, or sidebars.

The key benefit of using WooCommerce shortcodes is that you can add functionality to your site without having to write code. You can choose to display a single product, selected products, or a range of products based on product categories.

You can also add advanced functionality such as creating a quick view pop up which lets customers quick-preview your products.

WooCommerce Quick View

Let customers purchase products from anywhere on your online store!

GET THE PLUGIN

What can you do with WooCommerce shortcodes?

WooCommerce comes with a number of shortcodes out of the box. You can use these shortcodes to insert content or functionality inside posts and pages. For example, you can also use shortcodes to achieve WooCommerce-specific functionality such as:

  • Add products to cart using the [add_to_cart id="5"] shortcode.
  • Show the order tracking form using the [woocommerce_order_tracking] shortcode.
  • Show the user account page using the [woocommerce_my_account] shortcode.

Here are a few use case scenarios where it makes sense to use WooCommerce shortcodes to showcase products anywhere on your online store:

  • Add featured products to the homepage. You could use WooCommerce shortcodes to display featured products on your site’s homepage. This could be useful for all kinds of stores whether they sell high-end goods or inexpensive products.
  • Add selected products to blog posts. If you have a blog page on your online store where you review products, discuss specific product features, or share news, you could add a single product, selected products, top-rated products, or related products to your product review.
  • Showcase best-selling products on sales pages. Whether you’re selling physical goods or digital products, you can create a sales page on your online store to showcase some of your best-selling products. WooCommerce product shortcodes makes this incredibly easy.

Once you’ve added products to your website’s pages or posts, customers will be able to click on the quick view buttons and:

  • Learn more about the product. (They can view product details include its price, description, and reviews.)
  • View product image (with zoom) and the full product gallery.
  • Choose product variations (if available).
  • Set product quantities.
  • Add products to cart.

And the best part is that your customers will be able to do all of this without having to leave the page they’re on! This is a great way to encourage visitors and prospective customers to learn more about your featured product and add it to their shopping cart. Not to mention, it can potentially help you improve your bottom line.

Showcase WooCommerce products with quick view buttons outside of the main shop page (2 methods explored)

Using WooCommerce product shortcodes to showcase products outside of your shop page and category pages is a great way to simplify the buying process and improve your customers’ shopping experience.

For the purpose of this tutorial, we’ll assume that you already have a WooCommerce store set up with some products added to it. Here, we’ll explore two alternative ways to present WooCommerce products to customers:

Check out the demo for each method:

Read about both approaches and choose the one that best fits your needs or use the jump links above to skip directly to each section. You can also implement both methods in your online store at the same time!


Method 1: Using WooCommerce shortcodes to add products (with quick view) to any page or post

Following this method, you’ll be able to display WooCommerce products on product pages or anywhere on your online store using shortcodes.

In this tutorial, we’ll explain how you can add selected products to a blog post. However, you can follow the same steps to add products to your homepage, sales pages, widgets, and sidebars.

Step #1: Install the WooCommerce Quick View Pro plugin

To get started, get the WooCommerce Quick View Pro plugin and install and activate it to your WordPress website.

Next, head over to WooCommerceSettingsProductsQuick view to activate the plugin license.

Activate WooCommerce Quick View Pro license key

Click the Save Changes button at the bottom of the screen to proceed.

WooCommerce Quick View Pro automatically adds quick view buttons to your main shop page and category pages once you activate it. Whenever a customer clicks on the Quick View button, it’ll display each product in a quick view lightbox.

Default front-end preview of WooCommerce Quick View Pro

However, since we want to display WooCommerce products anywhere in the online store, we’ll use WooCommerce product shortcodes.

Step #2: Add the WooCommerce product shortcodes to your blog post

Head over to Posts -> All Posts and open the blog post you want to add the selected product(s) to in the Edit Post screen. (Alternatively, you can go to Posts -> Add New to create a new blog post.)

Next, use the [products] shortcode to display products by ID, SKU, categories, or attributes. Let’s take a look at some examples:

Example #1: Single product

If you want to showcase a specific product in your blog post, you can use the product’s ID or SKU with the shortcode.

[products skus="woo-hoodie-with-logo"]

It would look something like this:

Showcasing a single product using WooCommerce product shortcodes

Example #2: Featured products

If you want to showcase featured products in your blog post, you can use this shortcode:

[featured_products per_page="3" columns="3"]

It would look something like this:

Showcasing featured products using WooCommerce product shortcodes

Example #3: Best-selling products

If you want to showcase your best-selling products in a blog post, you can use this shortcode:

[best_selling_products per_page="3" columns="3"]

It would look something like this:

Showcasing best-selling products using WooCommerce product shortcodes

Example #4: Recent products

If you want to showcase your recent products in the blog post, you can use this shortcode:

[recent_products per_page="3" columns="3"]

It would look something like this:

Showcasing recent products using WooCommerce product shortcodes

The WooCommerce quick view shortcode option makes it easy for users to add products anywhere on their site. This way, whenever a customer lands on your blog post, they can use the Quick View button to launch the quick view lightbox and:

  • View product details – including product name, description, reviews, price, and meta.
  • Select variations and set quantities.
  • View order details and add products to cart.

Further reading: Check out the official documentation for WooCommerce product shortcodes for more ideas! You could, for example, add your top rated products or related products to a blog post.

Step #3: Choose which product details to display in the quick view lightbox

With WooCommerce Quick View Pro, you can choose which product details to display in the quick view lightbox. Here’s how:

Navigate to the plugin’s settings screen (WooCommerceSettingsProductsQuick view) and scroll down till you reach the Product details section.

List of WooCommerce product details

From there, you can choose to display any combination of product details in the quick view lightbox including:

  • Reviews
  • Price
  • Short description
  • Add to cart button
  • Meta information (like product SKUs and categories)

For example, if you only wanted to display the product’s price, variations, and add to cart button, your quick view lightbox would look like this:

Preview of WooCommerce Quick View Pro displaying product details


Method 2: Using WooCommerce Product Table to display products in a table layout on any page or post

By following the step-by-step instructions below, you’ll be able to list WooCommerce products in a table layout (with quick view) in blog posts and pages.

We’ll explain how you can add a product table to a blog post. However, you can follow the same steps to list products anywhere on your online store. For example, you might consider adding a product table shortcode to your WooCommerce checkout page (or WooCommerce cart page) or list sale products on a landing page.

Step #1: Install WooCommerce Quick View Pro and WooCommerce Product Table

To get started, get the WooCommerce Quick View Pro plugin and the WooCommerce Product Table plugin and install and activate both to your WordPress website. Next, head over to:

  • WooCommerceSettingsProductsQuick view (for WooCommerce Quick View Pro)
  • WooCommerceSettingsProductsProduct tables (for WooCommerce Product Table)

… to activate the plugin licenses.

Activate the WooCommerce Product Table license key

Click the Save Changes button at the bottom of the screen to proceed.

Step #2: Configure the product table settings

From the same settings screen, scroll down till you reach the Columns option under Table content. Enter image,name,description,price,quick-view,add-to-cart into the Columns option.

Configure columns for WooCommerce Product Table

Check out the complete list of available column options to customize your product table! For example, you might want to include product categories as a column. This way, customers could sort the product table based on product category.

Optionally, you can scroll down to the Quick View Pro section on the same screen to replace all links in the product table with quick view links. All you have to do is tick the Product links checkbox.

Disable product links using WooCommerce Product Table

Click the Save Changes button to continue.

Step #3: Add a product table to your blog post

Head over to Posts -> All Posts and open the blog post you want to add the product table to in the Edit Post screen. (Alternatively, you can go to Posts -> Add New to create a new blog post.)

Next, use the following shortcode to list selected products in a table layout:

[product_table include="66,64,46"]

Note: You can enter one product ID or a list of products IDs depending on your preferences. Simply replace the list of IDs in the shortcode given above with the IDs of the products you want to showcase.

Simply add the [product_table include="66,64,46"] shortcode to the text editor:

WooCommerce Product Table shortcode in text editor

Finally, click the Publish button and preview it on your site’s front-end. It will look something like this:

Preview of the WooCommerce Product Table plugin

Customers can use the filter options above the table to view products based on product attributes such as color or size.

Further reading: For more ideas on how to use WooCommerce Quick View Pro, be sure to check out this in-depth guide!

Conclusion

With a Quick View plugin shortcode, you’re able to add featured products anywhere on your site and make it easier for customers to buy from you. Customers will be able to learn about your products, choose variations, set quantities, and add products to cart without leaving the page (or post) they’re on.

WooCommerce Quick View

Let customers purchase products from anywhere on your online store!

GET THE PLUGIN

Let’s quickly recap the two different options we covered above:

  • Those of you looking to add featured products to pages, posts, widgets, or sidebars (with quick view) can do so by using quick view plugin shortcodes with WooCommerce Quick View Pro.
  • However, if you’re looking for an easy way to showcase WooCommerce products in a table layout anywhere on your online store then we’d recommend using the WooCommerce Product Table plugin with WooCommerce Quick View Pro.

GET WOOCOMMERCE QUICK VIEW PRO GET WOOCOMMERCE PRODUCT TABLE

What sort of WooCommerce quick view implementations are you looking to achieve? We’d love to hear from you so let us know in the comments section below!

Filed under: WooCommerce Product Table, WooCommerce Quick View Pro ,