{"id":39549,"date":"2022-07-28T15:00:14","date_gmt":"2022-07-28T13:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=39549"},"modified":"2022-07-26T17:29:12","modified_gmt":"2022-07-26T15:29:12","slug":"how-to-create-product-category-list-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-product-category-list-in-wordpress\/","title":{"rendered":"How to Create a Product Category List in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]An important part of sales is presentation, that much is a given. But, for online stores, presentation is <strong>not just about making a sale<\/strong>: it\u2019s also about projecting a professional and trustworthy image, it is about aesthetics, and it is about the user experience even if no money changes hands. In this article, we will be talking about <strong>creating a product category list<\/strong> for your WooCommerce store. This <strong>enticing display<\/strong> could be a great addition to your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can get a product category list ready and picture-perfect within minutes. You can find out how in the video below. However, if you prefer your tutorials in step-by-step textual form, you can find everything you need below the video.[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/GVvdJh6TJ1Y\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But let\u2019s take a step back: what is a product category list in the first place, and what do you need to do to set it up? You\u2019ll find the answers in this article. If you are confident all you need is the tutorial section, you can find it in the table of contents below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019d like to discuss:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-product-category-lists-in-woocommerce\">What Are Product Category Lists in WooCommerce<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-you-need-to-do-beforehand\">What You Need To Do Beforehand<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-product-category-list-using-qi-addons\">How to Create a Product Category List Using Qi Addons For Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#style-your-qi-addons-product-category-list\">How to Style Your Qi Addons Product Category List<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-product-category-lists-in-woocommerce\"><\/a>What Are Product Category Lists in WooCommerce<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the core features of WooCommerce is the product custom post type, and these product posts can be <strong>sorted into categories<\/strong>. Based on what you are selling, these categories may include such groupings as menswear and ladieswear for apparel, for instance, fiction and nonfiction for literature, vegan or vegetarian for food or cosmetics, and so on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A product category list <strong>presents your shoppers with a set of categories<\/strong> they can choose from \u2013 something like subheadings in a restaurant menu. Product category lists are, in other words, a presentation and navigation feature. They are useful if you have more than just a few products in your store, and if they can be organized into categories.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-you-need-to-do-beforehand\"><\/a>What You Need To Do Beforehand<\/h2>\n<p>[\/vc_column_text][vc_column_text]In order to edit your website, you first need to<strong> have a website<\/strong>. So far, so good. Similarly, to make use of WooCommerce product categories, you need also to have created <a href=\"https:\/\/qodeinteractive.com\/magazine\/woocommerce-tutorial\/\">a WooCommerce store on your website<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have done that, you need to have created<strong> product categories<\/strong>. In our demonstration, we will be using a clothing store with four categories, plus the default category of <em>Uncategorized<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install and activate<\/a> two WordPress plugins: <strong>Elementor<\/strong> and <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a>. We will be using our very own <strong>Qi Addons<\/strong> plugin, which contains <strong>sixty beautifully designed and easy-to-use widgets<\/strong>. The WooCommerce <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/product-category-list\/\" target=\"_blank\" rel=\"noopener\">product category list<\/a> is just one of them. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, to reiterate, you need to:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">install WooCommerce<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">create product categories<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">install Elementor, and<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">install Qi Addons for Elementor<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having done all of the above, you can get started with your product category list.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-product-category-list-using-qi-addons\"><\/a>How to Create a Product Category List Using Qi Addons For Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]We will show you how to create a product category list as part of a page. To start with, we have created a page, given it a title, and clicked the <strong>Edit with Elementor<\/strong> button in the page editor header.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Find the widget in the left-hand side menu, and drag it to where you want it on the page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Product-Category-List.jpg\" class=\"attachment-full size-full\" alt=\"Product Category List\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Product-Category-List.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Product-Category-List-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Product-Category-List-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Product-Category-List-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The widget is now in place. You can see that it has all the categories in our store, including the <em>Uncategorized<\/em> category.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">General Tab, General Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The widget\u2019s <strong>General<\/strong> tab should be opened, and within it, the <strong>General<\/strong> section. In the <strong>List Appearance<\/strong> menu, you can choose between the <em>Gallery<\/em> and <em>Masonry<\/em> display types. We will leave it at the default value of <em>Gallery<\/em>. In the<strong> Image Proportions<\/strong> menu, you can select the image size and type of crop (<em>Thumbnail<\/em>, <em>Square<\/em>, <em>Portrait<\/em>, and so on). We will be using the default <em>Original<\/em> setting for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Number of Columns<\/strong> menu can be set to a value of one to eight, as well as <em>Default<\/em>. We will leave it at <em>Three<\/em>. In the <strong>Columns Responsive<\/strong> menu, you can choose between <em>Predetermined<\/em> and <em>Custom<\/em>. Selecting <em>Custom<\/em> will let you select the number of columns for a variety of devices sorted by display width. We have gone with <em>Three<\/em> columns for the larger two devices, and <em>One<\/em> for the rest.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Space Between Items<\/strong> slider controls the border between the items of your product category grid. We will set ours to <em>27 pixels<\/em>. The <strong>Enable Zigzag<\/strong> option lets you offset every other tile in the grid, while the <strong>Borders<\/strong> menu lets you set a different type of border for your grid items. We won\u2019t be needing either option here.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/General-Options-Content.jpg\" class=\"attachment-full size-full\" alt=\"General Options Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/General-Options-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/General-Options-Content-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/General-Options-Content-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/General-Options-Content-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">General Tab, Query Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now, in the <strong>Query<\/strong> section of the <strong>General<\/strong> tab, the first option is <strong>Posts per Page<\/strong>: the number of posts displayed in the grid. We will be setting ours to <em>3<\/em>. The next two options, <strong>Order By<\/strong> and <strong>Order<\/strong> let you set up the order in which your grid tiles will appear to the visitor. We haven\u2019t changed the default value, sorting the categories by date and in descending order. The <strong>Hide Empty<\/strong> control lets you hide the categories without any products. Finally, the <strong>Additional Parameters<\/strong> control lets you choose the categories you wish to use in your grid, provided you know their IDs. We do, and so we went with our three categories. You can <a href=\"https:\/\/qodeinteractive.com\/magazine\/find-post-page-category-comment-uder-id-wordpress\/\">learn the ID<\/a> of your product category as you would with any category. Consult the linked article for an in-depth explanation.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"681\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Query.jpg\" class=\"attachment-full size-full\" alt=\"Query\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Query.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Query-300x211.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Query-768x540.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Query-620x436.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">General Tab, Layout Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <strong>Layout<\/strong> section of the <strong>General<\/strong> tab lets you choose how the category name (title) is displayed in your grid. The <strong>Item Layout<\/strong> menu lets you choose between <em>Info On Image Boxed<\/em>, which is the default, and which we will stick with, <em>Info On Image<\/em>, and <em>Info Side With Button<\/em>. The <strong>Title Tag<\/strong> lets you choose the heading status of the category title. The default is <em>H5<\/em>, and we will keep it for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"648\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Layout.jpg\" class=\"attachment-full size-full\" alt=\"Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Layout-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Layout-768x514.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Layout-620x415.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">General Tab, Button Sections<\/h3>\n<p>[\/vc_column_text][vc_column_text]The next two sections of the <strong>General<\/strong> tab are <strong>Button<\/strong> and <strong>Button Icon<\/strong>. Since we have not chosen the <em>Info Side With Button<\/em> option for our product category list, they will do nothing. However, you can use them to customize your button. The <strong>Layout<\/strong> and <strong>Type<\/strong> menus let you choose the kind of button you want. You can have a <em>Filled<\/em>, <em>Outlined<\/em>, or <em>Textual<\/em> <strong>Layout<\/strong>, for instance, combined with a <em>Standard<\/em>, <em>With Inner Border<\/em>, or <em>Icon Boxed<\/em> type of button. The <strong>Enable Button Text Underline<\/strong> control is pretty much self-explanatory, as is the <strong>Size<\/strong> menu. Finally, you can enter whatever <strong>Button Text<\/strong> you like in the bottom field.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button.jpg\" class=\"attachment-full size-full\" alt=\"Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Button Icon<\/strong> section, you can upload an .svg file for your button icon or choose one from the icon library, and use the<strong> Icon Position<\/strong> control to position it to the left or the right of the button text. Again, since we are not using buttons for this design, these controls are irrelevant for this demonstration, but you can use them to style your own product category lists to your liking.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"609\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Icon-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Icon-768x483.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Icon-620x390.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"style-your-qi-addons-product-category-list\"><\/a>How to Style Your Qi Addons Product Category List<\/h2>\n<p>[\/vc_column_text][vc_column_text]The general options are just part of the virtually unlimited options you have in configuring your product category list. There are plenty of ways you can style your product category lists, and they can be found in the <strong>Style<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Style Tab, Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]In the <strong>Style<\/strong> tab, the first section up is the <strong>Style<\/strong> section. Here you can style the category title in your grid. You can select the <strong>Title Color<\/strong> using a picker or by entering a <a href=\"https:\/\/htmlcolorcodes.com\/\" target=\"_blank\" rel=\"noopener\">color hex code<\/a>. In the <strong>Title Typography<\/strong> section, you have the usual suspects in terms of typography options: font family, size, weight, spacing, and so on. We are happy with our title settings, so we won\u2019t be using these options for our product category list.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"660\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style.jpg\" class=\"attachment-full size-full\" alt=\"Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-768x523.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-620x422.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Title Box Width<\/strong> control lets you set the width for your title box. We will set it to <em>184<\/em> pixels. The <strong>Title Padding<\/strong> options affect the distance between the title text and the box edge. We will <strong>unlink<\/strong> the values by clicking on the <strong>link<\/strong> button, and set the padding values: <em>19<\/em> pixels for <em>Top<\/em> and the same for the <em>Bottom<\/em> field. The <strong>Title Background Color<\/strong> option lets you choose a color for the box behind the title. We will leave it at the default white.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"471\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-Title-Box.jpg\" class=\"attachment-full size-full\" alt=\"Style Title Box\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-Title-Box.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-Title-Box-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-Title-Box-768x373.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Style-Title-Box-620x301.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Style Tab, Button Sections<\/h3>\n<p>[\/vc_column_text][vc_column_text]The following few sections govern the style and behavior of a button, in case you have opted for one \u2013 which we haven\u2019t. Still, the <strong>Button Style, Button Icon Style, Button Inner Border Style, and Button Underline Style<\/strong> sections of the <strong>Style<\/strong> tab offer a plethora of styling options for both the normal button look and the on-mouse-hover behavior of the button and the icon.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"662\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Style-300x205.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Style-768x525.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Button-Style-620x424.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Style Tab, Image Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]In the <strong>Image Style<\/strong> section of the <strong>Style<\/strong> tab, you can see the <strong>Normal\/Hover<\/strong> switch. This lets you set the behavior for the image when a user hovers their mouse over it. In the <strong>Normal<\/strong> view, all you can do is set a color overlay for each image using the <strong>Overlay Color<\/strong> control.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style.jpg\" class=\"attachment-full size-full\" alt=\"Image Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Hover<\/strong> view, you can again use the <strong>Overlay Hover Color<\/strong> to set an overlay for when a user hovers their mouse over the image. Using the<strong> Image Hover<\/strong> control, you can select the type of on-hover animation, while the <strong>Image Hover Zoom Origin<\/strong> lets you choose the focus of the animation effect in case one is selected. For this demonstration, we will use the <em>Zoom In<\/em> option for the <strong>Image Hover<\/strong>, and the <em>Center<\/em> option for Image <strong>Hover Zoom Origin<\/strong> \u2013 the default values.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Image Style Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-Hover-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-Hover-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Image-Style-Hover-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Style Tab, Border Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <strong>Border Style<\/strong> section of the <strong>Style<\/strong> tab lets you set a number of pixels (percentages, or ems) by which the corners of an image can be rounded. We will not be using that effect for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Border-Style-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Border-Style-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Border-Style-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Style Tab, Spacing Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]Finally, we arrive at the <strong>Spacing Style<\/strong> section. This only has one control: <strong>Title Bottom Offset<\/strong>, 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, once again, happy with the default, and will not be using this option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Spacing-Style-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Spacing-Style-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/07\/Spacing-Style-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, as you can see, you can set up a product category list and customize it to your liking within minutes! All you need is Elementor and Qi Addons.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown in this quick demo, you can have a beautiful, if minimalist, product category list within a few minutes, with just a few clicks of the mouse and using mostly default options. However, that\u2019s far from all: there is a myriad of styling and button options we haven\u2019t used, but with which you can make your WooCommerce product category list fit virtually any website layout or style. And none of it need cost you a penny.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Add a product category list to your website and showcase your stock in the best possible light.<\/p>\n","protected":false},"author":16990,"featured_media":39578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[211,56,108],"class_list":["post-39549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-categories","tag-ecommerce","tag-qi-addons"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/39549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=39549"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/39549\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/39578"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=39549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=39549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=39549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}