Are you looking to display products by category in WooCommerce? We’ve got you covered.
In this article, I will be showing you how to display products by category in WooCommerce in a few easy steps. For that, I will be using a plugin by Woosuite itself. We will use our Product Table plugin.
Navigation plays an important role in offering a better user experience to convert and retain your customers
On This Page
How to Display Products By Category In WooCommerce?
As mentioned earlier, I’ll be using our Product Table plugin. This plugin will help us display products by category in WooCommerce. Besides, we will add the add to cart option for all products to add multiple products at once to the cart.
1. Install and Activate the Product Table Plugin
Note: You can skip this step if you have already installed and activated the Product Table plugin.
2. Create WooCommerce Categories
To show multiple products of one category, we will need first to create some categories. Then, we will need to group the products with the new categories. Fortunately, WordPress allows us to create categories easily.
To create WooCommerce product categories:
- Log in to your WordPress dashboard with your login credentials.
- Head over to your WordPress dashboard, and search for the Product section.
- In the Products section, go to the Categories section.
Now, we will create a new category. On the current page, you will see different fields. In the Name field, enter the name you want to give to that category. Then, enter the URL. If you don’t enter the slug, it will automatically create a slug based on your category name.
Select the Display Type to Products. By default, the Display Type will be on Default. You can also choose according to your requirements. But, I advise you to choose Products only.
After that, click on the Add New Category button to create a new category. You can create as many categories as you want. The steps will be the same to create all categories.
3. Display Products By Category
After installing the Product Table plugin, it will automatically create a Quick Order Form. It means the product table is automatically created, and you need to configure it.
Visit the Page section and edit the Quick Order Form page. You will see a shortcode on the Quick Order Form page – [product_table]. To display products by category, you have to replace the current shortcode with this shortcode – [product_table category=”slug”]. For instance, I want to create a product table for the Clothing category. So, it will be [product_table category=”clothing”]
Now, do the same with all of the categories.
4. Configure the Product Table Settings
Navigate to Woosuite menu, click on the Product Table option. After that, it will redirect you to general settings. Now, we will start configuring the required settings one by one.
4.1 Order Form Display:
4.1.1 Shop Page: You can enable this option to set the product table as your store page layout. Users will see the product table when they visit the Store page.
4.1.2 Product Category Archives: You can turn on this option if you want to set Woosuite Product tables as your default store page layout.
4.2 Order Form Information Settings:
4.2.1 Columns: This setting refers to the columns you want to add to the product table. By default, you will find the Product Name, Description, Price, and the Add to Cart button. You can add more columns like SKU, ID, name, description, short description, date, categories, tags, image, reviews, stock, weight, dimensions, price, add-to-cart, and button.
4.2.2 Image: You can also change the image size according to your theme thumbnail size. By default, it would be 70×50. I’m not changing it because this fits well in the product table.
4.2.3 Image Lightbox: You can enable this option if you want images to show in a popup. 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.
4.2.4 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.
4.3 Bulk Add to Cart Settings:
4.3.1 Add to Cart Button Display: It would be set to Button only by default. But, you have to select it for Checkboxes Only. After that, it will start showing the checkbox alongside all products in the quick order form. The position of the checkbox will depend on your theme design.
4.3.2 Quantities: This option will allow users to change the amount before adding the products to the shopping cart. If you want to offer this choice, you can toggle it 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.
4.3.3 ‘Add Selected’ Position: You can change the Add Selected button position from this setting. You will get three options – Above Table, Below Table, and Above and Below Table. You can select as per your design preferences.
4.3.4 ‘Add Selected’ Button Text: You can edit the Add Selected button text here. By default, it will be named ‘Add Selected To Cart.’
4.4 Order Form Controls:
4.4.1 Sort Product By: By default, this option would be set to As listed in the Product screen. You don’t need to change this unless you want to show products differently. For example, select ‘Number Of Sales’ if you want to show products on the page according to their sales. You can select according to your requirements.
4.4.2 Sort Direction: With the help of this option, you can modify the ranking of your product on the quick order form. For instance, if you show products in ascending order (A to Z or 1 to 99), then select the Ascending order. By default, it would be selected as Automatic. Don’t make changes if you want to choose the system automatically.
4.4.3 Product Filters: You will get three options – Disabled, Show Based On Columns in Table, and Custom. You can select accordingly.
4.4.5. Search Box: If you want to change the position of the search box, you get three options to do it. You can select between the Above Table, Below Table, and both above and below table.
4.4.3 Reset Button: If you want to show the Reset button to users, they can remove all the filters. You can enable this if you want.
4.5 Order Form Design:
To enable the customization options, click on the Custom option. Now, you will see many new options in the new section. You can customize the border, color, fonts, and many more. So, customize it according to your design preferences.
4.6 Performance Setting:
4.6.1 Lazy Load: This option states that it will load one product at one time. This will help your website load faster and improve the user experience.
4.6.2 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.
4.6.3 Rows Per Page: Here comes the main setting. Add the rows you want to display on one page in this setting. For example, if you want to show 50 products on your WooCommerce store Shop page, add 50 in the box.
After that, click on the Save Changes button to save all the settings.
We finally made all the changes to the Product Table plugin. Now, it’s time to see whether the changes we made are working fine or not. As you can see in the given image, I’m currently at the Quick Order Form page, and all the categories along with products in the product are visible.
Finally, we figured out how to display products by category in WooCommerce. So, this was all about how to display many products according to the category WooCommerce. I hope you understand all the steps carefully and implement this in your WooCommerce store. This is the step-by-step guide on how to display WooCommerce products.