Free Digital Courses 1 min a Day

Designed for learners of all ages. Easy to understand. Deaf-friendly.

Start upgrading your skills today!



[WooCommerce Store] How to Change the Look and Feel of WooCommerce Category Page


The standard Category Page for WooCommerce can be boring, and you are free to customize your categories pages your way using the Elementor Pro Theme Builder.

First, go to Theme Builder under Templates in Elementor Pro and select “Products Archive”. You will then enter the Elementor Editor page where you may now set in the layout for all your Product Categories and Sub categories.

You will notice some Elements that appear at your sidebar specific to such a page. These Elements are: “Archive Title”, “Archive Products” and “Archive Description”. The word “Archive” here may be interchanged with the word “Category”. So, naturally for such a page we will need to put in a Title field, a Category description field as well as products under the categories. These are the standard elements we will need for Product Category layout. The “Archive Description” would be data that will be pulled from Products Categories Description.

When you pull in the “Archive Products” element, you will notice that the sub categories of parent categories automatically appear. If you only wish to see only products here, you may adjust the settings somewhere else:

Get out of the Elementor Editor (or simply just open a new tab to access your website backend WordPress Dashboard). Mouse over “Appearance” and click on “Customize”, then click on “WooCommerce”. Then, click on “Product Catalog”. Under “Category Display”, select “Show Products”. You may also set how you like your products to be sorted, how many products per row and how many rows per page. Once done, save this setting and return to the Elementor Editor for Products Archive.

Now, your products display should appear without the sub categories images. If you would like to display your sub categories in a different row (perhaps on top of the products), do the following:

Look for the element “Product Categories” at the Elementor Editor sidebar. Drag this element to the editor page. Under “Query” > “Source”, select “Current Subcategories”. This means that the editor will automatically pull its sub categories over, even if you add more in at a later stage. If you do not see images for your sub categories, do make sure that you have uploaded a representative image for each category at the “Products Category” editor at your website backend.

Please feel free to comment below if you have any questions regarding this. Meantime, have fun! 🙂

Leave a Reply

Your email address will not be published.



Click one of our representatives below to chat on WhatsApp or send us an email to [email protected]

× How can I help you?