Complete Guide: How to add one or more WooCommerce products to a page

WooCommerce lists products on the shop page and product category pages. However, a standard WooCommerce installation doesn’t make it easy to add one or more products to other WordPress pages on your site. Luckily, you can use a single product shortcode to add a WooCommerce product to a page or post.

In this article, we’ll show you two easy ways to add WooCommerce products to a page or post. The products will look great and people can quickly add them to the cart without leaving the page. You won’t have to worry about styling or messing around with code.

2 ways to add WooCommerce products to a page or post

There are two ways to add WooCommerce products to a page or post on your WordPress website. Skip directly to the instructions for whichever method you’d prefer:

1. Add one product only
2. List multiple products

Why add products to normal pages on your WordPress site?

There are several reasons why you might want to add one or more WooCommerce products to a page or post on your website. This is becoming more and more important due to changing trends in e-commerce.

The e-commerce industry is changing and online stores are moving away from the ‘traditional’ navigation structure of focusing heavily on the shop and product category pages.

Instead, products are being shown to sell well when they’re displayed in a more content-centric way. An example of this approach is when specific products are recommended and incorporated into wider content such as a sales page or blog post. The reason why this works so well is that it puts the product into context. The user is therefore more likely to buy it!

Let’s take a look at some examples:

Websites selling only one product

Businesses that only sell one product need to display their offering on sales pages and in blog posts and guides. These sorts of websites still need WooCommerce to power the back-end e-commerce functionality. However, the traditional shop and product category pages don’t make a lot of sense for this use case.

A better way to go about it is to use a page builder (like Gutenberg or a plugin) to create eye-catching content about your product and provide quick and easy ways to add the product to the shopping cart directly from that page. This is also perfect for featuring sale products.

Websites promoting products as part of a wider article or blog post

There are tons of websites that promote products as part of an article or blog post.

Food blog

For example, if you run a food blog, you might have a recipe page that includes a table listing all of the ingredients from the recipe as products. This way, readers can quickly buy them without leaving the page. These might be products that are sold directly on your website or affiliate products where the Buy button links to a third-party website (like Amazon or Tesco).

Fashion blog

If you run a fashion blog, you might publish an article about the latest trends, featured products, or the best selling products. Your article might list examples to illustrate each point along with Buy buttons linking to recommended garments. This also works for a Get the Look type blog post in which you dissect a trending look and list featured products to make it easier for customers to buy.

Tech website

And if you run a tech website, you could include an article reviewing the latest gadgets with Buy buttons for each gadget embedded directly on the page. This is much more user-friendly than having to click through to the shop page or even a separate product page for each item. Customers can simply choose the products they’d like to purchase and add them to their shopping cart in one go and proceed to the checkout page. You can also display recent products and related products.

Method #1: how to add one product to a page

The WooCommerce Quick View plugin is the easiest way to add one product at a time to a page or post on your WordPress website.

You can use the plugin’s WooCommerce single product shortcode to insert a Quick View button anywhere on your website.

Instructions

1. Get the WooCommerce Quick Vew Pro plugin and install it on your WordPress website.
2. Go to the page or post you want to add the quick view button and insert the [quick_view id="123" text="Buy T-Shirt"] WooCommerce shortcode.
   1. Replace 123 with the ID of the WooCommerce product you want to show.
   2. Replace Buy T-Shirt with a suitable call to action.
3. Head over to WooCommerce → Settings → Products → Quick view and scroll down to the Product details section to select the different product details that will appear in the lightbox:
   1. Reviews
   2. Price
   3. Short description
   4. Add to cart button
   5. Meta information (such as SKUs)
4. Click the Save changes button to continue.

Whenever a potential customer clicks on the Quick View button, it opens a lightbox containing product information. This way, customers can learn more about the product and add it to their WooCommerce cart without being taken away from the page they’re currently on.

Here are some actionable tips on how to optimize your page for conversions:

1. Add the quick view button immediately after a large image and overview of the product. This improves the button’s visibility and customers will be more likely to click on it!
2. Reword the button text to make it relevant to your use case. You can set it to Buy Now if it’s a simple product or Select Options if you’re selling a variable product.

Check out our complete guide on quick view for WooCommerce for inspiration and ideas!

Method #2: how to list multiple products on a page using WooCommerce single product shortcode

The best way to list multiple WooCommerce products on a page or post is in a product table layout. This makes it easy for visitors to see all of the products at a glance and view product details without having to click through to the single product page. The best part is that they can select options and purchase products directly from the page they’re on.

We recommend using the WooCommerce Product Table plugin to list specific products on your page or post. This versatile plugin lets you specify the products you’d like to list by product category, tag, or product ID. All you have to do is insert a WooCommerce single product shortcode into your page or post.

Instructions

1. Get the WooCommerce Product Table plugin and install it on your WordPress website.
2. Navigate to WooCommerce → Settings → Products → Product tables and configure the following settings:
   1. Enter image,name,description,price,buy in the Columns option.
   2. You can display additional columns like SKU, depending on your needs.
   3. The plugin lets you select the number of products to display on the page.
3. Go to the page or post you want to add the product table to and insert the [product_table] WooCommerce shortcode. Learn how to list specific WooCommerce products in your product table.

This method lets you list specific WooCommerce products away from the shop and category pages.

You can choose what information to show about the product and include quantity pickers, variation dropdowns, and add to cart buttons (or even multi-select checkboxes) directly in the table. It also lets you display specific types of products such as best-selling products.

In this way, people can quickly find everything they’d like to purchase and add the products to their shopping cart without leaving the current page.

Bonus: combining both methods

What if you want to list multiple products on your page or post and want to display them in a lightbox?

Fortunately, the WooCommerce Quick View Pro plugin and WooCommerce Product Table work seamlessly which means you can combine Method #1 and Method #2 to add quick view buttons to your product tables!

Instructions

1. Get the WooCommerce Quick View Pro plugin and the WooCommerce Product Table plugin and install both on your WordPress website.
2. Navigate to WooCommerce → Settings → Products → Product tables and configure the following settings:
   1. Enter image,name,description,price,quick-view,buy in the Columns option.
   2. You can display additional columns like SKU, depending on your needs.
3. Go to the page or post you want to add the product table to and insert the [product_table] WooCommerce shortcode. You can list specific WooCommerce products in your product table.

Start using WooCommerce single product shortcode plugins

Instead of struggling with the WooCommerce plugin, you can use WooCommerce Quick View Pro or WooCommerce Product Table to add one or more products to pages and posts on your WordPress website. It’s incredibly easy to set up and you don’t have to worry about messing around with CSS styling.

And the best part is that it helps you deliver a better user experience. Customers can read through your content, make an informed purchasing decision, and buy the product(s) directly from the page they’re on.

Get WooCommerce Quick View Pro if you want to add one product to your page or WooCommerce Product Table to add multiple products to your pages and posts using WooCommerce single product shortcode!