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 contains 3 replies, has 3 voices, and was last updated by   J. Davis 1 year, 12 months ago.

Viewing 4 posts - 1 through 4 (of 4 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

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.