Get a fast, conversion-focused WooCommerce theme in 2024. Switch to Shoptimizer.

Home Documentation Shoptimizer Other WooCommerce Adding Mobile Scroll to a WooCommerce Shortcode

Adding Mobile Scroll to a WooCommerce Shortcode

You can include an additional class on a WooCommerce shortcode to make it scroll on mobile. We do this on our Shoptimizer theme demo homepage for the “Our most popular products” row.

The result will look like this:

Mobile Scrolling

Note: You’ll only see this if you open the page on mobile.

Just change the shortcode as follows:

The key addition is the class=”mobile-scroll” at the end.

Product Categories

If you’ve added product categories via a shortcode to your homepage you’ll have likely used his:

Strangely, the product categories shortcode doesn’t accept a class attribute so you’ll need to wrap it in HTML like so:

Adjust size on mobile

If you want to reduce the size of the scrolling product container on mobile, you can do so with some custom CSS, added to: Appearance > Customize > Additional CSS.

The default value is 320px.


Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!