In a recent project I built, I needed individual category pages to populate themselves. I could have coded them myself, but I would rather use the built-in functionality in wooCommerce. It was, however, a bit hard to find the correct settings to get everything working properly.
The Categories
Here’s an overview of a few of the categories I set up. I gave them each featured images, so that when a parent category was chosen, the child categories’ featured images would show, hyperlinking to the child categories’ list of products.
Getting WooCommerce Ready
Once you have your categories and sub-categories set up properly, you need to enable the “Show subcategories on category pages” setting within wooCommerce. It’s in the ‘Catalog’ section of the settings panel.
Point To Your Newly Created Sub-Category Pages
Once you’ve checked the proper setting, it’s time to point to the sub-category pages! The great news is that wooCommerce has already created these pages for you – you simply have to load the correct url.
In this example, I wanted the ‘Desktop’, ‘Laptop’, and ‘iPod’ pages to show the featured images of their child categories. So if a user clicks on ‘Desktop’, I want to see the featured images for iMac, Mac Pro, and Mac mini.
In your WordPress settings, you can edit the location of each menu item. In my case, I made sure to point the parent category to the following url:
- Root URL
- ‘/product-category’
- ‘/mac’ (grandparent)
- ‘/desktop’ (parent)
This shows all of the children whose parent category is ‘Mac’.
Each child gets the same url treatment; however, after the parent category, I entered the child category. In this case, it was ‘iMac’. Now all ‘iMac’ products will be displayed when the child category’s link is clicked.[hr]
Final Result
The ‘Desktop’ page now shows the featured images of the child pages. When one of the images is clicked, you get the child page with its associated products.
Wrap-up
You don’t have to reinvent the wheel (or re-code the template, for that matter) when it comes to getting your site set up the way you want it. Be sure to use the tools already at your disposal to make your development easy and efficient.
Hi there!
Is there a way to display parent category images?
I would like to have images instead of the category name on my website…haven´t found a solution yet.
would be great to get an idea from you!
greetings and thanks
Steffi
This should help you out!
http://wordpress.org/extend/plugins/category-images/
Hi, how are you??
I would like to know how you set the quantity of the products in the archive-product.php to woocommerce put the first and last class in the li tag…
thanks!
You’re probably better off searching the WooCommerce Codex to find that answer. My guess is you’ll need to find the action hook that populates the list of products and add some custom PHP to get the look you want.
Wow, finally found the answer to all my problems! 😀
I tried to organise my products by category with shortcode, but then I lost all widgets. I searched 2 days for solution and this is it!
Thank you veryvery much!
Glad to help!
Hi,
Really good, but I have a question…. Why you used a custom option to do a menu option and not used a product categories options?
thanks!
I am using the product sub-categories option within WooCommerce, so it’s not really custom; it’s just difficult to figure out the first time you’re trying to make it work.
Yes… I understand you, but my problem are that I’m making those step by step, but my products never was shown… appears the 404 error page.
What I’m doing wrong?
Thanks!
I found there is a problem with the Woocommerce-translation (Spanish in my case).
Problem:
* The links generated by “Product Categories” shortcode take you to a 404 error (or didn’t show neither products nor categories)
Solution:
* Changing the URL from “…/categoria-de-producto/…” to “…/product-category/…”
I’ve just changed the WP language into English in order to avoid this kind of problems. And of course, I wrote to WC support team
I’m just starting to get the hang of how to go from the default “All Products” organization to nicely organized tabs. Can you expand a bit on the “In your WordPress settings, you can edit the location of each menu item. ” part … am I going to be doing this sort of work in the ‘Appearance – > Menus’ part of WordPress settings dashboard, and am I going to have to make a custom menu that also includes
‘ Cart | Checkout | My Account ‘ in there too?
If you’re using WooCommerce, they automatically add the Cart | Checkout | etc items for you. To answer your first question, yes, you’ll be editing the menus via Appearance -> Menus. Be sure to select your ‘Primary Menu’ in the ‘Theme Locations’ section on the left side of the Apperance -> Menus page.
Is it possible to have ONLY the sub-categories show in the “View categories” dropdown on my website? Under “Women” there are several sub-categories, and I would like only the sub-categories to show in the dropdown when the user as inside the “Womens” category, rather than ALL of the categories being listed, as they are at the moment.
Is this possible to achieve?
Oh yeah, I’m sure there’s a way to show only the subcategories. How are you generating that button? Is it with a shortcode? If you’re using a shortcode to show a menu, you can just generate a new menu in the Appearance -> Menus. Nonetheless, let me know how you’re generating that, and I’ll give you further advice.
This is great – I was trying to figure out how to do this with shortcodes too – tearing my hair out!
Question – how did you get the buttons in your last screen shot to say “read more”? The default button says “add to cart” – I don’t want viewers to add the product to their cart without reading the details about the it.
Thanks!
That’s just part of the WooTheme for me – when showing a ‘catalog’ or ‘archive’ page, it has the Read More item rather than an Add to Cart button. However, you could also manually list your products and use a button shortcode to cook up your own Read More link.
Great!!!
One question… How did you managed to get that layered navigation (last screen) set up so nicely? I am using Maya theme on Woocommerce. There are some widgets in woocommerce but they are not so nice as yours. Also is there a way that you can set this navigation on the left side instead of right. I am getting tired of this,,,,
That is the ‘WooCommerce Layered Nav’ widget. You’ll need to download WooSidebars from WooDojo (which you’ll also need to install), and then set up your sidebars dynamically within that plugin. It lets you filter by any attributes assigned to products.
Hi. How you did menu in the right part of website? Where SIze, RAM, HDD selectors.
Is it plugin or native woocomrece feature?
I’m using the WooCommerce “Layered Nav” widgets in my sidebar. You can set it up to display specific attributes for each of your products.
hi casey
im trying this out but what settings do you use at the categorie level? where it says ‘display type’ when setting up a new category?
thanks
Juzz
I left Display Type set to “default”.
Is it possible to change text “Select a category” on widget product categories?
I want to translate in Croatian.
Tnx
You can change it if you go into the woocommerce plugin folder, find the correlating file that produces that text, and recreate it in your child theme. You can find more info in the WooCommerce support docs.
Thank you for your answer,
I solved the problem with http://wordpress.org/plugins/codestyling-localization/
I need the subcategories with images such as this website : http://www.contimac.be/nl/producten
See my website in the ‘website’ field’.
Any Ideas? Thanks
It looks like you already have category images assigned, so that’s your first hurdle – already taken care of. I’m guessing you want all of your categories to show on the same page. You’ll just need to use a shortcode on an individual page, like:
[product_categories number="3"]There might be a couple more attributes for that shortcode like “number of columns”, etc.
This is a great help, but I also have one more question.
I’ve got my store to display the category images no problem, but I want them to display the full size images, not the thumbnails.
Do you know whether this is possible or not?
Thanks,
Hello Casey and congrats for your article !
I would appreciate your help if possible…
I did like you did but my “problem” is that I have to place a text about the category above the products (on the same page but before showing them) and the same for the sub-category. Actually this is the same for every category and every subcategory because I sell products about health and wellness so that requires explanation and/or advice. And then I have specific explanation and/or advice on every product page.
Yes exactly! I am already tired just thinking about how much I still have to write!
So instead of links such as site.com/product-category/category and site.com/product-category/category/sub-category/ I created a specific page for every category and subcategory.
The url is then site.com/category/ and site.com/category/sub-category/.
In that way I can display a text before the products and in order to display the products after my text I just put a short code such as [product_category category="XXX"].
It seems to work fine but here is the problem: the widgets that work with WooCommerce such as “WooCommerce price filter” or “WooCommerce Layered Nav filter” don’t show up on “normal” pages because these pages are not WooCommerce pages. What I call WooCommerce pages are the ones with such url: site.com/product-category/category.
In fact this is how I understand it. If I am wrong any explanation is welcome.
So I would like to come back on what I did first which is what you show on this article. Do you have an idea on how I can post a text on category and subcategory pages before showing the products ?!
Any help/advice/link will be appreciated.
Regards.
Not quite sure what your question is, but WooCommerce displays the category description by default when you are showing a category page, so you just need to make sure that your product categories have descriptions for each of them.
Hi !
Sorry if I was not clear.
What I want to do is to be able to add a description and a picture about the category people look at when on the product archive page such as /site.com/product-category/. I would like to add a text and a picture as an introduction to the category above the products listing. The solution I found is a plugin named “Categorytinymce”.
If you know another way I will be glad to read about it.
Thanks for you time.
Regards.
Hi !
Sorry if I was not clear.
What I want to do is to be able to add a description and a picture about the category people look at when on the product archive page such as /site.com/product-category/. I would like to add a text and a picture as an introduction to the category above the products listing. The solution I found is a plugin named “Categorytinymce”.
If you know another way I will be glad to read about it.
Thanks for you time.
Regards.
Hey Casey, this is pretty cool. I’m gonna try it out with one of my ecommerce sites. Everything done with Apple stuff always looks good. cheers.
Is it possible to use a shortcode or anything else to combine categories? For example, let’s say I sell belts and I sell shoes. So I have a belts page and a shoes page. I also like to give my customers the ability to shop by price, so I also have pages for everything under $25 (which shows both belts and shoes) and everything over $25 (again showing both belts and shoes). How do I create a page that shows only belts under $25 without having to create another product category or subcategory?
You can browse this page for all possibilities of using WooCommerce shortcodes:
http://docs.woothemes.com/document/woocommerce-shortcodes/
And if you want to be able to filter products by price, I’d suggest adding the Price Filter Widget to a generic shop page.