Remove Sidebar from Product Category Page | Wordpress Woocommerce

Question

My question is, how can i remove the sidebar only for particular Product category "Slug" and not for its child slugs.
If the url is like below - remove the side bar and make the page full width only for slugs "sanitaryware" and "closets" http://www.example.com/product-category/sanitaryware/
http://www.example.com/product-category/sanitaryware/closets/

I dont want to remove the sidebar for all "Product Category" reason, i want the side bar to show up the grand-child slug"one-piece-closets":
http://www.example.com/product-category/sanitaryware/closets/one-piece-closets

Code: that i am using in function.php - this is removing the side bar in all the product categories of the website.

  <?php
            /**
             * woocommerce_sidebar hook
             *
             * @hooked woocommerce_get_sidebar - 10
             */
            if (!is_product_category('sanitaryware')){
        do_action('storefront_sidebar');
}
?>

Answer 1

You can remove the sidebar from category page override archive-product.php or use action hook in function.php in your current theme in WordPress.

Instead of editing these files directly within the plugin (which is a very bad idea because once update the plugin and all of your changes will be lost!), you can copy them into your theme:

• In your theme directory, make a new folder called “WooCommerce.”
• Navigate to the WooCommerce plugin directory and open the "templates" folder. The templates folder has a lot of subfolders with all of the different templates that WooCommerce uses. Fortunately, the template file structure and naming in WooCommerce is easy to follow.
• In your newly created "WooCommerce" folder, copy the template file that you want to edit.

Remember to keep the directory structure the same here. If the template you want to edit is within a subfolder then remember to create that subfolder within your theme's directory.

In archive-product.php -

<?php
/**
 * woocommerce_sidebar hook
 *
 * @hooked woocommerce_get_sidebar - 10
 */
do_action('woocommerce_sidebar');?>

this code display sidebar on category page remove this code and save file .

or

To remove sidebar from category page you want to use action hook in
function.php file -

    add_filter( 'body_class', 'remove_sidebar' );
    function remove_sidebar()
    {
        if( is_product_category()) { 
         remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);
       }
    }

Next, we have to edit the style.css in your theme folder-

body.product-category #content
    {
            width: 100%;
    }

Here you can get WooCommerce Action and Filter Hook -https://docs.woothemes.com/wc-apidocs/hook-docs.html

Answer 2

Based on your desire to hide the sidebar on top-level categories and their immediate children, we will need a system for determining the hierarchical "depth" of any term archive. Similar to how people often get the "top-level" parent term we can do a while loop of getting a term's term object and checking for the term's parent. In our case instead of returning the top-level parent, we'll just keep a count and return that.

/**
* Returns depth level of product category
*
* @param    string      $catid  Product category ID to be checked
* @return   string      $depth  how many categories deep is this term in the hierarchy
*/
function so_32165017_get_product_cat_depth($catid) {
    $depth = 0;
    while ($catid) {
        $cat = get_term_by('id', $catid, 'product_cat'); // get the object for the catid
        if( $cat->parent > 0 ){
            $depth++;
        }
        $catid = $cat->parent; // assign parent ID (if exists) to $catid
        // the while loop will continue whilst there is a $catid
    }
    return $depth;
}

Now that we have something we can use as a condition we can conditionally remove the WooCommerce sidebar:

/**
* Hide the sidebar for items 2 levels deep or more
*/
function so_32165017_conditionally_remove_sidebar(){
    if( is_product_category()){
        $t_id = get_queried_object()->term_id;
        if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
            remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
            // could be theme specific ex: Storefront
            remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
        }
    }
}
add_action( 'woocommerce_before_main_content', 'so_32165017_conditionally_remove_sidebar' );

Edit/Update

If you also want to add a custom body class to make the sidebar-less pages easier to style then I believe you can remove the actions in question from the body_class filter at the same time you are actually filtering the body class.

/**
* Hide the sidebar for items 2 levels deep or more
*/
function so_32165017_conditionally_remove_sidebar( $class ){
    if( function_exists('is_product_category') && is_product_category() ){
        $t_id = get_queried_object()->term_id;
        if( so_32165017_get_product_cat_depth( $t_id ) < 2 ){
            remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
            // could be theme specific ex: Storefront
            remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
            // add a custom body class
            $class[] = 'full-width';
        }
    }
    return $class;
}
add_action( 'body_class', 'so_32165017_conditionally_remove_sidebar' );

Answer 3

One approach would be to make a custom template and prevent the sidebar from rendering if a Product Category page is being viewed. Following the upgrade-safe suggestions from the Woocommerce docs you should:

1) Go to the wp-content/plugins/woocommerce/templates/ directory and copy the archive-product.php file

2) Create a woocommerce directory in your theme directory (e.g. wp-content/themes/your-theme/woocommerce)

3) Create a copy of wp-content/plugins/woocommerce/templates/archive-product.php and put place it in wp-content/themes/your-theme/woocommerce/ and name the file archive-product.php

4) Look near the bottom of your new custom file and find:

do_action( 'woocommerce_sidebar' );

5) Replace that line of code with:

if (!is_product_category('sanitaryware') && !is_product_category('Faucet')) {
   do_action( 'woocommerce_sidebar' );
}

6) To make the Product Category page content be full-width you could add a class called product-category to the <body> of these pages using a filter.

To add this new class, insert this code in your functions.php file:

// Add specific CSS class by filter
add_filter( 'body_class', 'product_categories' );
function product_categories( $classes ) {
    // add 'class-name' to the $classes array
    if (is_product_category('sanitaryware') && is_product_category('Faucet')) {
        $classes[] = 'product-category';
    }
    // return the $classes array
    return $classes;
}

7) Then in your theme's stylesheet you could target the Product Category pages using this CSS selector:

body.product-category { /* place Product Category page specific CSS here */ }

Since I don't know the specifics of your theme, I can't tell you the HTML elements you'd want to target to set 100% width to, but if the page content was in something like <div id="content"> you could set the CSS like so:

body.product-category #content { 
    width: 100%;
    float: none;
}