How to remove sidebar from Products/Shop page

Free and Premium WordPress Plugins & Themes Forums WordPress Themes Emmet How to remove sidebar from Products/Shop page

  • This topic has 6 replies, 2 voices, and was last updated 3 months ago by Andre Flores.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #312020
    J. Davis
    Keymaster

    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;
      }
      }
    #313016
    Andrey Shumilov
    Guest

    Thank you! This really helped!

    #533504
    Jose Benavente
    Participant

    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.

    #535719
    J. Davis
    Keymaster

    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

    #995135
    Jose Benavente
    Participant

    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.

    #995502
    Jose Benavente
    Participant

    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

    #997329
    Andre Flores
    Moderator

    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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.