Do you want to add WooCommerce products to any post or page on your store?
You can add your products to any post or page, which can be beneficial. Adding a popular product on a landing page can help you attract more views on it or enhance your affiliate blogs by embedding a product instead of a plain link.
In today’s article, I’ll show you two easy ways to add products to any post or page. The products will look fantastic, and customers will be able to easily add them to their shopping cart without leaving the post or page. You won't have to worry about styling or coding.
Here’s a quick sneak peek of the final results.
On This Page
How to add products to any Post or Page?
I’ll show you the two different methods to add products to any post or page on your WooCommerce store. Following are the methods:
Method 1: Adding Products to Any Post Using Product Table Plugin
This is the simplest method to add multiple or specific products to any post or page. Using WooCommerce Product Table plugin, you will be able to display products in a table/list layout, and users can add them to their cart without leaving the post or page.
Follow the following steps to add products to any post or page.
1. Install and Activate the WooCommerce Product Table Plugin
Note: You can skip this step if you have already installed and activated the WooCommerce Product Table plugin.
To install the WooCommerce Product Table plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the WooCommerce Product Table plugin.
2. Create a New Product Table
Once you have installed and activated the plugin, we need to create a product table to display the products on any WordPress post or page. So, follow the given steps:
1. Add a New Table
Navigate to Woosuite » Product Table from your WordPress dashboard and click on the Add New Table button.
Once you click it, you’ll see a screen from where you can create and control the different table settings.
2. Order Form Display
Give an internal name to the table. You should use a unique name as It will be helpful in case you are working with multiple product tables at a time.
3. Order Form Information
Now expand the Order Form Information by clicking on the (▾)
Now, specify the columns you want to add to the table. To add a column, just drag the column from the Available columns section and drop it in the selected columns sections.
You can also adjust the other settings like the image size and description length. I am keeping them as the default.
5. Order Form Controls
Now expand the Order Form Controls by clicking on the (▾)
5.1. Add a Product Rule
Because we want to display products from a specific category or products with a tag or attribute so we will add a rule to our table so only products within the category will be displayed.
To add a product rule, click on the ‘Add Rule’ button.
5.2. Add a Product Condition
Once you click the button, you’ll see a new rule with some fields added. From here, you can select specific products to be displayed in the table.
You can filter products by:
- Products
- Categories
- Tags
- Attributes/Custom Taxonomies
- Recently Purchased
- Stock Status
- More options are coming soon
I’ll be displaying products from a specific category so, I’ll be filtering the products by the category. From the Type dropdown, I have selected ‘Category’.
And from the Compare dropdown, make sure you have selected ‘IN’. It means “the products in the selected category”.
Now, in the Value field, we need to select the category from which we want to display the products in the table. You can select any of the available categories in your store.
And make sure that you have selected the AND Condition, which means that all the products in the selected category will be displayed in the table.
6. Save Changes
Once you have created the table, click on the Save Changes button at the top right corner of your screen to save the changes.
3. Copy the Shortcode of the Table
Now we need the table's shortcode to add the table anywhere in the post or page.
To copy the shortcode, go back to the General Settings of the plugin by clicking on the back arrow at the top.
Once you are in the plugin’s General Settings, you’ll see the table you just created, at the bottom of the screen.
To use the shortcode, click on the Copy button next to the shortcode to copy it. You can use this shortcode to display the table on any post or page in your store.
4. Edit the Post to Paste the Shortcode
Once you have copied the shortcode, now we need to paste it into the post or page where we want to add the products.
To do so, we need to edit the post or page. I’ll edit one of the posts on my store and add the products to it.
4.1. Navigate to Posts
Navigate to Posts » All Posts from your WordPress dashboard. Here you’ll see all the published and draft posts.
4.2. Edit the Post
Now we need to edit any of the posts. To edit it, hover your mouse over it, and you’ll see the Edit button below it. Click on the button to edit the post.
Once you click the button, you’ll be redirected to the edit post page from where you can edit the post.
4.3. Add the Shortcode Block
Now on the Edit Post Page, you will need to paste the shortcode of the product table, in the post where you want to add the products.
To paste the shortcode, first, we need to add a Shortcode Block.
I’ll be adding the block after the first paragraph of the post. So, place your cursor where the first paragraph is ending and then press enter. A new block will be added.
Now we need to choose which block we want to add. As we want to add a shortcode block, so click on the Plus (+) button at the top left side of your screen.
Once you’ll click the plus icon, you’ll see a list of available blocks. Search for the Shorcode block in the search bar and click on it to add it. It’ll be added after the first paragraph.
4.4. Paste the Shortcode
Now, paste the shortcode, in the block and click on the Update button at the top right corner of your screen to update the post.
5. Final Results
Once the post is updated, let’s visit the post and see if the product table has been added in the post.
Now the users can add any of the products to their cart without leaving the post.
Method 2: Add Products Using the WordPress Block Editor
Now we will see the 2nd method to add products to any page or post using the WordPress block editor.
It is quite an easy method, but it doesn't give much information about the product, and users might need to go to the product page to view the full product information.
First, we have added the products to the post, now we will add the products to the page. So follow the following steps to add products to the page.
Note: As the latest and upcoming versions of WordPress use the block editor(Gutenberg), we don’t need to install any plugin for this method. We will use the WordPress block editor.
If you are using an older version of WordPress with the classic editor, then install the Gutenberg plugin first, to follow along with the tutorial.
First, you need to navigate to Pages » All Pages from your WordPress dashboard. Here you’ll see all the published and draft pages.
2. Edit the Page
We need to edit the page on which we want to add the products. To edit it, hover your mouse over it, and you’ll see the Edit button below it. Click on the button to edit the page.
Once you click the button, you’ll be redirected to the edit page from where you can edit the page. I’ll be editing the cart page as I want to add the products below the cart.
3. Add Products
Now, to add the products, click on the black plus icon. Once you click it, you’ll see the blocks you can add.
3.1. Select the Block Type
Now, in the search bar, search for the products and you’ll get all the blocks related to products. You’ll see 6 different blocks:
- Products by Category
- Products by Attributes
- Products by Tags
- Hand-Picked Products
- Best Selling Products
- Newest Products
Depending on which products you want to add, you can use any of them. I’ll be using the Products by Category.
3.2. Select the Category
Now select the category. You can also select multiple categories. Once you have selected the category, click on the Done button to add the products.
Once you’ll click on it, the products will be added.
3.3. Update the Page
Once you have added the products, click on the Update button at the top right corner of your screen to update the page.
4. Final Results
Once the page is updated, now let’s visit the page to see the changes. As you can see in the screenshot below, the products have been displayed below the cart.
Conclusion
You know both the methods to add products to any page or post on your WooCommerce store.
I like to use the 1st method, as it allows the users to view all the product information on the same page and they can add it to the cart without leaving the page or post. It will help you get more sales as more customers see the products.
Now it’s up to you to choose any of the methods mentioned above. If you have any queries, you can ask them in the comments or contact our customer support. Our dedicated customer support team typically replies within 48 hours.
Download the WooCommerce Product Table plugin today and build something great at your store!
