WooCommerce made functional on both mobile and desktop

Tags: responsive-design, webdev, woocommerce, wordpress, wp
updated: Jan 24, 2020 at 1:26PM | published: Nov 9, 2017

WordPress is great. It really is. But anyone who works with it on the regular will tell you, it can give you a bit of a headache every now and again. For instance, when a plugin which does its job fine on desktop stops responding on mobile, or vice versa. That’s when all hell breaks loose in the office, am I right?

Don’t worry though, because there is always a way out of the hot waters. The good thing about plugins, is that they are easily customisable. With the right piece of code, you can modify backend behaviour to optimise your plugins’ responsiveness. All of a sudden, almost by magic, everything works again, whatever the screen resolution. In this article we provide you with a very simple trick to optimise your WooCommerce plugin for both mobile and desktop.

WooCommerce is a free e-commerce plugin integrated with WordPress. Favourite e-commerce solution for business owners and developers the world over, WooCommerce has endless flexibility and access to hundreds of free and premium WordPress extensions. Long story short, it enables you to sell anything, beautifully. Today, WooCommerce powers 30% of all online stores — more than any other platform.

Okay. Now let’s say, you are selling scenic tours and trips abroad. You want your website’s visitors to feel like they are already on vacation far, far away, before they even sign a check, don’t you? To maximise your conversion rate and turn your viewers into customers, you want your products to become irresistible, to be displayed with a WOO factor – no pun intended. To do that, one word: photos!

On mobile, the slick slider gallery will give the best effect. On the other hand, because it shows a limited amount of images and requires action (a click) to see more, you might prefer to have your full portfolio of pictures visible on desktop, for an instant overview of the product by the user. What’s awesome, is that it’s possible to have both at the same time!

It all comes down to the difference between responsive and adaptive layouts. A responsive layout will respond to different screen sizes, but will often hide content or apply different CSS – Cascading Style Sheets – rules on smaller screens. Meaning your gorgeous pictures portfolio on desktop might become a very, very long column of pictures one on top of the other on mobile. And we wouldn’t want that! With an adaptive layout, you can take a premeditated approach and choose a different content to serve to your user on mobile or desktop. As shown below, you can write a new function wp_is_mobile() in your WooCommerce plugin to return true (in this case, to display the slick gallery) when mobile browser specifications are detected.

 

if (!wp_is_mobile()) {
    add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    remove_action( 'woocommerce_before_single_product_summary', 'wooswipe_woocommerce_show_product_thumbnails', 20 );
}

 

Mobile version

Desktop version

Let us know if we can assist you with any WordPress related issues or questions, we are always happy to help.

See you again soon,

The 4BIS team.


Smart portal the answer for your company’s growth

Smart portal the answer for your company’s growth

In the beginning of my career I've dived directly into the world of enterprise management software development. ERP, CRM, interconnections, gateways, dashboard and what not more. It is always an interesting question that I still ask myself every time when I'm advising...

read more
greating.nl on #Horecava2020

greating.nl on #Horecava2020

Today is a nice day for Lagosse Chocolate. They are launching their new product greating.nl on the # Horecava2020 today.4BIS.nl worked together with StyleMathot on this e-commerce tool that allows customers to personalize the wraps of their chocolate!...

read more

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!