Initially the Product Category page is divided into

Content Area (70% width) Side Bar Area (30% width) I have removed the side bar area using function.php. However the content area is still in 70%.

I am looking for a code with the condition in php, "If the chosen URL has Product Category with two depths, then ensure the page is full width 100%".

What is needed: Full Width is needed for:
- www.example.com/product-cateogry/firstdepth/
- www.example.com/product-category/firstdepth/seconddepth/

full width is NOT needed for:
- www.example.com/product-category/firstdepth/seconddepth/thirddepth

My code are below (does not work):


add_filter( 'body_class', 'product_categories' );
function product_categories( $classes ) {
if (is_product_category('sanitaryware') && is_product_category('Faucet')) {
$classes[] = 'product-category';
// return the $classes array
return $classes;


.ifproduct-category #content { 
width: 100%;
float: none;

Theme name: Storefront


I will explain it to you without code at the moment, but in things need to be done:

  • Before you render your category html, check its position (depth) from its current category upwards to the parent category.
  • If the level is 2, then add the style you want to post_class (post_class($array)), otherwise do not add.

Check this answer for getting the ancestors of a category:

Get the the top-level parent of a custom taxonomy term

Check this to see more about post_class():



With the way that WordPress works with WooCommerce now, I found that by simply adding the below code to the custom CSS field in your Theme Settings, will make the WooCommerce Shop element to 100% width.

In this instance, my shop element is called loop-container

To edit your CSS without breaking your theme, go to the left sidebar in the Admin menu and go to Appearance -> Edit CSS and simply paste in the code:

.woocommerce .loop-container {
    width: 100%;

If your element is not called loop-container, simply right click the page and inspect, then go to the little box with an arrow in and hover until you highlight your shop element which is just inside the main container, then you will see the code you have highlighted and hey presto, you have your element name.

If you are unsure you can double-check in the other pane on the right, it should have the same name and you can even change the width to 100% and copy that snippet directly into your custom CSS field.

Good luck and thanks for posting your method.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.