How to Customize Storefront Theme in a Few Clicks (and without Coding)

This is a guest post by Towhidul Islam of Atlantis Theme – if you like the article, make sure to thank him in the comments!

With 100,000 active users, Storefront is dubbed as the “official WooCommerce theme” as it is designed, developed and maintained by WooCommerce Core developers themselves.

It follows the same WooCommerce philosophy – flexibility: the latest version has 48 Action Hooks & 61 Filter Hooks (Storefront Hook Reference by WooCommerce).

One of the most common questions while working with any WordPress theme is: “How I can tweak the look and layout of my theme?“. For experienced WordPress users, this is not an issue – but for users who don’t want to get their hand dirty with CSS and PHP, it can be daunting.

The good news is that there are Storefront plugins that solve this exact problem. And you don’t have to learn coding to modify the look of your Storefront theme ?

Customizing Storefront with Storefront Design Customizer

Let’s see how the plugin works and what can you do with it. For example, you can change layout, add new homepage sections, edit header & footer and do some cool color & font customization.

Improved Customizer

Storefront Design Customizer gives you more control over your theme customization. Once installed, you will find the additional Storefront Design Customizer features in your WordPress Customizer (Appearance -> Customize).

Improved Customizer

Blog Archive & Single Post Customization

Blog Customizer will let you select a layout for single posts. You can remove or hide elements like post date, author name, tag, categories and much more.

Single Post

Homepage Customization

Using this plugin you can easily customize the existing Storefront homepage sections. You can set the number of product columns, set section background image, add section description and much more.

Besides, you can add extra homepage sections like WooCommerce Featured Product Slider, Feature Blocks, Product Category, Blog Posts.

Homepage customization

WooCommerce Customization

WooCommerce pages customization – this is where Storefront Design Customizer shines. You can change the layout of WooCommerce categories, change shop page product layout, width, product column, title color & many more features.

WooCommerce sidebar

Font Customization

Storefront Design Customizer comes with 100+ carefully selected Google Font pairings along with built-in modular type scale. Type scale will automatically select the best heading font size based on your body font size. Besides, you will be able to change your site logo font size. These new features (and many other we didn’t mention here) will give you full control over typography.

Tipography

Header & Footer Customization

Using the new customizer controls you can easily change header layouts, change colors, remove search box, customize the header cart – as well as customize the footer credit text.

Header customization

Storefront Design Customizer vs Blog Customizer plugin

Storefront Design Customizer offers more flexibility compared to Blog Customizer plugin by WooCommerce. For example, you can apply 5 different layouts to single posts and display the post archive posts to 1, 2, 3 or in 4 columns.

Single post layout

Storefront Design Customizer vs Storefront Powerpack plugin

Storefront Design Customizer was built on a different philosophy than Storefront Powerpack plugin by WooCommerce. Powerpack follows a builder approach where you have to point & click to select the element, then add styles (color, font size etc) to this element.

On the other hand, Storefront Design Customizer is built around answering one question “Does this process save time?”. Just click on any prebuilt layout and you are good to go.

There are prebuilt layouts for single posts, post archive, homepage sections, product archive, single product pages, 150+ Google Font Pairings and many more.

It also comes with various homepage sections like Featured Product Slider, category section with subcategories, feature blocks, topbar, product grid, and so on.

Category

Final thoughts on Storefront Design Customizer

Customizing Storefront WooCommerce theme just got really, really easy. Storefront Design Customizer is probably worth a try. Here are useful links for you:

Live Demo: https://www.storefront.atlantisthemes.com/

Official Plugin Page: https://atlantisthemes.com/storefront-design-customizer/

Read more
No Comments

15 Best Food & Restaurant WooCommerce Themes

The most efficient way to turn your restaurant / food business into a money-making machine is to cater to your customer’s needs better than you do now. Supposing you have a modern interior design, tasty food, friendly atmosphere, professional personnel, etc… what else can you do for your business?

You need a bombastic online presence. You need to – maybe – rebuild your restaurant website. Thankfully, if you don’t know much about web design, it’s not a big deal. No need to do anything from scratch nowadays (we entrepreneurs value our time and effort, right?).

If you want to enable online food ordering, sell restaurant gift cards, turn your takeaway into an optimized online booking system, or give online users the freedom to build their custom pizza, it’s time to switch to a WooCommerce theme.

By picking one of the 15 themes described in this article (oh, by the way – here’s the full list of 50+ restaurant WooCommerce themes you can pick), you can immediately take advantage of the most popular ecommerce plugin (WooCommerce) and its free or premium extensions to increase your food business sales and profitability.

Why should you choose a WooCommerce theme for your restaurant business? What makes it an ideal option?

Not all themes are compatible or fully compatible with WooCommerce. Choosing a theme that integrates with WooCommerce, that is designed to work together with it and optimized to convert more sales is definitely a good start.

Remember, switching WordPress theme can be as easy as investing few minutes of your time – as usual make sure to do this switch on a staging version of your website to be sure nothing is going to break while online users are visiting the live website (if your hosting does not offer “staging”, it might be worth to transfer your website to another hosting company).

On top of choosing a WooCommerce theme to allow for full compatibility, you also should pick a theme that has great options, features and shortcuts. Your food business surely could benefit from:

  • 1-Click Theme Installation
  • Social Sharing Widgets
  • Several WooCommerce Product Layouts
  • Different Background Options
  • Drag & Drop Page Builder
  • SEO-Ready & Clean Code
  • Quick and Easy Checkout
  • Multi-Device Compatibility
  • Testimonials Page
  • Etc.

Top 15 Food & Restaurant WooCommerce Themes

Let’s take a look at the top 15 Food & Restaurant WooCommerce themes. You’d better browse the themes collection, view their demos, read their descriptions and the specifications of those that are worth your attention.

1) Naturio – Cost: $114

Beware, this bright template causes a mouthwatering effect. It is fully loaded with a bunch of cool features. The theme offers a variety of engaging pages. I’m sure you will enjoy exploring and customizing them.

Naturio is carefully built with Elementor Page Builder. You can build your content with the latest drag-n-drop page builder equipped with a bulk of well-designed modules.

Mobile first philosophy will make the website a perfect piece for the smaller screens, as well as for the larger ones.

You get the theme with Jet Elements plugin included. Yes, the template is shipped with this amazing plugin full of rich functionality and useful features for your website.

The theme also includes special giveaways for you. You get tons of high-quality images on different business topics.

Besides, Naturio is delivered with accurate documentation and 24/7 lifetime support. With thorough documentation and efficient 24/7 support, you will quickly resolve all your questions.

Naturio Theme: Details and Demo

2) Chef Plaza – Cost: $114

Chef Plaza is an easy and intuitive WooCommerce theme. You can install, fine-tune, and maintain the theme through a user-friendly interface with tons of settings. You don’t need any coding skills for that.

The theme is equipped with Product Sorting filter. It allows visitors to sort out the products by several criteria. In this way, they will be able to find the proper products much faster, without scrolling through long product lists.

Now let me tell you a few words about the product categories tabs. Make the assortment of your site look structured and organized inside product categories tabs. With their help, you can unite the products into logical categories and allow users to find the products they are interested in much faster.

Here are some of the features included in the WooCommerce package:

  • powerful yet free plugin giving extra impact on the way you present the products
  • advanced banner grid management
  • product carousel
  • categories widget
  • on-page custom menus
  • etc.

Chef Plaza theme: Details and Demo

3) Agrilloc – Cost: $114

The theme is a perfect solution for natural food stores. It allows you to customize your layouts easily. Install, fine-tune, and maintain the theme via a user-friendly interface having tons of settings. No coding skills are required from you.

The theme includes WordPress Live Customizer. This tool gives you the possibility to view any changes made to your website’s design in action before pushing them live. It will help you avoid mistakes, and eliminates the need to turn on the maintenance mode.

Agrilloc is built with Bootstrap. You can build responsive, mobile-first projects on the web with this world’s most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. It allows to quickly prototype your ideas or build your entire app with Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Agrilloc theme: Details and Demo

4) Natural Foods – Cost: $114

This template was designed specifically for selling tasty natural food. Company slogans accompanied by the appealing product images are demonstrated in a slider. It adds dynamics to the layout. ‘Popular products’ and ‘New arrivals’ sections help present your items the attractive way. Information about the store is displayed with the help of simple, easily understandable icons.

Best posts from the blog are shown in a slider. Newsletter subscription form and Google map are available right on the home page.

Main theme’s features:

  • Additional Features: Advanced Theme Options, Sliced PSD, Back To Top Button, Calendar, Crossbrowser Compatibility, Custom Page Templates, Drop Down Cart, Dropdown Menu, Favicon, Google map, Google Web Fonts, Social Options, Tabs, Tag Cloud, Tooltips
  • Animation: HTML plus JS
  • Coding: CSS 3, HTML 5, JQuery, LESS
  • Features: Search Engine Friendly, Ecwid Ready
  • Functionality: Blog, Online Store/Shop, Portfolio
  • Gallery Script: Accordion, Carousel, Isotope, Slider
  • Media: Audio Player, Video Integration
  • Web Forms: Contact Form
  • WordPress Custom Post Types: FAQ, Our Team, Portfolio, Services, Testimonials
  • WordPress Page Templates: Archives, Default Page, FAQ, Filter Pholio Page, Full Width Page, Home Page, Testimonials

Natural Foods theme: Details and Demo

5) Elitario – Cost: $114

If you want to impart an expensive look to your wine store, choose this dark layout. Its package contains eye-catching pages for all occasions. You will love stylish and elegant pages with astonishing elements for your easy website customization.

You will build your content with Elementor Page Builder. This is the latest drag-n-drop page builder equipped with a variety of well-designed modules.

Your website will look same perfect both on smartphone and desktop computer screen as it was developed with a mobile-first paradigm in mind.

The theme offers wide customization options with Jet Elements plugin included. This awesome plugin will boost the functionality and useful features of your website.

All images are included into template’s package for free. There are plenty of them, they are of high-quality, and suit for any kind of business.

The template comes with neat documentation and 24/7 support, so all your issues will be resolved promptly should you have the ones.

Elitario theme: Details and Demo

6) Yummy – Cost: $114

The amber color of the theme is perfect for honey stores like this. It includes the number of beautiful pages for all occasions. I am sure that you’ll like trendy pages with nice elements when you’ll start to use them for your website customization.

This theme is built with Power drag-and-drop page builder. Power builder is very flexible and lets you easily build your pages without the knowledge of code. You can also take advantage of more than 25+ modules, a library of presets, and drag-n-drop functionality.

The theme is mobile-friendly, so your website will look the same perfect on any screen size.
The theme comes with a special bonus – lots of free images of the highest quality on different business topics.

Template’s package includes all-embracing documentation and 24/7 support. You can turn to professional support managers in case of any issue with your template.

Yummy theme: Details and Demo

7) GrindBean – Cost: $63

Brownish hues of the theme perfectly fit for a coffee store.

Is coding not one of your strong points? It’s ok, you will be able to build your pages easily without touching a single line of it. You can do all the customization with Power Drag-and-Drop page builder. Use more than 25+ modules, a library of presets, and drag-and-drop functionality. Customize the design of your theme with an advanced set of configuration options.

The theme is delivered with Cherry Plugins. This ultimate pack of the Best Plugins is meant to enhance your website’s functionality.

Multiple Layout Options will speed up your building process. Choose from a large set of layout options and experiment with your pages structure. Save your favorite layouts in a built-in library and use them whenever you need to create a new page.

GrindBean theme: Details and Demo

8) Freshmix – Cost: $114

The theme was created for organic food stores. It includes an array of the attractive pages full of different details. You will enjoy exploring and customizing these stylish pages.

The template was built with Elementor Page Builder.

Why is Elementor so awesome?

  • It is faster than others. Save time, you don’t need to drag, drop & wait anymore. Elementor lets you design on the frontend with instant, real time results.
  • Page builder is free & open source. Elementor is the first full free & open source frontend page builder that includes full access to all the design features you might need.
  • It is easy to use. Every control has been meticulously selected to provide the best user experience and allow you to design at maximal speeds.
  • No coding skills needed. Reach high-end designs, without coding. The resulting page code is compact & optimized for every device and screen.

Freshmix theme: Details and Demo

9) Vinedo – Cost: $114

Vinedo sophisticated template is a great option to represent your classy wine store. It is delivered with some good-looking pages packed full of various details.

The theme was carefully built with Elementor page builder. You can use Elementor with your favorite or customized theme. It allows you to change themes and still keep all your designs. Landing pages, homepages, posts, portfolios, products. Elementor can be used to design any page or custom post type on WordPress.

Elementor was built with the designer in mind. This means that page builder enables designers to reach high-end premium designs, without having to use CSS or code.

The term ‘responsive design’ has been worn out, but Elementor lives up to the promise, with device preview screens, percentage based element widths and device visibility control.

Elementor offers developers the freedom to customize and extend it and can become a useful plugin for developers that don’t want to be chained to a theme.

Vinedo theme: Details and Demo

10) Arden – Cost: $114

If you like bright, positive layouts, take a closer look at this one. It definitely meets these requirements.

You don’t need to have extensive technical skills to install, fine-tune, and maintain this theme. Everything above is being maintained through a user-friendly interface with tons of settings.

The theme comes with Live Customizer. This tool gives you the possibility to view any changes made to your website’s design in action before pushing them live. It will help you avoid mistakes and eliminate the need to turn on the maintenance mode.

The theme is 100% GPL. Compatibility with General Public Licence allows you to modify the template and its sources however you see fit.

With its roots in Bootstrap, this template ensures absolute responsiveness and compatibility with all modern devices and browsers – both desktop and mobile.

You can choose from a collection of integrated fonts to customize the site in accordance with the specifications of their projects quickly and easily.

Arden theme: Details and Demo

11) Greenville – Cost: $114

This greenish theme is ideal for organic food stores. You don’t need to have any coding skills to install, fine-tune, and maintain it. All these are being done via a user-friendly interface with tons of settings.

WordPress Live Customizer tool enables you to view any changes made to your website’s design in action before they go live. The feature will help you avoid mistakes and make turning on maintenance mode unnecessary.

The theme is 100% GPL, which means that the template is compatible with the General Public License allowing to modify the template and its sources the way you need.

The theme is built with Bootstrap, which ensures full responsiveness and compatibility with all modern devices and browsers – both desktop and mobile.

The theme was built by professional developers. The template ensures a cutting-edge performance on all screen resolutions and modern browsers. Thanks to a clean and well-structured code user can easily change any element of the theme in the short run.

Greenville theme: Details and Demo

12) Piccante – Cost: $114

Food is insipid without spices. Maybe that is the reason why Piccante design is so unusual. It is safe to say that this theme knows how to spice up your spices e-store.
The theme is delivered with a bunch of pages. They are engaging and full of various details. Customization and exploration of these stylish pages are promising to be enjoyable.

You will be able to build your content with Elementor Page Builder. It is the latest drag-n-drop page builder equipped with a whole lot of well-designed modules.

The theme is mobile-friendly. It will look perfect both on wide desktop computer screens and smartphones.

Jet Elements Plugin is included in the template’s package. With Jet Elements creating websites becomes easy and effective. Groundbreaking Jet Elements modules like Advanced Carousel, Pricing Table, Post Slider, Advanced Map, Countdown Timer, Animated Box, and so many more are waiting for you.

Piccante theme: Details and Demo

13) Aahar – Cost: $110

People like to eat. Some stick to the healthy diet, others don’t. Food Delivery Service WordPress Theme will fit for food lovers, gourmands, and foodie entrepreneurs. It meets the requirements of everybody. This food delivery template has a polished and glossy design, which is a great option for Chinese, Restaurant, Food Catering, and Home Delivery Services.

The clean and appetizing design will not only feast your eyes but also help you create a professional quality website. It is based on a powerful Bootstrap4 framework.

The fast Drag & Drop page builder provides you with complete flexibility. You do not need any coding knowledge to handle your website.

Thanks to the responsive nature of the theme, your website will be accessible to customers from any type of device. Aahar WordPress Theme is multiple web-browser compatible as well.

Aahar comes with 4 different Homepage layouts. 15+ necessary pages are predefined for you – Service, Cart Page, Checkout Page, Contact Page, Blog Page with various styles, and beautiful Gallery Page. You can create, edit and customize your website layout the way you want.

Aahar theme: Details and Demo

14) SuperMarket – Cost: $114

Are you going to sell food online to increase your profit? Then take a closer look at this theme. Supermarket WooCommerce Theme is functional, flexible and dynamic. It features metro style elements, thanks to which the web page layout looks even more appealing.

The theme is powered by Cherry Framework 3.1.5. Bootstrap 2.3.1 helps to develop your website much faster and easier. If you choose this theme as the basis for your website, it will look and perform exсellently on any device and web browser. Supermarket WooCommerce theme is WPML ready, includes a blog, portfolio, and online store functionality. It also offers ready-made FAQ, Team, Services, Testimonials and Product pages. All you need to do is replace the default content with your own and your store is ready to go.

Main theme features:

  • 2-step Installation
  • Multiple Color Options
  • Filterable Portfolio
  • Lifetime, free updates
  • Custom Widgets
  • Built-in Theme Customizer
  • 600+ Google Fonts
  • Fantastic Sliders
  • SEO Ready
  • Advanced Backup

SuperMarket theme: Details and Demo

15) Spices – Cost: $114

Do you need a nice website for your spice store? Here is a spices WooCommerce template that ideally fits the purpose.

The theme is supplied with multiple spice images that look very appealing. Slider features the most exotic of them. The main menu of the theme has lowered position, which is rather unusual. Tooltips draw users’ attention to the essential information. Newsletter subscription form pops up as soon as the user enters the website and helps to build the email list. Featured products are placed in for columns. They are displayed with stickers and star ratings. Functional buttons appear on mouseover. The footer contains social media block and subsidiary menu.

Main theme features:

  • 2-step Installation
  • Multiple Color Options
  • Filterable Portfolio
  • Lifetime, free updates
  • Custom Widgets
  • Built-in Theme Customizer
  • 600+ Google Fonts
  • Fantastic Sliders
  • SEO Ready
  • Advanced Backup

Additional Features: Advanced Theme Options, Sliced PSD, Back To Top Button, Calendar, Crossbrowser Compatibility, Custom Page Templates, Drop Down Cart, Dropdown Menu, Favicon, Google map, Google Web Fonts, Social Options, Tabs, Tag Cloud, Tooltips, etc.

Spices theme: Details and Demo

Over to you

I hope you liked this small, yet impressive collection of WooCommerce themes for food and restaurant business.

Which of the templates do you think will fit your cafe or restaurant the most and why? Do you have any previous experience of building an e-store on the basis of a WooCommerce template or are you just going to give the platform a chance? Are you ready to share your experience with the community? Your feedback will be really valuable, so please don’t be shy to leave your comments below.

P.S. Don’t forget about the social networks. Maybe some of your friends are looking for that kind of solution at the moment.

Read more
No Comments

How to Improve the Speed of my WooCommerce Store?

This is a guest post by Simon Tomkins of CommerceGurus – if you like the article, make sure to thank him in the comments!

The speed of your WooCommerce store is incredibly important when it comes to converting visitors into customers. Research has shown that even a one second delay can result in 7% of lost orders.

If your WooCommerce site is making $1,000 per day, that one second delay in load time could potentially cost you $25,000 in annual lost sales – not small change! If you are the lucky owner of Amazon, a one second delay in 2017 could have meant a $178 billions * 0,07 = $12.5 billions loss in net revenue…

Once again, a slow WooCommerce website is costing you money.

I spent a great deal of time researching website speed and performance optimization before creating our Shoptimizer WooCommerce theme. Some of the statistics are staggering:

  • 73% of mobile users have abandoned a site due to it taking too long
  • 47% of people expect a site to load in 2 seconds or less
  • 79% of people who encounter a performance issue won’t return again to buy

So, a slow WooCommerce site means unhappy visitors and the loss of potential revenue to competitors.

And today we’ll briefly see what you can do to speed up your WooCommerce website – these are proven performance optimization tricks that can have an immediate impact on your sales conversion rate ?

1) Review your current hosting platform

I don’t go into the topic of hosting in huge detail as it should be obvious that a properly WooCommerce optimized host makes a huge difference to loading speeds.

As a basic rule, you should stay away from any shared hosting which can struggle with the demands of WooCommerce.

LiquidWeb, Kinsta, and WPEngine are major players in the eCommerce arena and are all good choices for managed hosting. A popular alternative is SiteGround (Business Bloomer runs on SG). I’d recommend their Cloud or dedicated hosting solutions. They will also migrate your existing site to their platform for free with certain plans, which is a huge time saver.

2) Audit the speed of your WooCommerce store

Webpagetest - tick the 'Capture Lighthouse Report' option within the Chrome tabWebpagetest - tick the 'Capture Lighthouse Report' option within the Chrome tab
Webpagetest – tick the ‘Capture Lighthouse Report’ option within the Chrome tab

It’s an important first step to first evaluate your current store’s loading speed. Many people use Google Page Speed for this but I prefer WebPageTest.

There’s a little trick to this. Go to the Advanced > Chrome tab and ensure that Capture Lighthouse Report is also ticked. Lighthouse is a new tool from Google designed to improve the quality of web pages. It will summarize speed, accessibility and progressive web app performance amongst other areas and provides an excellent report with real actionable steps.

The report provided will look something like the screenshot below. I ran it using our Shoptimizer WooCommerce theme homepage as an example.

The Shoptimizer theme demo performs extremely well despite having lots of content elements on it. It loads in 2.041 seconds with a first-byte time of only 0.27s.

The First Byte time is the length of time it takes from when a client makes a request to it receiving its first byte of data from the web server.

The Start Render time reflects the speed at which the first element appears on a page. This can be a background color, a text block or anything else. A fast load at this point provides a strong indication to the user that the page is rendering and that the rest of the content will soon appear.

3) Minify your code

The number of assets loaded on a page greatly impacts on your performance score. The more files loaded, the more return trips the server needs to make, slowing down the loading speed.

One excellent solution to this problem is the Autoptimize plugin, available for free on the WordPress repository. You’ll find it by searching for Autoptimize within Plugins > Add New. This is perfect for simplifying the optimization of your WooCommerce site.

The Autoptimize plugin should be your first port of call

The key task it performs is aggregation – or combining multiple files into one so that the visitor’s browser has fewer files to download. It then minifies this combined file, removing any white space and unneeded content such as comments, making it much smaller and faster to download.

It finally caches the HTML, CSS, and JavaScript to create optimized versions of what was there before. It’s a website on a diet.

4) Optimize your images

You should optimize your WooCommerce images before uploading them to your WordPress website and also once they are loaded and used in a blog post, WooCommerce product or WordPress page. Here are three steps required to dramatically increase image loading speed.

a) Prepare your images before uploading them to WordPress

TinyPNG will batch optimize images for you in one go, significantly reducing their sizeTinyPNG will batch optimize images for you in one go, significantly reducing their size
TinyPNG will batch optimize images for you in one go, significantly reducing their size

An online image optimization tool will make dramatic size reductions to images. There are dozens out there including Optimizilla, I Love IMG and Compressor but I’m a fan of TinyPNG.

You should get quite a reduction straight away using a tool like this so it’s a matter of getting into a habit of using it before adding any new images to your store.

b) Ensure sensible default image sizes are set

Sane sizes implemented by the Imsanity pluginSane sizes implemented by the Imsanity plugin
Sane sizes implemented by the Imsanity plugin

I’ve seen many people download and upload images from a site such as the excellent Unsplash without thinking about the size or weight.

The next recommendation I have is to use the Imsanity plugin to ensure that sensible maximums are selected. There is no need for a 3000px wide image on any site and this plugin ensures that an image is automatically reduced to its configured size. You can install it via Plugins > Add New and search for Imsanity. Within its settings section, you can configure maximum sizes. A maximum image width of 1200px would be suitable for the vast majority of sites.

c) Use a CDN and a Lazy Loader

Jetpack's CDN and Lazy Loading options will make a dramatic difference to your site's speedJetpack's CDN and Lazy Loading options will make a dramatic difference to your site's speed
Jetpack’s CDN and Lazy Loading options will make a dramatic difference to your site’s speed

There are a lot of myths about Jetpack, but I find if you are careful about what modules you activate and don’t just switch on every feature it can work extremely well.

If you haven’t already got it installed you can add it via Plugins > Add New and search for Jetpack. You’ll need to register for a WordPress.com account if you don’t have one already. Once you get to the Jetpack configuration screen make sure you select the Free plan.

Within its settings screen, you can turn on its two best features. “Serve images from our global CDN” and “Enable Lazy Loading for images“.

Using a CDN will ensure that the images are served from Jetpack’s server instead of your own. It looks at the image dimensions and returns a version of image sized precisely to fit – which will be far smaller in size.

Tip: If you’re replacing an image you’ll need to use a new file name as once Jetpack’s CDN caches an image there is no way to clear it and fetch the new version.

Lazy loading is of key importance when it comes to website speed because with it enabled, images will only load when they appear within the browser’s viewport. Images which are never visible will not be loaded. This results in a significant saving of bandwidth and reduction in load time.

5) Switch to a performance-optimized WooCommerce theme

The Shoptimizer WooCommerce theme from CommerceGurus

Choosing a theme optimized for speed is the essential final component of a fast WooCommerce store. So-called “multi-purpose” themes are rarely fit for purpose and often end up loading dozens of JavaScript files, unnecessary plugins, fonts and CSS which will destroy loading speeds.

Many “WooCommerce-ready” themes also use their own WooCommerce template overrides (just take a look at your current theme files – is there a /woocommerce folder with many template files in it?), which can have an unfortunate tendency to break your website when the WooCommerce plugin is updated.

So, which theme should you go for?

The gold standard has always been the official theme from WooCommerce, Storefront. I also like GeneratePress and Astra.

On my end, here at Commercegurus I wanted to create a theme which has the code quality of Storefront but is a little more aesthetically pleasing and optimized for speed and sales conversions.

We managed to get the loading speed to a very good level (as seen in the WebPage screenshot above). I also wanted to add quite a number of additional conversion features – a fast theme that converts more visitors into buyers is the goal. The result is Shoptimizer – details and access to demo site are here.

Shoptimizer features additional theme options focused on speed – they include minification of the main stylesheet and critical css.

Conclusion

A fast loading WooCommerce store ensures you will have better conversions and SEO. You’ll have less abandoned carts and more engaged customers. Staying on top of speed issues is of vital importance for any store owner.

For some of the screenshots, we’re using Shoptimizer – a speed-optimized WooCommerce theme right out of the box. I’d love you to take a look at it and let me know what you think in the comments ?

Finally, here’s a detailed video on how to make a really FAST WooCommerce website, step by step. Enjoy!

Read more
No Comments

10 Best Fashion & Clothing WooCommerce Themes

Maybe this is the right time to update your clothing WooCommerce store and give a more professional look to your fashion business…

Maybe you also want to build custom pages without getting into coding, as default WooCommerce is too “boring”…

Still think your online project requires a fresh hand?

Well, if that’s the case, feel free to keep reading and view my favorite 15 WooCommerce clothing themes.

Key Features of a WooCommerce Clothing Theme

As you’re selling fashion, it’s quite obvious a clothing online store must look beautiful. Given that for granted (look at the screenshots below!), you shop owner probably want stress-free website creating, the possibility to build your pages quickly, to customize any detail and add WooCommerce-specific content.

Getting into detail, here’s what a good fashion theme could give you out of the box:

  • Featured products to showcase your highlights and keep them displayed on the main page;
  • Clean, shopper-friendly, simple navigation;
  • Unlimited color variations that allow you to change the visual look of the online shop in a matter of seconds;
  • Product Filter features;
  • Multiple pre-designed sets of online pages;
  • SEO-ready code;
  • Responsive, mobile-first design;
  • Translation options and WPML-ready design.

Top 10 Fashion / Clothing WooCommerce Themes

Here’s the selection I have prepared for you. Don’t forget that all these products have live demos –  check them out to grasp the whole picture.

1) Styler – Cost: $114

As you can see, Styler is a marvelous WooCommerce theme, which allows you to set up a bright and well-organized website. Styler was made to engage with users thanks to its minimalist design.

2) Kidos – Cost: $94

Kidos is a cute and colorful WooCommerce template, which contains several beautiful home pages, already pre-made for you. You get flexible header and footer settings, as well as a useful Age Filter option.

3) Brosse – Cost: $114

In case you are going to launch a cosmetic shop, take a look at Brosse. This well-featured WooCommerce theme contains many design sets. They are the ready-made pages you can use to run the site without having extra coding skills. Thanks to this code-free WooCommerce template, a user gets such sections as blog, contacts or several variations for the gallery just out of the box.

4) Grace – Cost: $99

Have you ever thought of adding a trendy horizontal MegaMenu to your online shop? Actually, it’s an attractive and very useful way to improve the design of the website. Thanks to MegaMenu plugin, users will be able to sort products by categories, subcategories and other filter widgets.

5) Deluxis – Cost: $114

This WooCommerce template comes with a drag-and-drop page builder called Elementor and, therefore, code-free website creation. This eye-pleasing theme has several well-designed content templates.

6) Preggo – Cost: $110

Here is Preggo – a soft and elegant WooCommerce theme. It was designed to manage a shop related to maternity clothes. Working with the template, you get lots of Ajax features – just another cool way to improve your user experience: any clickable part of the web shop (e.g. “add to Wishlist” or “Add to Cart” button) will save changes without the need of a page reload.

7) Actiquer – Cost: $94

Here is one more thing you must know about website design: you need a mobile-friendly shop! If you take a closer look at the recent traffic usage statistics, you’ll see that the huge part of it relates to mobile phones. It’s more than half, probably! For these reasons, you need a mobile-friendly online shop.

8) Xmall – Cost: $111

Based on KingComposer page builder, Xmall promises you a stress-free website building – you can customize every single pixel. This WooCommerce theme comes with several pre-made home page designs, available with unlimited flexibility.

9) Chemisy – Cost: $114

Chemisty provides a fully WPML-ready design. Thanks to this feature, you will be able to enlarge the website audience attracting new foreign shoppers. Also, the function improves SEO results but that’s not all – Chemisty is also SEO-friendly.

10) Dentelle – Cost: $114

Remember we’ve told you how important a mobile-friendly website is? So, here is one more feature you will certainly need – mobile-first design. Why do you need it? Well, basically, mobile-first design means building and designing your online shop starting from its small-device version. In this way, there is no way your WooCommerce website can not be compatible with phones and tablets. You can start finding first online shoppers even before the site is done!

Bonus: Useful WooCommerce Plugins for Clothing Stores

JetGuten – Cost: $15

JetGuten is a magical and easy-to-customize plugin for the well-known Gutenberg visual builder. Honestly speaking, it was created to make your life easier: there are lots of block style settings with an easy-to-use UI. That’s why JetGuten is a perfect tool to manage extra content. You will update your online website immediately with the help of this brand-new plugin.

WcBot – Cost: $29

This plugin integrates with WooCommerce in a matter of seconds. It provides a user-friendly messenger, which let you chat with shoppers whenever it’s needed.

Testimonial – Cost: $22

As you may know, testimonials are vital for ecommerce websites. The function helps you share customer reviews. It comes with 27+ testimonial template design, 2 pagination styles, translation settings and translations slide speed – these are just to name a few. The plugin provides font, color, and AutoPlay customization.

Duplicate Variations – Cost: $25

First off, this handy WooCommerce plugin is integrated with Wholesale Prices Premium. As the name of the product says, it duplicates your custom attributes, default attributes, the variation thumbnail, and manages the variations for all products. It’s quite easy to copy the variations in to other products. There are no long setups or special skills needed. Working with this cool WooCommerce plugin is as easy as pie.

SW Product Bundles – Cost: $25

To end with, here’s another worthy WooCommerce plugin. The product is compatible with WordPress 4.9.x, WooCommerce 3.4.x, and Visual PageBuilder 5.5.x. It gives you shortcodes to display Bundled products on the home page. What can you do with the plugin? Well, it allows choosing an item to showcase your goods, controlling the number of shown items, setting interval time out for slider, and setting speed slider. In addition, SW Product Bundles is totally responsive. It comes with free lifetime updates.

 

Read more
No Comments