How to remove sidebar from WooCommerce shop page
Follow the steps below to learn how to remove sidebar from WooCommerce shop page:
- 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
- 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;
}
} - 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;
}
}