Do you want to display multiple WooCommerce products on a custom page? Alright! We have a solution for you.
WooCommerce offers an excellent set of features to create an online store in a few clicks. Yet, some features are still missing to perform basic tasks. As an example, WooCommerce doesn’t offer the functionality to show more than one product on a custom page. Store owners try various methods to add this functionality to their WooCommerce stores. But they don’t find an efficient way to do it. Instead, they end up messing with things.
We can easily show various products on one page with the help of a quick order form or product table. There are multiple ways to add a product table to a specific page. Either it can be done with the help of programming or WordPress plugins. However, for this tutorial, we are going to use WordPress plugins.
In this tutorial, I will teach you how to display multiple products on one page in WooCommerce. This step-by-step guide will assist you in showing many WooCommerce products on a single page quickly. By the end of this article, you will learn to add several products to one page in a few easy steps.
So, continue reading ahead and figure out how to display multiple WooCommerce products on one page.
On This Page
What Is Quick Order Form Or Product Table?
Quick Order Form is one of the best features for B2B wholesale stores to offer a seamless user experience to their wholesale buyers. It lets you show multiple products in a table so that users can browse all products in one go.
As the name suggests, a quick order form allows buyers to quickly order the products without going through the whole product catalog. Quick order forms are designed in a way to help buyers purchase products in less time.
One of the best features is that it eliminates the Add to Cart step from the Checkout process. It means buyers don’t need to add the product to the cart individually. They can select numerous products at one time and add them to the cart. This makes the process streamlined for buyers as well as profitable for WooCommerce store owners. In simpler words, a quick order form optimizes your users’ shopping experience and increases the conversion rate.
So, this was a short overview of the quick order form and its features. Instead of this, it has a lot of benefits. Let’s check them out in the next section.
Why Should You Add Multiple Products On One Page?
There are several benefits of adding a quick order form to your WooCommerce store. One of the most significant benefits is that it makes the shopping process more straightforward for your customers, especially wholesale customers. Besides this, there are many more benefits. Please have a look at them below.
- It eliminates adding products to the cart; instead, it redirects users to the checkout page.
- With the help of a quick order form, users can browse all products on one page and order them quickly.
- This can help in increasing the sales and conversion rate of your WooCommerce store.
- Buyers can shop multiple products at one time without visiting different pages.
- The quick order form also lets you display a short description of the products to help buyers understand their characteristics and features.
These are some of the benefits of the quick order form. This is also known as a product table. The functions of both are to show multiple products on pages and offer a simple user experience.
Jump to the next section to figure out what type of WooCommerce stores use this feature.
Who Should Use Quick Order Form Feature?
The quick order form feature is mainly developed for B2B wholesale WooCommerce stores. B2B store owners use this feature to fasten the purchasing process. So, the wholesale buyers don’t need to go through an extensive product catalog.
This feature is the most suitable for grocery stores, shops, office supplies, pet supply shops, stationery shops, etc. So, if you fall under these store types, you can think of adding this feature.
If it doesn’t, you can still think about whether this will impact your WooCommerce store experience in a good way. If the answer is yes, then you should add this feature.
How Can You Display Multiple Products On One Page?
WooCommerce doesn’t come with inbuilt functionality to add multiple products on one custom page. Many WordPress plugins can help you add this type of functionality to your eCommerce store. Yet, not all plugins are worth using and offer better features.
To carry out this whole tutorial, I’ll use the WooCommerce quick order form plugin by Woosuite.
This plugin will help us to display an array of products on one page in a few easy steps. Each step in this guide will be carried out with the help of the WooCommerce Quick Order Form plugin. This plugin has many advanced features to make the purchasing process more straightforward for our wholesale buyers. The primary feature of this plugin is to show multiple products on a custom page. It also gives you the ability to choose the number of products you want to display on a single page. Besides, you can also enable the Bulk Add to Cart button and remove the Add to Cart step from the buying process.
So, read ahead and check out how to display multiple WooCommerce products on one page.
How to Display Multiple WooCommerce Products On One Page?
For this tutorial, I’ll be using the WooCommerce Quick Order Form plugin. This plugin is also known as the product table plugin. I’ll advise you to follow all the steps carefully. You can cross-check all settings with the attached screenshots.
Step 1. Install The Woosuite Core Plugin
To get the WooCommerce Quick Order Form plugin, we will need to install the Woosuite Core plugin on the WordPress website. After installing the Woosuite Core plugin, it will automatically install the product table or quick order form plugin. Follow the given steps to install the Core plugin.
- Go to the Plugin’s section, and click on Add New.
- Click on the Upload Plugin.
- Choose the plugin file, and click on Upload.
- After uploading the plugin, click on Install Plugin.
After performing the above steps, it will take a few seconds to install the plugin. When it is done, you will get a prompt on the screen. After that, you can find your plugin in the WordPress plugin section. Here is the short process.
Plugins > Add New > Upload Plugin > Choose File > Install Now
We have installed the Woosuite Core plugin, and now we will Activate the Product Table or Quick Order Form plugin.
Visit the Plugin’s section, and look for the Woosuite Core plugin, to activate the plugin. Afterwards, click on the Activate plugin. Here is the quick process.
Plugins > Woosuite Core > Activate
We have now installed and activated the Woosuite Core plugin. We will activate the Woosuite Core license to get the quick order form plugin in the next step. Follow the next heading to do that.
Step 2. Activate The Licence
After installing and activating the Woosuite Core plugin, you will see a new option in the WordPress toolbar. The new option would be Woosuite. In the Woosuite sub-menu, click on the License option. After clicking on that, it will redirect you to a new page.
On that page, it will ask you to add your Woosuite license key in the given area. So, paste the license key in the given box and click on Activate License.
Woosuite > Activate > Paste Licence > Activate Licence
Note: You would have received the license key via an email by Woosuite. So, check your inbox and find one. In addition, you can also find the license key in your Woosuite Account.
After activating the Woosuite Core license, it will automatically install the Product Table plugin. Follow the next heading to check out how to install the product table plugin.
Step 3. Install the product table Plugin
After activating the plugin, you will get a new option called Woosuite in the WordPress tool menu. In this step, we will now install the WooCommerce product table plugin. This plugin is also known as the quick order form plugin for some store types. So, don't get confused.
Click on the Addons option under the Woosuite submenu. In the Addons section, look for the product table plugin. By default, the plugin would be off, but you will need to turn it on. So, click on the toggle to install it.
Here is the summed up process:
Woosuite Submenu - Addons - product table - Toggle On
Check the next step to know how to display multiple products on one page.
Step 4. Create A New Page
To display multiple products, we will need to create a new page. We can create a new page easily from our WordPress dashboard. So, head over to the Page section, and click on Add New.
After that, give a new name to the new page. This time I’m giving it the Quick Order Form. Now, add this shortcode to your page - [product_table]. You can paste this shortcode into the text format.
This shortcode will display multiple products on a single page with additional information and options. Make sure that this is present. Otherwise, it will not work correctly.
Step 5. View the Quick Order Form Page
We have created a new page and added the shortcode to show various products. Now, it’s time to check whether it is working fine or not. To check this, we will need to Save the Draft or Publish the Page.
After publishing the page, click on View. It will now send you to a page you just created. As you can see, I had created the quick order form, and it is now visible. You can also see many products on one page. Currently, it is showing only five products on one page.
We will configure it later in the article. As of now, we have created and displayed multiple products on one page. Still, a few changes are remaining to make the table or form more attractive.
Step 6. Additional Settings
To make the quick order form more attractive and presentable, we will make some changes now. The product table displays a little information about the products. It shows four columns, including Product Name, Description, Price, and the Add to Cart button.
So, head over to the Woosuite Submenu and click on the Addons option. In the Addons section, search for the product table and click on the Manage button. After clicking on it, it will redirect you to a new page. The new page will contain a few different sections, and each section will include varied settings.
There you will find multiple options and settings. But we don’t need to configure all the options. Some settings are developed for specific situations only.
So, I'll only be talking about some of the settings present on the page. These settings are important to display multiple products on one page appealingly.
Order Form Settings:
Shop Page: This option states whether you want to display the product table on the shop page or not. You can toggle this on if you want to; otherwise, don't change. It.
Category Page: This option specifies whether you want to display the product table on the category pages or not. You can turn this on if you wish. If you toggle this on, it will show the product table on all categories published on your site. It doesn't matter how many categories you have created.
Order Form Information Settings:
Columns: This setting refers to the columns you want to add to the quick order form. You will find the Product Name, Description, Price, and the Add to Cart button by default. You can add more columns like stock quantity, image, reviews, short description, and more.
You can easily add columns you want to show in the product table by selecting them from the drop-down list. The available columns are SKU, ID, name, description, short description, date, categories, tags, image, reviews, stock, weight, dimensions, price, add-to-cart, and button.
Currently, I'm selecting seven columns to display on the table. It includes - Product Name, Description, Price, Add to Cart button, Stock, Image, and Reviews. You can choose according to your preferences.
Image: You can also change the image size according to your theme photos size. By default, it would be 70x50. I'm not modifying it because this size suits well in the product table.
Image Lightbox: You can enable this option if you want images to show in the lightbox. For instance, when a visitor clicks on the image, the image will be displayed in a large popup. You can enable this if you want. This will help customers to see products from different angles.
Description Length: If you have added the Description column to the product table. Then, you can also control the description length. This plugin lets you also set the description limit. For instance, adding 15 will only show the first 15 characters of the description in the table. You can enter -1 to display the full description.
Bulk Add to Cart Settings:
Add to Cart Button Display: By default, it would be Button only. However, you have to select it for Checkboxes Only. After that, it will start showing the checkbox alongside all products in the product table. The position of the checkbox will depend on your theme design.
Quantities: This option will allow users to change the quantity before adding the products to the shopping cart. If you want to offer this choice, you can toggle it on by clicking on it. However, if you turn off this option, users can only modify the quantity by going to the cart. This increases one step in the whole buying process.
Performance Setting:
Lazy Load: This option states that it will load one product at one time. In simpler terms, lazyload means the system will load images slowly and take more time than before. This will help your website load faster and improve the user experience.
Note: Don't enable this if you have already enabled the lazy load feature in the cache plugin. Otherwise, it can cause issues and break the site.
Rows Per Page: In this setting, add the rows you want to display on one page. For example, if I want to show five rows in the product table, I will keep it five.
So, these are some of the basic settings. Make sure to cross-check your setting with the screenshots attached above. Read the next step to know how to customize the product table or quick order form fully.
Step 7. Customize the Product Table Or Quick Order Form
The product table plugin by Woosuite offers some additional options to customize the product table, or we can say quick order form. So, in the Manage section, search for the Order Form Design section.
The Design section will contain different settings. From there, you can design your quick order form with a few taps. However, to get those additional settings, you have to set the Design option to Custom.
You will see options like Border Outer, Border Header, Border Cell, and many more. From there, you can modify the color, font type, font size, and much more. This will help you make your quick order form more stunning.
Final Results
Now, we have made all the required settings, and it’s time to check whether everything is working correctly or not. As you can see in the given image, all the settings we applied are now visible in the table. We had added the Product Name, Description, Summary, Image, Reviews, Stock, Price, Quantity, and Buy More button.
Now, all of them are visible on the product table or quick order form.
Conclusion
Finally, we figured out how to display multiple products on one page in our online store. In this guide, we understood each step and also saw the results. We learned to display multiple WooCommerce products on a single page in a few easy steps. So, this was the step-by-step guide on how to add the quick order form feature to our WooCommerce store. I hope you understood everything correctly and implemented it in your eCommerce store.
Do let us know if you have successfully displayed the multiple products on one page.
That’s all for this tutorial. I will come up with another fantastic and informative tutorial on WordPress and WooCommerce.
