Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Woocommerce – Customize product category archive with Divi Builder

by | 6 Mar,2018 | Tutorials, WORDPRESS

In this tutorial, we will see how to customize a woocommerce product category archive by using the DIVI Builder.

First, we need to use a child theme (if you don’t know how to create one, a very simple tutorial is available by following this link.)

Next, we need to create a custom layout for our category archive with the Divi builder.

We have to build it inside the Divi Library.

You can add whatever you want inside your layout, but you must insert :

  • Either a shop module where you have to select the category you want to display

  • Or a woocommerce shortcode inside a code module, being sure to call the product category you wish to display :

[product_category columns="3" category="CategoryName" orderby="date" order="desc"]

Example of category layout using a shop module :

Example of category layout using a code module with woocommerce shortcode :

Below is the result we get with this category layout :

Now we have to call our fresh built layout from the category archive template. To do so, we need a shortcode to call our layout using its unique ID.

We have two possibilities :

  • For those who don’t want to code or want to have it as simple as possible : Use my plugin SIMPLE DIVI SHORTCODE
  • For those who aren’t afraid of coding : Add a function to child theme functions.php by using the code provided below

//Shortcode to show the module
function showmodule_shortcode($moduleid) {
extract(shortcode_atts(array('id' =>'*'),$moduleid)); 
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}
add_shortcode('showmodule', 'showmodule_shortcode');

No matter which method you choose, you are now able to call a Divi library item from a php template by using its ID.

If you chose to add code by yourself inside functions.php, you will find the layout id inside the url field of your browser (when editing the layout) or by hovering your layout name inside the Divi library.

Your shortcode will be like :

[showmodule id="378"]

Where 378 is your layout ID (Of course it won’t be 378 but the number you can read in the url field of your browser.)

If you chose the plugin way, you can directly copy/paste the shortcode from the shortcode column inside the Divi Library (or from shortcode metabox when editing the layout) :

Last step will be to insert this shortcode inside our product category archive template. We need a couple of php files for each category we wish to customize.

We will start by adding a folder to our child theme. This folder must be named “woocommerce”

Inside this new folder, for each category we want to customize, we need a taxonomy and an archive file.

  • Taxonomy File :

Copy the following code inside your favorite text editor and save it to a file (inside your child theme woocommerce folder) with the following name : taxonomy-product_cat-CategoryName.php being sure to replace -CategoryName with your category name (for instance, if you have a category called “rings”, your file name must be taxonomy-product_cat-rings.php). Don’t forget the “-” before your category name

<?php
/**
 * The Template for displaying products in a product category. Simply includes the archive template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/taxonomy-product_cat.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @package 	WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
//Don't forget to replace "CategoryName" with your category name inside the following line of code
wc_get_template( 'archive-product-CategoryName.php' );

Be careful : you need to modify last line of above code and replace CategoryName inside archive-product-CategoryName.php filename by your category name. For instance, if your category is rings, you must have archive-product-rings.php as called filename.

  • Product Category Archive File :

Copy the following code inside your favorite text editor and save it to a file (inside your child theme woocommerce folder) with the following name : archive-product-CategoryName.php being sure to replace -CategoryName with your category name (for instance, if you have a category called “rings”, your file name must be archive-product-rings.php). Don’t forget the “-” before your category name.

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header( 'shop' ); 

//Replace the following shortcode with the shortcode of the layout you built inside the Divi library
//if your category layout has 378 for id, replace My_Layout_ID with 378
echo do_shortcode('[showmodule id="My_Layout_ID"]');

get_footer( 'shop' ); ?>

Be careful : you need to replace the showmodule shortcode inside the above code by your layout shortcode (or you have to replace my_Layout_ID by your layout ID)

Right now, you should have for your customized category (rings for this example), the 2 following files inside your child theme woocommerce folder :

You now should be able to build custom product category archive template.

Feel free to comment and ask for help if needed.