John Franky John Franky - 5 months ago 87
CSS Question

Remove Sidebar from Product Category Page | Wordpress Woocommerce

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

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' );