[Resolved] Horizontal Scroll in displaying woocommerce products

[melvin wang]

Hi,

I’m using Woocmmerce Product Shortcode in one of my page.

I would like to kindly seek for your help, how could I make the products display in horizontal Scroll like below – sample site for reference .

Product  Horizontal Scroll

Thank you.

Regards,
Melvin

[David]

Hi there,

you would need a plugin for that – there are a few plugins on wordpress repository – have a search for Product Carousel or Product Slider

Heres an example one which looks to have the most installs and higher reviews:

https://wordpress.org/plugins/woo-product-slider/

[melvin wang]

Hi David,

Thanks for your response.

I’ve tried to use plugins, there’s still some shortcomings of the plugins
1. https://wordpress.org/plugins/woo-product-slider/ – limitation on filter (only able to filter category or tag, or attribute. Can’t filter with “AND” like original woocommerce product short code does)
2. https://wordpress.org/plugins/woocommerce-products-slider/ – this is kind of close, however the layout wasn’t as good and nice as generatepress, and Google Page Speed drops after I use this plugin.
3. My concern will be the use of plugin. If possible i wish to achieve the product horizontal scroll without plugin due to performance concer.

As Such,
I would like to kindly ask if is it possible to achieve the product horizontal scroll in GPP using some sort of CSS hack? this is the closest info I found

Looking forward for your response.

Thank you.

Regards,
Melvin

[David]

It is possible with some CSS – however it can create more issues on a mobile device, as you are changing its tap target in order to scroll. This may lead to the user having to tap the product more than once to get it to open, or in some cases it may not work at all. It can create a very frustrating UI that i would not recommend.

[melvin wang]

Hi David,

Noted. Thanks for your advice. I will just check out plugin instead. Have a nice day 🙂

[David]

You’re welcome

[melvin wang]

Hi David,

Thanks for your recommendation, I’ve found the plugin [WCPS] that’s very close to my needs. Here’s my test. I would like to see for your help, which is making a horizontal bar like below

View post on imgur.com

Remark: The horizontal bar [grey short to the left] at first will appear at the bottom even without scroll. – So user can know that this is scrollable 🙂

Can you guide me what CSS shall I insert to get the same horizontal bar effect?

TQ

Regards,
Melvin

[David]

That would be something you would need to ask the plugin developer.
But if you can link me to where i can see the Product carousel i’ll take a look to see if there is a simple ‘fix’

[melvin wang]

Hi David,

Thanks for your reply

Here’s the link https://cool.relaxbee.com/3d2n-langkawi-island-hopping-package/#wcps

See if there’s a simple fix

Thanks

Melvin

[David]

Unfortunately there isn’t a simple fix.
I did find this issue on the OwCarousel github:

https://github.com/OwlCarousel2/OwlCarousel2/issues/1240

Seems people have asked for it. But nothing yet implemented.

The plugin developer may have some insight on the last users comment on that Git. Alternatively they may be able to enable the Dot Navigation that Owl does support.

[melvin wang]

Hi David,

Thanks for your kind support.

I enabled the dot navigation. It just looked so wrong haha.

Anyway I will try to figure out other ways.

Thanks for the support

Have a nice day David.

Regards,
Melvin

[David]

You’re welcome

[Author]

Posts