Close

Products per page dropdown filter for woocommerce shop page.

Wocommerce is the best plugin for building an eCommerce store. I always use this plugin for developing and building a new website for my client. I think It has all of the futures, we need with customization capabilities. Although sometimes we need to customize our webshop to meet our requirements. Here I will add functions.php code which will add a select option to your shop page before the sorting filter option.

Please add the below codes to your theme functions.php. If you want you can add it in your child theme functions.php too.

add_action( 'woocommerce_before_shop_loop', 'jowelr_selectbox', 20 );
function jowelr_selectbox() {
$per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
echo '<div class="woocommerce-perpage">';
echo '<select onchange="if (this.value) document.location.href=this.value">';
$orderby_options = array(
'12' => 'Per Page 12',
'24' => 'Per Page 24',
'36' => 'Per Page 36',
'48' => 'Per Page 48',
'60' => 'Per Page 60',
'72' => 'Per Page 72',
'84' => 'Per Page 84',
'96' => 'Per Page 96',
'3000' => 'All'
);
if(is_search()) {
    foreach( $orderby_options as $value => $label ) {
echo "<option ".selected( $per_page, $value )." value='?s=". get_search_query(true)."&post_type=product&perpage=$value'>$label</option>";

}
}
else {
foreach( $orderby_options as $value => $label ) {
echo "<option ".selected( $per_page, $value )." value='?perpage=$value'>$label</option>";
}
}
echo '</select>';
echo '</div>';
}
add_action( 'pre_get_posts', 'jowelr_pre_get_products_query' );
function jowelr_pre_get_products_query( $query ) {
$per_page = filter_input(INPUT_GET, 'perpage', FILTER_SANITIZE_NUMBER_INT);
if( $query->is_main_query() && !is_admin() && !is_post_type_archive( 'post' )) {
$query->set( 'posts_per_page', $per_page );
}
}

It will output like this screenshot

And the CSS below to your website’s style.css which I added for my client website. You may need to add your custom CSS to style the dropdown as per your theme and needs.

@media screen and (min-width:1201px) {
	.woocommerce-perpage {
    position: absolute;
    left: 32%;
    top: 8px;
}
	.woocommerce-perpage select {
    padding: 8px 15px; 
		border: 1px solid #b8b8b8;
}
	
}
@media (min-width:769px) and (max-width:1200px) {
	.mobile-version #mf-catalog-toolbar .mf-filter-mobile {
    width:28%;
}
	ul.woocommerce-ordering {
    width: 26%;
}
		.woocommerce-perpage {
text-align:center;
}
.woocommerce-perpage select {
    padding: 8px 15px;   
}
		.woocommerce-perpage {
    position: absolute;
    left: 32%;
    top: 8px;
}
	.mobile-version #mf-catalog-toolbar .woocommerce-ordering {
    width: 46%;

}
}
@media screen and (max-width:768px) {
	.woocommerce-perpage {
text-align:center;
		margin-top:15px;
}
.woocommerce-perpage select {
    padding: 8px 15px;   
}
}

Final output

Hope that helps! Enjoy!

I'm a freelance WordPress designer & developer based in Bangladesh. As a Top Rated WordPress expert by Upwork, I develop responsive websites that look amazing on any device, for businesses and agencies. Also, great experience in building websites using Free and Premium themes and Plugins. Need help? Don't worry, about your requirements. Just let me know what you need and what type of website? I will do the rest. Boom! :)

Leave a Reply

Your email address will not be published.

WC Captcha − two = one