Product Carousel for tablet/phone landscape

I noticed the following when I select carousel to show 8 products at a time:

Desktop shows 8
Phone/Tablet Landscape mode shows 8
Phone/Tablet Portrait mode shows 2

Is it possible to make the carousel show 4 for Phone/Tablet Landscape mode. Things become too small otherwise.

Thanks for your help!! Much Appreciated!

Hi,

Could you please send us a link to your website where we can see this issue?

Kind Regards

https://japanmad.com

Please, provide us some screenshots for the better explanation too.

Thank you in advance.

The issue that I have now is:

desktop – the carousel is using 8 products (correct)
iphone landscape – the carousel is also showing 8 products (should this be showing something like 4 products? Still showing 8 makes the products appear too small)
iphone portrait – carousel is showing 2 products (correct)

Attachments:

You must be logged in to view attached files.

Try to add the following PHP code snippet to the child theme functions.php

	function woodmart_get_owl_items_numbers( $slides_per_view, $post_type = false ) {
		$items = array();
		$items['desktop'] = ( $slides_per_view > 0 ) ? $slides_per_view : 1;
		$items['desktop_small'] = ( $items['desktop'] > 1 ) ? $items['desktop'] - 1 : 1;
		if ( $items['desktop'] == 6 ) $items['desktop_small'] = 4;
		$items['tablet'] = ( $items['desktop_small'] > 1 ) ? $items['desktop_small'] : 1;
		$items['mobile'] = ( $items['tablet'] > 2 ) ? $items['tablet'] - 2 : 1;

		if ( $items['tablet'] > 4 ) {
			$items['mobile'] = 4;
		}
		if ( $items['mobile'] > 2 ) {
			$items['mobile'] = 2;
		}

		if ( $post_type == 'product' ) {
			$items['mobile'] = woodmart_get_opt( 'products_columns_mobile' );
		}

		return $items;
	}

I added the code to child theme functions.php but still no change

Why do I get the feeling the file is not linking properly?

Attachments:

You must be logged in to view attached files.

Sorry, try to replace with this

	function woodmart_get_owl_items_numbers( $slides_per_view, $post_type = false ) {
		$items = array();
		$items['desktop'] = ( $slides_per_view > 0 ) ? $slides_per_view : 1;
		$items['desktop_small'] = ( $items['desktop'] > 1 ) ? $items['desktop'] - 1 : 1;
		if ( $items['desktop'] == 6 ) $items['desktop_small'] = 4;
		$items['tablet'] = ( $items['desktop_small'] > 1 ) ? $items['desktop_small'] : 1;
		$items['mobile'] = ( $items['tablet'] > 2 ) ? $items['tablet'] - 2 : 1;

		if ( $items['tablet'] > 4 ) {
			$items['tablet'] = 4;
		}
		if ( $items['mobile'] > 2 ) {
			$items['mobile'] = 2;
		}

		if ( $post_type == 'product' ) {
			$items['mobile'] = woodmart_get_opt( 'products_columns_mobile' );
		}

		return $items;
	}

If it will not help, send us your FTP access please.

That last code works great. Thanks so much. Saved my life!

Sorry, may I ask if it’s possible to also change the tablet number of products to show?

At the moment (on my ipad), I see that both landscape and portrait modes show 7 products in the carousel at any given time. Is it possible to reduce that to make the products appear abit larger?

Cheers~

Try to replace it with this code

	function woodmart_get_owl_items_numbers( $slides_per_view, $post_type = false ) {
		$items = array();
		$items['desktop'] = ( $slides_per_view > 0 ) ? $slides_per_view : 1;
		$items['desktop_small'] = ( $items['desktop'] > 1 ) ? $items['desktop'] - 1 : 1;
		if ( $items['desktop'] == 6 ) $items['desktop_small'] = 4;
		$items['tablet'] = ( $items['desktop_small'] > 1 ) ? $items['desktop_small'] : 1;
		$items['mobile'] = ( $items['tablet'] > 2 ) ? $items['tablet'] - 2 : 1;

		if ( $items['desktop_small'] > 5) {
			$items['desktop_small'] = 5;
		}

		if ( $items['tablet'] > 4 ) {
			$items['tablet'] = 4;
		}
		if ( $items['mobile'] > 2 ) {
			$items['mobile'] = 2;
		}

		if ( $post_type == 'product' ) {
			$items['mobile'] = woodmart_get_opt( 'products_columns_mobile' );
		}

		return $items;
	}

Works great, thanks so much for your help!

Great, you are welcome!

[Author]

Posts