An important part of sales is presentation, that’s a no-brainer. But, for online stores, presentation isn’t just about making a sale: it’s also about projecting a professional and trust worthy image, it’s about aesthetics and it’s about experience. User even if no money changes hands. In this article, we will talk about creating a product category list for your WooCommerce store. This attractive display could be a great addition to your website.
You can get a ready and perfect product category list in minutes. However, if you prefer your step-by-step text-based tutorials, you can find everything you need. But let’s back up a bit: what is a product category listing and what do you need to do to set it up? You will find the answers in this article.
Here is what we would like to discuss:
What are Product Category Lists in WooCommerce
One of the main features of WooCommerce is the custom product post type, and these product posts can be categorized. Depending on what you are selling, these categories may include groupings such as men’s and women’s clothing for example clothing, fiction and non-fiction for literature, vegan or vegetarian for food or cosmetics, etc.
A product category list presents your shoppers with a set of categories they can choose from – something like subtitles on a restaurant menu. Product category listings are, in other words, an overview and navigation feature. They are useful if you have more than a few products in your store and they can be organized into categories.
What you need to do first
To modify your website, you must first have a website. So far, so good. Similarly, to use WooCommerce product categories, you must also have created a WooCommerce store on your website.
Once you’ve done that, you should have created product categories. In our demo, we’ll use a clothing store with four categories, plus the default category of Uncategorized.
Finally, you need to install and activate two WordPress plugins: Elementary and Qi Addons for Elementor. We’ll be using our very own Qi Modules plugin, which contains sixty beautifully designed and easy-to-use widgets. The list of WooCommerce product categories is just one. To use the Qi Addons plugin, you need to use Elementor, the premier visual editor, as your page editor. The latest version, free or premium, will do. Qi Addons will not work with other page editors.
So, to iterate, you must:
After doing all of the above, you can start with your product category list.
How to Create a Product Category List Using Qi Modules for Elementor
We’ll show you how to create a list of product categories as part of a page. To get started, we created a page, gave it a title, and clicked the Edit with Elementor button in the page editor header.
Find the widget in the left menu and drag it to where you want it on the page.
The widget is now in place. You can see it has all categories in our store, including the Uncategorized Category.
General Tab, General Section
The General widget should be open, and inside of it, the General section. In the List Appearance menu, you can choose between the Gallery and Masonry display types. We’ll leave it at the Gallery default. In the Image Aspect Ratio menu, you can select the image size and crop type ( Vignette, Square, Portrait, etc.) We will use the default Original setting for this demonstration.
The Number of Columns menu can be set to any value from one to eight, as well as Default. We’ll leave it at Three. In the Responsive Columns menu, you can choose between Predetermined and Custom. Custom selection will allow you to select the number of columns for a variety of devices sorted by display width. We went with Three columns for the two largest devices, and One for the rest.
The Space Between Slider Items controls the border between items in your product category grid. We will set ours to 27 pixels. The Enable Zigzag option lets you offset all other grid tiles, while the Borders menu lets you set a different type of border for your grid items. We won’t need either option here.
General Tab, Query Section
Now, in the Query part of the General tab, the first option is Posts per page: the number of posts displayed in the grid. We will set ours to 3. The next two options, Ordered by and Order allow you to define the order in which your grid tiles will appear to the visitor. We have not changed the default, sorting categories by date and in descending order. The Hide Empty control allows you to hide categories without any products. Finally, the Additional Parameters control lets you choose which categories you want to use in your grid, provided you know their IDs. We do, and so we went with our three categories. You can learn your product category ID just like you would with any category. See the linked article for a detailed explanation.
General tab, Layout section
The Layout part of the General tab lets you choose how the category name (title) is displayed in your grid. The Layout menu item allows you to choose between Boxed Image Info which is the default, and which we will keep, Image Info and Side Info with Button. The Title Tag allows you to choose the heading status of the category title. The default value is H5 and we will keep it for this demonstration.
General tab, button sections
The next two sections of the General tab are Button and Button Icon. Since we didn’t choose the Info side with button option for our product category list, they won’t do anything. However, you can use them to customize your button. The Layout and Type menus allow you to choose the type of button you want. You can have a Filled, Outlined, or Textual Layout for example, combined with a Standard, Bordered Inner, or Icon Boxed kind of button. The Enable Button Text Underline control is pretty much self-explanatory, as is the Size menu. Finally, you can enter whatever Button Text you like in the bottom field.
In the Button Icon section, you can upload an.svg file for your button icon or choose one from the Icon Library, and use the Icon Position control to position it to the left or right of the button text. button. Again, since we’re not using buttons for this design, these commands aren’t relevant to this demo, but you can use them to style your own product category listings as you see fit.
How to Style Your Qi Addons Product Category List
General options are only a part of the virtually unlimited options you have for setting up your product category listing. There are many ways to style your product category listings, and they can be found in the Style tab.
Style tab, Style section
In the Style tab, the first section up is the Style section. Here you can style the category title in your grid. You can select the Title color using a picker or by entering a color hex code. In the Title Typography section, you have the usual suspects in terms of typography options: font family, size, weight, spacing, etc. We’re happy with our title settings, so we won’t be using those options for our product category listing.
The Title Area Width control allows you to set the width of your title area. We will set it to 184 pixels. The Title Padding options affect the distance between the title text and the edge of the box. We will make it dissociate the values by clicking on the link and define the padding values: 19 pixels for Top and the same for the Bottom field. The Title Background Color option allows you to choose a color for the box behind the title. We’ll leave it blank by default.
Style tab, button sections
The next few sections govern the style and behavior of a button, in case you’ve opted for one – which we haven’t. Still, the Button Style, Button Icon Style, Button Inner Border Style, and Button Underline Style sections of the Style provide a plethora of styling options for the normal button appearance and button behavior. and icon on mouseover.
Style tab, Image Style section
In the Image Style part of the Style tab, you can see the Normal/Hover tab change. This allows you to define how the image behaves when a user hovers their mouse over it. In the Normal view, all you can do is set a color overlay for each image using the Overlay Color control.
In the Float view, you can again use the Overlay Hover Color to set an overlay when a user hovers their mouse over the image. Using the Image Hover control, you can select the type of hover animation, while the Zoom Origin image hover lets you choose the focus of the animation effect in case one is selected. For this demonstration, we’ll be using the Expand option for the Image Hover and the Center option for the Image Hover Zoom Origin – the defaults.
Style tab, Border Style section
The Border Style part of the Style tab lets you set a number of pixels (percentages or ems) by which the corners of an image can be rounded. We will not use this effect for this demonstration.
Style tab, Spacing Style section
Finally, we come to the Spacing Style section. This has only one control: Title Bottom Offset, and it represents the distance between the bottom of the image and the title. You can choose the value using a slider or enter a value you like. We are, again, happy with the default and will not use this option.
And, as you can see, you can create a list of product categories and customize it to your liking in minutes! All you need is Elementor and Qi Addons.
As we’ve shown in this quick demo, you can have a nice, albeit minimalist, list of product categories in minutes, with a few mouse clicks, and mostly using the default options. However, that’s far from all: there are a myriad of styling and button options that we haven’t used, but with which you can adapt your WooCommerce product category list to virtually any website layout or style. And none of this will cost you a penny.