How to remove a sidebar from Products/Shop page

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;
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *