How to remove sidebar from Products/Shop page

[J. Davis]

Follow the steps below to learn how to remove sidebar from WooCommerce shop page:

1. Install Child theme and activate it. You can get ready Child theme solution depending on theme license here. If you already have a child theme and activated it you can skip to step #2
2. Paste the code below to functions.php file of your child theme:

   add_action( 'after_setup_theme', 'my_emmet_after_setup_theme', 10 );
   
   function my_emmet_after_setup_theme() {
   
   // woocommerce page full-width
   remove_action('woocommerce_archive_description', 'mp_emmet_woocommerce_archive_description', 10, 2);
   remove_action('woocommerce_after_main_content', 'mp_emmet_woocommerce_after_main_content', 10);
   remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
   remove_action('woocommerce_sidebar', 'mp_emmet_woocommerce_sidebar', 10, 2);
   remove_action('woocommerce_before_single_product', 'mp_emmet_woocommerce_before_single_product', 10, 2);
   
   function my_emmet_woocommerce_archive_description() {
   echo '<div class="container main-container"><div class="row clearfix"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';
   }
   add_action('woocommerce_archive_description', 'my_emmet_woocommerce_archive_description', 10, 2);
   
   function my_emmet_woocommerce_after_main_content() {
   echo '</div>';
   }
   add_action('woocommerce_after_main_content', 'my_emmet_woocommerce_after_main_content', 10);
   
   function my_emmet_woocommerce_sidebar() {
   echo '</div>'
   . '</div>';
   }
   add_action('woocommerce_sidebar', 'my_emmet_woocommerce_sidebar', 10, 2);
   
   function my_emmet_woocommerce_before_single_product() {
   echo '</div><!--container--></div><!-- page-header--><div class="container main-container"><div class="row clearfix"><div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">';
   }
   add_action('woocommerce_before_single_product', 'my_emmet_woocommerce_before_single_product', 10, 2);
   
   // Change number of products per page
   add_filter( 'loop_shop_per_page', 'my_emmet_woocommerce_loop_shop_per_page', 20 );
   function my_emmet_woocommerce_loop_shop_per_page($posts_per_page) {
   return 18;
   }
   
   }

3. Add the styles below to style.css file of the child theme:

   @media (min-width: 768px) {
   .woocommerce ul.products li.product {
   width: 25%;
   }
   .woocommerce ul.products li.product:nth-child(3n+1) {
   clear: none;
   }
   .woocommerce ul.products li.product:nth-child(4n+1) {
   clear: both;
   }
   }

[Andrey Shumilov]

Thank you! This really helped!

[Jose Benavente]

Dear Motopress,

How does one fill up the empty space with expanding the products to the right at least one or two more rows? Here is the link to my products page https://www.prestigefleet.us/products/ as I have followed the above to remove sidebar widgets and to use Full width template for Checkout, Cart, and My Account WooCommerce pages.

[J. Davis]

Hi Jose,

Please let me know if you applied styles provided in this topic to style.css file of your Child theme. Also provide a reply at the request you submitted.

Best regards,
John

[Jose Benavente]

Hi John,

I have been on multiple projects and have recently came back to this one. I have applied the code provided in the response to this question.

The following has happen since I have applied the code:

1.) I completely lost my Front Home Page (Could have deleted or overwritten code I shouldn’t have)

2.) It never did anything for my Woocommerce Empty Sidebar Section that never went full Width as prescribed.

I would appreciate some guidance if possible or any troubleshooting I may take into account into getting Full Width Activated and getting back my front Home Page.

[Jose Benavente]

Hi John,

I have fixed the front page problem so far and it is working stable so far.

The following has happen since I have applied fixes and the code:

1.) The Category Section stills shows a blank gap off to the right hand side as if the Sidebar was still there

2.) Also my Single Product Page doesn’t center like it should when there is no Sidebar activated or technically with this code added.

I would appreciate some guidance if possible or any troubleshooting I may take into account into getting Default Full Width Activated for both Shop/Category and Single Product Page

[Andre Flores]

Hello, Jose!

As far as I understood you would like to not just get rid of the sidebar, but to change the products columns count from 3 to 4. You may achieve this by following one of the provided solutions in this thread.

Regards,
Andre

[Author]

Posts