Separate product images on a single page for mobile

On the product page, the size of the pictures I have is 500px wide. Everything is OK. But there is no point in displaying such large images on mobile devices. I’ve done everything with css, it looks great, but I’d just like to know if it’s possible to do a mobile check now or not, and if so, output a picture of a different size?

I added the size of the pictures:

if (function_exists('add_image_size')) {
    add_image_size('woocommerce_thumb_m', 200, 9999);
}

Then in functions.php I’m checking whether it’s mobile or not, and if so, we use the new size.

if (is_mobile()) {
    add_filter('woocommerce_get_image_size_single', function ($size) {
        return 'woocommerce_thumb_m';
    });
}

However, the site goes into error (which for some reason I can’t read, even define('WP_DEBUG', true); doesn’t help)

>Solution :

is_mobile() is not a valid & existing WordPress function, wp_is_mobile() the correct function to check for mobile device.

since you’re using the wrong function, you’re getting the error as it doesn’t exist in the system.

Read more abour wp_is_mobile in WordPress officual documentation.

And wp_is_mobile check should be inside the filter function is your function is not wrapped inside the function.

UPDATE

woocommerce_get_image_size_single hook is not for changing the image size while they are rending using the get image functions. woocommerce_get_image_size_single is for changing the width & height & crop options while image size is being added in WordPress system.

The correct hook on this requirement will be woocommerce_gallery_image_size this filter hook return the image size that will be used to render the product main and gallery image. We will have to check if returning image size is woocommerce_single if yes then we will return our custom thumb size from this filter.

Here are two correct ways to write the function:

1: wp_is_mobile inside filter function without using a wrapper function

add_filter(
    'woocommerce_gallery_image_size',
    function ( $size ) {
        // Check if is a mobile device and the size is woocommerce_single then return another small size image.
        // Using the size check we apply the new thumbnail size to the main image only not to gallery thumbnails.
        return wp_is_mobile() && 'woocommerce_single' === $size ? 'woocommerce_thumb_m' : $size;
    }
);

2: using the wrapper function and adding it with the init action.

add_action(
    'init',
    function() {
        // If not mobile device do nothing.
        if ( ! wp_is_mobile() ) {
            return;
        }

        add_filter(
            'woocommerce_gallery_image_size',
            function ( $size ) {
                // Using the size check we apply the new thumbnail size to the main image only not to gallery thumbnails.
                return 'woocommerce_single' === $size ? 'woocommerce_thumb_m' : $size;
            }
        );
    }
);