Limit the number of products displayed for desktop and mobile devices on WooCommerce shop and archive pages

user_18276848 0
Viewed 103

How do i set a different product per page for desktop/mobile?

At the moment i have this code in functions.php:

add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 15 );

function new_loop_shop_per_page( $cols ) {

    $cols = 15;
    return $cols;
}

But on mobile i want to show 10 products insted of 15 products. Any advice?

woocommerce product wordpress
3 Answers

You could use the Class here: http://mobiledetect.net/

require_once 'Mobile_Detect.php';

 
function new_loop_shop_per_page( $cols ) {
    $device = new Mobile_Detect;
    $cols = $device->isMobile() ? 10 : 15;
    return $cols;
}

or write a detection function yourself using $_SERVER['HTTP_USER_AGENT'] filtering for known mobile devices.

user_141004010

You can use wp_is_mobile() - Test if the current browser runs on a mobile device (smart phone, tablet, etc.)

So you get:

function filter_loop_shop_per_page( $products ) {
    if ( wp_is_mobile() ) {
        $products = 10;
    } else {
        $products = 15;
    }

    // OR shorthand
    $products = wp_is_mobile() ? 10 : 15;

    return $products;
}
add_filter( 'loop_shop_per_page', 'filter_loop_shop_per_page', 10, 1 );
user_119875380

In the WP documentation there is a way to to check the current browser runs on a mobile device or not.

You can try wp_is_mobile() (I didn't test it myself.)

Reference Here

user_51573690
Related