Flatsome theme woocommerc tutorials

50+ WooCommerce Tutorials & Guides for Flatsome Theme Users

Your store’s theme is one of the most crucial elements that help to hold visitors’ interest. When it comes to a theme for your WooCommerce store, thousands of options are available. But, you need to choose a multipurpose theme with high customization abilities. One such WordPress WooCommerce theme is the Flatsome theme.

More about the Flatsome theme

Flatsome is one of the most popular and top-rated WordPress WooCommerce themes in ThemeForest’s theme repository. It is designed and developed by UX Themes. The goal was to design an easy-to-use customized theme perfect for beginners and non-coders. 

Though Flatsome is a multi-purpose WooCommerce-focused theme, it can be used for building any website. Using this theme, you can create blog sites, personal portfolio sites, company sites, and many more. 

stats on BuiltWith shows more than 500K live websites are developed using Flatsome. The reason behind such vast popularity is nothing but the awesomeness of the theme features and fantastic user experience. It’s fast, lightweight, easy to use, and specially made for non-technical users.

The theme comes with beautifully designed demos to create a website fast. So, choosing the Flatsome theme for your WooCommerce website store is an excellent idea. 

WPCred team has been writing Flatsome-focused tutorials for a long time. We’ve already covered 40+ essential tutorials about various topics of Flatsome. Some of them are entirely using the Flatsome theme, and others are using third-party plugins or tools. Let’s jump into the tutorials of the Flatsome WooCommerce theme.

Purchase Flatsome Theme

 1. Is Flatsome the Best WooCommerce Theme

flatosme best woocommerce theme

Flatsome is a multipurpose WooCommerce theme trusted by 200,000+ site owners. It’s an incredibly fast theme with a great user experience. Besides that, it offers beautiful designs, supports any device, and has introduced unique features. 

Additionally, Flatsome has reduced its core JavaScript file to 56kb, which has made it incredibly optimized. You can learn the ins and outs by reading our in-depth analysis of the Flatsome reviews

 2. Quality WooCommerce Hosting

wordpress woocommerce hosting

Your site won’t get faster if hosted on an awful server. Its performance depends on the quality of the hosting. There are hundreds of WooCommerce hosting providers to choose from. Choosing the best hosting for WooCommerce will make setting up and managing your store much easier.

 3. Flatsome theme installations

Flatsome installation

Installing the Flatsome WooCommerce theme is super easy. Visit ThemeForest and buy Flatsome theme (if you haven’t purchased it already). After that, download the file and upload it to your WordPress dashboard. Then install and activate it by using the license key. Visit the linked how to install Flatsome in WordPress like an official Flatsome demo

 4. Create a Child Theme

Flatsome child theme

 

With a child theme, you can modify the appearance of your website without editing your theme files directly. That means you can know how to update the WordPress theme without losing any customization. When you activate the Flatsome theme for the first time, there’ll be an option to create a child theme and you can also know how to create a Flatsome child theme on WordPress easily, and use it to create a new child theme. 

 5. Parent Theme Customizer Settings to Child Theme

parent theme customizer

While using a child theme in Flatsome, you may need to copy the customizer settings from the parent theme to the child theme. It’s a straightforward process that takes a few steps. WordPress sees your child’s theme as a new theme. So, without doing it, you might lose your parent theme customization while shifting to the child theme.  

 6. Create a One Page Website Using Flatsome

one page website ux builder

As we have discussed, Flatsome is a multipurpose theme that you can use to create online stores in almost any niche. Nowadays, a one-page website is trending for many reasons. Flatsome also offers a special feature named “Flatsome Studio” to help you to know how to create a one page website for free. 

 7. Use Flatsome Studio To Create Online Shop

Flatsome studio

Flatsome Studio is a free extensive digital library with images, pre-designed sections, and layouts. You can simply import and use it in just a few clicks. Importing new elements, you can use the Flatsome studio on WordPress and choose from more than 100+ elements. 

 8. Upload Your Logo

upload logo to flatsome theme

A logo is the foundation of your brand identity. But once the theme is activated, you’ll notice Flatsome’s logo on your site by default. However, you can easily show your company branding and upload Flatsome logo on the WooCommerce website.

 9. Create Mega Menu in Flatsome

mega menu Flatsome

After selecting the logo, it’s time to set the menus. Your site visitor will always want to have easy access to every page on your store. You need to help them quickly find exactly what they want, that’s why you may need the mega menu. You can create a Flatsome mega menu in a few steps.

 10. Add a Video Background

add video background Flatsome

You only get a few seconds to grab the attention of your visitors. A moving background can instantly attract your visitors. Flatsome has a built-in function that allows you to add video backgrounds for WordPress in the Flatsome video banners.

 11. Enable Infinite Scrolling on Shop Page

infinite scroll Flatsome

Infinite scroll ensures that you can scroll as long as you want. It is easier to browse more products by simply scrolling down. So, adding an infinite scroll for WordPress on the Flatsome shop page brings you more opportunities for your online store to optimize WooCommerce pagination. 

 12. Add Lightbox to Flatsome

lightbox poup

Lightbox often includes a call to action (CTA) to ask visitors to take action. It’s pretty effective for website owners and marketers for several reasons. The lightbox shortcode lets you open any content inside a lightbox by clicking a button or navigation item. The steps of adding a Flatsome lightbox popup to WordPress are straightforward. 

 13. Create Automatic Newsletter Pop-up

newsletter popup Flatsome

Pop-up is a great way to communicate with visitors. You can use it to connect with more visitors and make them your potential customers. Moreover, it can help you with the email marketing campaign and increase registered users of your site. Flatsome has the feature to create an automatic newsletter lightbox sign-up popup and you can learn how to create a Flatsome newsletter popup by following some easy steps. It’ll highlight your promotions and get more subscribers to your newsletter.

 14. Set Featured Products

set featured product Flatsome

Feature Products helps your visitors to view the most appealing products of your WooCommerce store. Using this, you can display your special products to your customers. These can be your trending or popular products, new products, or some sponsored products you want to show. There are multiple ways to set featured products in the Flatsome WooCommerce theme. You can know how to set featured products in WooCommerce from this article.

 15. Apply Free Shipping for Specific Products

free shipping woocommerce

WooCommerce store owners run different strategies to boost their sales. Among those, free shipping is a common strategy for attracting customers. Flatsome offers to set WooCommerce free shipping for specific products. You can add free shipping to individual products, specific category-based products, or any other type of product.

 16. Setup Wishlist Correctly

setup wishlist

Usually, people spend a good amount of time on eCommerce websites. While visiting a site for a long time, it’s very common to lose the product they decided to buy. That’s why a wishlist is vital for your eCommerce site. It makes sure your customers can save the products for buying later. Creating a wish list in Flatsome is easy to implement. You can add it to your website without doing any coding.

17. Create a Custom 404 Error Page

custom 404 flatsome

One of the most common errors on the web is the 404 error page. It’s frustrating and confusing for your visitors. Pages like this aren’t clear and don’t help users stay on the site. You certainly don’t want visitors landing on a generic error page. If by any chance your visitors face such a situation, don’t worry, Flatsome has some built-in WordPress custom 404 error pages. You can choose one from the list and let your visitors know they are still on your site.

 18. Add Customer Testimonial

customer testimonial

A powerful way to build shoppers’ trust is by adding customer testimonials. It is most commonly positive reviews left by satisfied customers. There are many different ways to add customer testimonials to the Flatsome testimonial theme and you can easily design testimonials on your own. You’ll find some pre-defined testimonial pages on the Flatsome theme to choose from.

 19. Create Shop Page Header with UX Builder

shop page header

No matter what kind of products you sell, your WooCommerce shop pages are essential parts of your store. Flatsome lets you add a web page header design with a UX builder to make your Flatsome shop page more useful and attractive.

 20. Create a Slider Using UX Builder

Create slider

A slider can help you display your products in a decorated and user-friendly manner. As a result, your visitors will have a better impression. This theme has made it easy to create a Flatsome slider for WordPress using the UX Builder.

 21. Customize WooCommerce Product Page

customize product page

Your fantastic product deserves a unique customized WooCommerce product page. You need to be able to customize the product page WooCommerce to make your e-commerce store stand out. Flatsome UX builder gives you the design flexibility to create and customize your custom product page visually.

 22. Quickly Get Google Sitelinks

google sitelinks

Google Sitelinks are sub-listings that appear under the first search result, usually when searching for brands. Sitelinks save time and provide relevant results for searchers. You can follow some processes to increase your chances of getting site links. You can know how to get google sitelinks in some easy steps.

 23. Setup and Install Google Tag Manager

Google Tag Manager

Google Tag Manager helps make tag management easy, simple, and reliable by allowing marketers and webmasters to deploy website tags in one place. You can check our tutorial if you are wondering how to set up and install Google tag manager WordPress.

 24. Add Google Search Console

google search console

Google Search Console, formerly known as Webmaster Tools, helps you optimize data to monitor website performance in search. The benefits of the Search Console make it indispensable for improving search performance. Setting up Google Search Console on your Flatsome-powered site takes only a few minutes but give you lifetime benefit. You can know how to add a Google search console insight WordPress

 25. Add Google Analytics to Track Store Traffic

Google Analytics is a free tool by Google to track and analyze your site visitors. In addition, it provides key insights into what you can do to meet your goals and how your website is performing. If you already know the importance, here’s a rundown of how to add google analytics with WordPress on your Flatsome WooCommerce theme.

 26. Add Google Recaptcha To Contact Form 7

Google recapcha

Contact Form 7 plugin is essential for any WordPress-powered website. If you use it on your website, you will probably start getting spam posts through your form. To prevent your inbox from having unnecessary content, you need to add a Recaptcha to contact form 7.

 27. Add Facebook Open Graph Metadata

facebook open metada

Facebook open graph metadata offers you control over how your content will look when shared on Facebook. It takes metadata from the content and lets you choose how things will be displayed. You can follow both manual methods or a plugin to add open graph metadata to your Flatsome website.

 28. Create Variable Products

create variable product woocommerce

A variable in WooCommerce allows you to choose from several options. It can be easily defined as a product available in several colors, styles, sizes, and many more. Adding WooCommerce variable products in the Flatsome theme is straightforward. 

 29. Add Multiple Variation Images and videos

variation images and videos

Multiple images for a product make it easier for shoppers to choose a product. But, by default, WooCommerce allows you to add only a single image per product variation. However, Additional Variation Images Gallery for WooCommerce plugin lets you display your products from different angles or perspectives. In addition, you can add videos to your WooCommerce products image gallery. 

 30. Show Variation Swatches on the Shop/Archive Page

variation swatch

By default, WooCommerce offers a dropdown for variation products. But it takes more clicks to view and doesn’t give visitors a seamless experience. WooCommerce Variation Swatches plugin converts default product dropdowns into beautiful swatches.

Adding WooCommerce color swatches is one of the best ways to bring more life to your products. On the other hand, WooCommerce product attributes provide a pleasant way to display variations. 

Alternatively, you may want to customize radio button swatches for different purposes. As compared to select dropdown, radio buttons are more customer friendly.

31. Translate Flatsome with Loco Translate Plugin

translate flatsome theme

There is plenty of website traffic you lose every day since your website is not translatable. If your Flatsome theme-powered site needs to be multilingual, you can easily translate with Loco Translate plugin, and you can know how to translate websites into English or any other language with this plugin.

32. Disable Reviews in Flatsome

disable product review

It’s not advisable to disable WooCommerce reviews in most circumstances. However, there are some reasons why you could consider disabling product reviews. Sometimes, it’s difficult for store owners to maintain up with the spam in the product reviews section.

 33. Add Users to the Support Team

add user to support team

WordPress has a built-in user management system. You may have a team of people working together to manage various aspects of your site, such as technical support, content writers, SEO experts, and many more. The platform lets you add new users out of the box and provide a variety of roles and permissions. You can get articles on how to add users to WordPress from here.

 34. Add Own Personal Menu Label

Add personal menu label

A menu is a general way to explore your website easily. Many WordPress themes come with pre-defined menu locations and layouts. Luckily, Flatsome comes with an excellent clean pre-made menu label to attract visitors. Also, you create your own personal menu label as well. 

 35. Add Payment Icons to Footer

payment icon flatsome

Maximum Flatsome-powered websites are WooCommerce based. Before buying a product from an online store, customers wish to know how they will be able to purchase it. So, having supported payment icons are essential. Let your customers know about it by showing payment icons in the footer

 36. Disable Product Quick View

disable quick view Flatsome

Product quick view offers the shoppers a “quick look” at your products. The Flatsome theme comes with this feature. However, if you want to disable quick view WooCommerce for any reason, you can do it quickly.

37. Create a ‘Scroll-To’ Link

scroll to link

You can help your site visitor move to a specific page section by enabling the scroll-to-link element. It can save their valuable time and help them to navigate easily. 

38. Use Custom Icons

custom ico

You are probably wondering why you would want to add custom icons to your site. The answer is quite simple; for ‘better visual representation.’ Though Flatsome has some attractive icons, you may still want to use custom icons on your website and you can easily customize icons on your own.

 39. Collapse/Expand Sidebar Product Category List

expand sidebar category

The sidebar product category list is vital for any online store. In Flatsome powered WooCommerce site, you can collapse/expand the sidebar menu in the WooCommerce collapsing categories list, so visitors can easily navigate your site. 

 40. Setup WordPress SMTP Server Using Gmail API

Gmail Api flatsome

WordPress uses the PHP mail function to send out email notifications. However, this function doesn’t work as expected for several reasons. Gmail provides an SMTP service that you can use for sending out emails. For that, you need to set up an SMTP server using Gmail integration.

 41. Create a Simple Size Guide Popup

size chart flatsome

If shoppers struggle to find the right product for their needs will likely leave your store and move on to a competitor. It’ll be better to show a simple size guide popup in your online shop and you can learn how to create a size chart. Without it, your customers will be confused about the proper size they need. It’s a must if your products are size oriented, such as clothes, shoes, etc.

 42. Clear Instagram Element Cache

clear instagram element

The cache is temporary data that helps your browser load things faster. Sometimes this cache data can get expired or corrupted and cause problems using Instagram. The best practice is to clear Instagram element cache data. If you don’t know how to clean Instagram cache then you can learn it well from here.

 43. Speed Up Your WooCommerce Store
Speed up WooCommerce store

Hopefully, at this stage, you can create your online store using the Flatsome theme, but you might face issues with speed optimization. The faster your website loads, the better the shopping experience. Here are some tips to make your WooCommerce site load faster with the best practice of WordPress speed optimization.

Wrapping Up

We hope this guide will be helpful for anyone using the Flatsome WooCommerce theme. It’ll help you to improve your website, get more site visitors, and at the same time increase your sales. 

If you want us to cover more topics on Flatsome, let us know in the comment section. We’ll update this article continuously to provide better solutions for your WooCommerce store. 

Leave a Comment

Your email address will not be published.