Divi – Woocommerce Product Category Archive Pages

Divi – Woocommerce Product Category Archive Pages

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:

  1. Create Your Layout
    1. In your WordPress dashboard go to Divi > Divi Librarydivi-divilibrary
    2. Add a new layoutlayout-addnew
    3. Set this layout to Global (you have to do this when making it as it is not changable to global later)new-template
    4. Save layout
  2. Copy  Woocommerce template files to your theme
    1. in wp-content  >  plugins   >   woocommerce   >   templates
    2. select:
      1. archive-product.php
      2. taxonomy-product_cat.php
    3. copy these to your theme (highly recommend using a child theme for this) in a folder called “woocommerce”  (CTRL drag in cpanel)
  3. Change template file names in your theme
    1. find your slug of your product category
    2. use the rename function to rename both of the files to add “-yourslug” before the .php
      1. So “archive-product.php” becomes “archive-product-yourslug.php”
      2. and “taxonomy-product_cat.php” becomes “taxonomy-product_cat-yourslug.php”
  4. Edit taxonomy-product_cat-yourslug.php
    1. Edit the code of this file and change the line “wc-get-template(‘archive-product.php’);”taxonomy-change
    2. Change it to “wc-get-template(‘archive-product-yourslug.php’);”
    3. Save file
  5. Edit archive-product-yourslug.php
    1. Remove everything after “get_header( ‘shop’ );” all the way down to and leave in ” get_footer( ‘shop’ ); ?>”archieve-remove
    2. Between those 2 lines past in
    3. Change the XXXX to the layout number (found by looking in the URL when viewing the layout editor screenlayout-code
    4. Save file
  6. 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?

Pin It on Pinterest