Some of you are aware that I LOVE Divi Theme from Elegant Themes but one of the things that has been frustrating me is not being able to personalise the archive pages on my Woocommerce product category pages. Well I solved it with no plugins pieced together from bits all over the web. So how did I do it?
Here is the step by step tutorial on the video as I show you all the steps:
So what were they again? and what were the magic bits I pasted in?
Here is the quick reference guide:
- Create Your Layout
- In your WordPress dashboard go to Divi > Divi Library
- Add a new layout
- Set this layout to Global (you have to do this when making it as it is not changable to global later)
- Save layout
- In your WordPress dashboard go to Divi > Divi Library
- Copy Woocommerce template files to your theme
- in wp-content > plugins > woocommerce > templates
- select:
- archive-product.php
- taxonomy-product_cat.php
- copy these to your theme (highly recommend using a child theme for this) in a folder called “woocommerce” (CTRL drag in cpanel)
- Change template file names in your theme
- find your slug of your product category
- use the rename function to rename both of the files to add “-yourslug” before the .php
- So “archive-product.php” becomes “archive-product-yourslug.php”
- and “taxonomy-product_cat.php” becomes “taxonomy-product_cat-yourslug.php”
- Edit taxonomy-product_cat-yourslug.php
- Edit the code of this file and change the line “wc-get-template(‘archive-product.php’);”
- Change it to “wc-get-template(‘archive-product-yourslug.php’);”
- Save file
- Edit the code of this file and change the line “wc-get-template(‘archive-product.php’);”
- Edit archive-product-yourslug.php
- Remove everything after “get_header( ‘shop’ );” all the way down to and leave in ” get_footer( ‘shop’ ); ?>”
- Between those 2 lines past in
- Change the XXXX to the layout number (found by looking in the URL when viewing the layout editor screen
- Save file
- Remove everything after “get_header( ‘shop’ );” all the way down to and leave in ” get_footer( ‘shop’ ); ?>”
- DONE!!
To update the layout you then just go back into Divi > Divi Library and make your changes!!
How does it get any easier than that?
Thank you! Do you have a similar solution for categories of the normal WP posts?
Hi Catalin,
Thanks so much for the question. Yes you can do it for normal WP posts.
Create the Layout as described above and put the content that I describe for the taxonomy file in a file called “category-YOURSLUG.php” and put this in your main child-theme folder. Even easier!
Let me know if that doesn’t make sense.
Wow- glad I found this. Perfect timing. Thank you.
It works perfectly as long as I have only one archive and taxonomy page. If I had two more named differently, it seems to overwrite the previous when I select a category..
Any ideas.
Cheers & Thanks
Greg
Hi Greg, so glad it was working for you. I have it working with different categories but I have different layouts for different categories so that I can have different banner images etc. Also need to make the files for each one too with the individual category.
Check out http://accessyou.co.nz/product-category/class-registrations/ and http://accessyou.co.nz/product-category/massage-tables/
Happy to have a look at it with you if you would like assistance.
It’s imaitpreve that more people make this exact point.
Even I had the same issue, since I have copy the code from this website. the solution for this is to just clear copied double quotes and added it again using your computer.
Thank you Imran, I have added notes to the blog post to point this out.
I have been in conversation with someone who was having problems with the wrong layout being pulled. He fixed this by not putting the speech marks around the layout number
eg 1073 rather than “1073”
I wonder if this will assist anyone else. Thanks Josip for figuring this out.
Thank you so much for this tutorial. Much appreciated. I was wondering if the process needed to be repeated for subcategories as well. For example I set up the Main Categories as you have demonstrated. But now to pull in the subcategories with a Divi Layout as well… would I have to do archive-product-mens-funny… etc?
Main Categories
Mens
Womens
Sub Categories
Mens
Funny
Political
Holiday
Womens
Funny
Political
Holiday
Have you any idea? Don’t know if this is making any sense. Thanks so much!
I have not tried it but I would say that sub categories would be just the same process.
Okay, thanks much for your time.
How would you handle sub cataegories? The slug would have a / in it and it will not let you save the file that way.
Example slug “bait/dry-bait/”
Thanks
Hi there, thanks for your question. The category slug would just be dry-bait. If you look under the categories menu (under products) it lists all the categories and it will have the slug written there. If you were to go to http://accessyou.co.nz/product-category/access-bars/ you get to the same page as if you go to http://accessyou.co.nz/product-category/class-registrations/access-consciousness/access-bars/ so even though access-bars is the slug of a sub-sub-category you can still access it directly without listing the parent categories. This is because the slug is (or should be) unique on your site. So create sub-category pages exactly the same way as main category pages.
Hi, great tutorial. However, the line for ” “echo do_shortcode(‘ ” got replaced with your layout I think. Could you let us know what shortcode to put in to call the divi layout? Thanks.
oh wow that has done interesting things.
Here is a screenshot from the video for that line of code:
WP not letting me in to change the post so will keep trying
Hello Michelle, that is a great tutorial! Thank you!
It works almost perfectly. This ‘almost’ is because the WC default product attibute filters stop working. No matter which attribute I select, the page reloads with the same products.
If I remove the new files from woocommerce directory in my childe theme, the filter works fine.
Any idea?
Thank you again!
Sorry I haven’t come across that problem. Will update this if I work it out for you.
Hi Michelle,
I really appreciate the method you shared. It is a very easy and useful way to customize product categories pages.
I would like to ask you if it is possible to do the same also for product pages. I suppose that using single-product.php instead of archive-product.php may work but, What PHP file should I use instead of taxonomy-product_cat.php?
I am not a PHP expert at all …
Really useful post. I had a heap of categories but it really was easy to just copy and paste the code and create them all at once. It’s so awesome to have them looking great!
I also just created the subcategories the same and it works fine.
Love these Divi tips.
Cheers! from a neighbour just across the water in Oz 🙂
I’ve created the category pages exactly as described above. They look great in both Chrome and Firefox but they are not displaying at all in Safari.
It’s really strange. Has anyone had this issue in Safari? I just get a white page with absolutely nothing on it. I’m sure it’s not a plugin because the other pages, not created this way (I’m using a child theme) seem to display fine.
Thanks for any help. This is one of the only really good articles about creating category pages.
Oops, no, I’ve discovered that all pages apart from the home page don’t work.
Must be a plugin. I’ll go back to working it out.
Thanks! (PS site is at hrtips dot gowebgomobile.com)
Your category page looks great! Did you manage to get this method working?
Thanks for the useful article. It works nice but the only thing fixed navigation is not working on category pages as I scroll it does remain fixed only. Any help will be highly appreciated.