How to Add a WooCommerce Product to a Page or Post

In a standard WooCommerce install, if you’d like to add a WooCommerce product to a page or post, the process can be a little clunky and hard to get looking right. 

Depending on the theme you’re using, its settings, and styles, you could be left with a product display that not only looks bad but doesn’t function properly either. The good news is, there’s a better and easier way to get it done.

So, by the end of this article, you’ll know exactly how to add a WooCommerce product to a page or post. The best part? You’ll be able to do it in 2 steps with the product lightbox plugin, WooCommerce Quickview.

How WooCommerce Quickview works

When a potential customer lands on a post or page on your site, somewhere within the post they’ll see a button that either says ‘Quickview’ or custom text of your choice.

Top tip: Display your Quickview button near a photograph and the name of your product of choice. This way customers can enjoy your page/post and click the button for more information.

Once clicked, a lightbox will open displaying all the information about the product in question. Customers can then add this product to their cart and even scroll through your other products using the lightbox arrows.

This lightbox lets you display more than just the product name and price. You’ll be able to display the product gallery, its short or long description, meta information, and more.

Once added to the customer’s cart, the customer will see an ‘Added!’ message and they can continue reading the post/page before heading to the checkout.

We now know what your WooCommerce product will look like on posts and pages. Next, let’s go through how to add them. This process is very straightforward and quick, so let’s get right to it.

How to add a WooCommerce product to a page

To add a WooCommerce product to a page, you’ll need to:

1. Install the product lightbox plugin, WooCommerce Quickview.
2. Add the Quickview shortcode to your page.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your online store.

Step 1: Install WooCommerce Quickview

To get started, purchase WooCommerce Quickview from the Iconic store: iconicwp.com/woocommerce-quickview

Then follow these steps:

1. Go to Plugins > Add New > Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your licence key.

Now that we have WooCommerce Quickview installed, we can move on to adding your WooCommerce product to a page.

Step 2: Add the Quickview shortcode to your page

Before we add the shortcode to your page, we’ll first need to determine what you want your Quickview to look like.

WooCommerce Quickview allows you to customize this as much as you like. 

In order to blend it seamlessly with your online store, go through the following settings:

1. Go to WooCommerce > Quickview in your WordPress dashboard.
2. Click the Popup Settings tab.
3. In the General section, you can choose to allow customers to navigate between different products when the lightbox is open.
4. The Imagery section allows you to adjust the settings for your product image gallery, including how fast it scrolls, the buttons you want to use and more.

5. Next is the Content section. It’s here that you can add or remove almost any element of the lightbox. Don’t want the product quantity showing? Remove it.

6. Once you’ve adjusted all the settings, click the Save Changes button.

Now that we’ve customized the look of the lightbox and the content you want in it. Next, we can start adding your WooCommerce products to pages.

To add a specific product to a page, go through the following steps:

1. Copy the shortcode [quickview-button product-id="36"].
2. Go to Products > All Products.
3. Hover over the name of the product you want to display, its product ID should be revealed. 

4. Copy this number and replace the “36” in the above shortcode. It should now be: [quickview-button product-id="42"]
5. Once done, you can add this shortcode into your page or post by adding a shortcode block and pasting it in (if you’re using Gutenberg). If you’re using the classic editor, simply paste the shortcode in with the rest of your text.

6. Then, save your page or post as you would normally and your new button will be displayed and ready to use.

If you’d like to customize your Quickview button a little further, you can:

• Change the text displayed on the button.
• Pick a different icon to be used on the button.
• Amend which button styles it uses to fit it in with your theme.

Your product Quickview button has now been added and readers can view your products and add them to their cart in the simplest way possible.

Add WooCommerce products to your pages

That’s it, your WooCommerce store now has WooCommerce products displaying on your pages. With this up and running, you’ll be able to sell products within specific pages and posts, resulting in more sales for your online store.

Make these changes quickly and easily with WooCommerce Quickview.