Porto and Owl Slider Tiled Fix

This article is about how we helped to fix a problem that is a standard setting in a WordPress theme, using WooCommerce, Porto theme and the Owl Slider.

One of our clients contacted us today about the way the Owl Slider works on WordPress themes, such as Porto theme’s product page.

The default Product Page in the Porto theme and others (not just Porto), often has a Gallery Slider, and you get tiny < and > arrows to slide the gallery across.  The idea of it sounds nice, but in reality, it’s not so good.

So, what if you wanted the Owl Gallery Slider to be a GRID?  So you can view all images at one, on PC and Mobile Cellphone devices?  We figured it out.

Turning the Porto Owl Slider Gallery into a Grid

We were asked to perform this on a client’s less busy website, so if we broke it – wasn’t such a problem.  With some fancy CSS (no Javascript or Function editing required), we found all the elements involved, and converted this…

The three images below the main image slide across to reveal more.

… into this:

With our code, all images now display at a glance, and are clickable.

Notice that the first image has just three images.  When you place your mouse over them, you get tiny arrows, which you cannot always see so clearly.

Initially we were able to make the design change, but when we clicked on the bottom row of images, the whole thing ‘slid’ across the screen.  So we delved a little deeper and found a fix for that too.  As a website design Lincolnshire agency, we light to try and roll out fixes, and this one is one we are particularly proud to say – we fixed.

Works on mobile cellphones – for Owl Slider Grid problem

Of course this had to work on mobiles as well, so we manage to get our CSS wizard hats on and fixed that too.  It’s now much more intuitive, and people can see ‘at a glance’ what is there to view, rather than it being hidden across the Owl Slider.

How we can help you

If you are using the Porto theme, or other WordPress Themes that have this Gallery slider problem, get in touch.  If it is using the same coding, for a small fee we can install this code on your website and resolve it within an hour.

If it is using slightly different code, and NOT Porto theme, chances are we can still establish the cause and resolve it for you.

Turn your Woocommerce Product Gallery, from a slider, into a Grid System – choose 79DESIGN.