How to have a custom display for both woocommerce archive and product-category pages?

So far

Hi there, I understand my question is very closely related to a common question about ‘woocommerce’.

I have been using a variety of woo hooks, filters and creating copies of original woo template files in my child theme in a folder called woocommerce/.

Read More

This is working and I’m able to make the edits that integrate woocommerce into my theme.

What I’m trying to do

Woocommerce uses archive-product.php to display product categories. It also uses this template to display the products of the category.

I’d like to style the products page very differently to the category page and create another archive template that displays the products of a category

I’m thinking that using a new products-product.php template page or would be my best option. I’m very interested in learning more and more about the plug-in, therefore I’m trying to stay away from quick CSS fixes and learn to use the template files and hooks.

Advice or points in the right direction would be greatly appreciated.

Related posts

Leave a Reply

1 comment

  1. Generally, you can tell WordPress to load a different template. The mostly seen approaches make either use of the template_redirect or the template_include hook. It is preferable to use template_include as described in this article. Following an example on how to approach this:

    Code:

    // load the woocommerce category archive template
    add_filter( 'template_include', 'wpse138858_woocommerce_category_archive_template' );
    function wpse138858_woocommerce_category_archive_template( $original_template ) {
        // we're loading the template conditionally, 
        // but only if we're actually on a woocommerce category archive
        if ( is_product_category() ) {
            // you've to create the template you want to use here first
            return get_template_directory().'/woocommerce-category-archive.php';
        } else {
            return $original_template;
        }
    }
    

    Additional information:

    Notes:

    • untested
    • There might be a more specific way to do this for/with woocommerce, depending on how they handle there template loading. For that you have to extend your research and/or dive into the woocommerce code.

    Edit:

    What you are looking for – if you want to do it the woocommerce way – is the function wc_get_template_part() – formerly, pre WC 2.1, woocommerce_get_template_part(), now deprecated. I’ve given an answer on how to use the latter some time ago, you can do it for the newly named – the functionality is the same – function accordingly. The answer of course regards the direct use of the function, in your case you probably want and should make use of the correspondent hook wc_get_template_part. With this information on hand you should be able to do this the woocommerce way.