Published: 25.09.2024
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.
Open-source software development offers businesses cost savings by eliminating licensing fees and reducing development time through community contributions. It ensures flexibility and scalability, allowing customization to specific needs. Open-source solutions are often more secure due to transparent, peer-reviewed code. Businesses also benefit from faster innovation and access to a global talent pool, enhancing productivity, collaboration, and the ability to quickly adapt to market changes.
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 );
}
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.
Automation is a powerful way to enhance the efficiency, accuracy, and scalability of your business processes. Whether you want to automate your software or streamline processes, the right automation solution can significantly improve your business.
If you're ready to integrate automation into your operations, we offer customized solutions designed to meet your specific needs. Contact us today to discuss how we can help with automation solutions that optimize your processes and take your business to the next level.
Also interesting
Expand your knowledge with the 4BIS Blog...
Automate, Web development, Software Modernisation, Business software, Knowledge Base
Discover how automation of your software and processes can improve your business. Learn about the benefits of automation and how it can make your operations more efficient. Contact us for customized automation solutions.
Read moreAutomate, Web development, Software Modernisation, Knowledge Base, WordPress, WooCommerce
Learn how to change backend behavior on a WordPress website for mobile devices with 4BIS Innovatives' expert guide. Discover tips on optimizing your WordPress site's performance by adjusting backend settings specifically for mobile users. Explore how...
Read moreBusiness software, Web development, Software Modernisation, B2B
Discover why HR software is essential for your company. Learn about its benefits and how custom solutions can transform your HR management. Contact us for tailored HR software solutions.
Read more Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!