Categories

Featured templates

WooCommerce. How to remove sidebar from product category page and make it fullwidth

Guillaume Dumas December 3, 2015
Rating: 5.0/5. From 3 votes.
Please wait...

This tutorial will show you how to remove the sidebar from the product category page and make it fullwidth in Woocommerce.

WooCommerce. How to remove sidebar from product category page and make it fullwidth

By default, the product category page has a right sidebar that comprises 25% of the page content width:

How_to_remove_sidebar_from_product_category_page_and_make_it_fullwidth-1

In order to remove the sidebar and make the page fullwidth, we’ll need to make changes in the tm-close-wrapper.php and tm-open-wrapper.php files. You can use either FTP manager tool or File manager of your control panel to make the necessary changes. Please do the following steps:

  1. Open up the wp-content/themes/themeXXXXX/woocommerce/tm-close-wrapper.php file in a code editor (like Notepad++ or Sublime Text). Remove the following code:

    			<div class="sidebar <?php echo cherry_get_layout_class( 'sidebar' ); ?>" id="sidebar" data-motopress-type="static-sidebar"  data-motopress-sidebar-file="sidebar.php">
    			<?php get_sidebar(); ?>
    			</div>
    		
    How_to_remove_sidebar_from_product_category_page_and_make_it_fullwidth-2
  2. Save the changes to the tm-close-wrapper.php file and upload it to the server.

  3. Open up the wp-content/themes/themeXXXXX/woocommerce/tm-open-wrapper.php file in a code editor. Find the following code:

    			"<?php echo cherry_get_layout_class( 'content' ); ?>"
    		

    And replace it with:

    			"span12"
    		
    How_to_remove_sidebar_from_product_category_page_and_make_it_fullwidth-3
  4. Save the changes to the tm-open-wrapper.php file and upload it to the server.

  5. Reload the product category page. Now the sidebar is removed from it and its layout is fullwidth:

    How_to_remove_sidebar_from_product_category_page_and_make_it_fullwidth-4

Feel free to check the detailed video tutorial below:

WooCommerce. How to remove sidebar from product category page and make it fullwidth
This entry was posted in WooCommerce Tutorials and tagged category, fullwidth, remove, sidebar, WooCommerce. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket