Create a custom WooCommerce product page with a Flatsome theme

Flatesome Theme

Flatsome is a powerful WordPress theme designed for eCommerce websites and comes with WooCommerce integration.

It is one of the most popular WooCommerce themes on ThemeForest. As of the time of writing this tutorial, it was over 174.500 sales and an awesome 4.8-star rating coming from over 6,600+ reviews.

Flatsome is primarily designed with beginners and non-tech-savvy users in mind.

This is great for people who want to get started with an online business but don’t know how to code or have the budget to hire a professional coder. With Flatsome, you will be able to create a professional-looking website using simple and intuitive tools.

Now, Flatsome comes packed with tons of awesome features and functionalities. To showcase what’s available and how it works, we have a quick tutorial showing you how to create a WooCommerce product page using Flatsome.

So, without further ado, let’s get started:

Table of Content:

• Flatesome Theme
• Difference between Flatsome, WooCommerce, and WordPress
• Create a WooCommerce product page using the Flatsome theme
• Step 1: Select a Layout for the Product Page
• (Optional) Step 2: Create Product Page Manually
• Step 3: Customize the Product Page
• Wrapping Up

Difference between Flatsome, WooCommerce, and WordPress

As we welcome our new readers, we must put in some necessary information to ensure that all our readers are on the same page. Here we will discuss the difference in all three terminologies that we will be using throughout this article.

Let’s start with WordPress. It is a platform where you install different themes and plugins to create your website. There are thousands of plugins and themes available to fulfill other tasks as per your requirement.

WooCommerce is a plugin we install on WordPress that allows you to add different features to our website. With this plugin’s installation, we can make our website and online store with additional functionalities such as shopping cart, payment processing, product management, etc.

Lastly, but certainly, one of the most critical elements is the outlook of our website. Flatsome is a theme that allows us to customize our website’s perspective according to our desires. For instance, if your company logo is orange, you would want to reflect on your website’s color. It is what Flatsome can provide you.

Create a WooCommerce product page using the Flatsome theme

Since all ours reader has knowledge about WordPress, WoCommerce, and Flatsome, it’s time for us to move ahead to our product page’s customization with the fantastic UX builder that comes with the Flatsome theme. It is a drag and drops feature that makes the life of the designer extremely easy.

Almost everyone has shopped online, probably because of the challenging times we have faced in the past few months. Staying home was the safest solution for all of us. It is the reason all our readers will agree upon the fact that an online store is a lot more complicated as compared to a standard website.

However, with the help of WooCommerce and Flatsome, this task has become extremely easy. You need to sit down and plan how your website will look like, and that is it. WooCommerce will be there to help you with its builder options. You can create a full-fledge working online store in just a few minutes with drag and drop.

With WooCommerce and Flatsome, you will be able to give your ideas of having an online store a whole new life. Your website must have a modern and beautiful look so that it can attract customers. Therefore, Flatsome is the best solution for all your problems, so download it from here and let’s get started.

Flatsome has some fantastic features, but one of the parts is that it has become a top choice of more than 300,000 users. An ultimate tool assists in creating some tremendous responsive websites without having to code a single line. Furthermore, its ability to create some highly creative and unique online stores makes it even more worthy.

So without wasting any further time, let’s get on to the tutorial. This tutorial takes you through the complete process of designing the products page. The pictures will help you get a better idea of how the task will go through the process.

Step 1: Select a Layout for the Product Page

First, we will be starting by selecting a layout of the products page. This selection will create a basic page for our online store, which we will customize according to our desires later on. This step-by-step guide will walk you through the process of customizing the page.

For this example, we will be continuing with the Classic Shop option. However, there is no restriction on you. The process of customization will be similar for every layout that you select. The only difference would be the basic structure of the page will be different from the other.

Moving ahead to the product customizer, we gave it the name the Full height left sidebar.

There are two options available for customizing the products page. The first one is to be done with the UX builder, while the other is to build the page manually. If you select the second option, you will have to head to the official documentation and locate shortcodes. If you are a beginner and this is your first experience building an online store, I recommend going for this first option.

(Optional) Step 2: Create Product Page Manually

Here is a screenshot of the official documentation page of Flatsome. You can type the word shortcodes and search for them.

Once you hit search, there will be a list of shortcodes displayed on the screen. You can choose the shortcodes that are important for the product page. Using shortcodes requires less effort, but it is essential that you have a little hands-on experience with WordPress and using shortcodes.

Here is the list of shortcodes that you can use on the website to create pages.

In this example, we will be customizing the full height left sidebar layout; thus, we will be copying the code for the design. Following is a picture of the applied, but you can easily copy it from the structure.

Start off creating a block with a title. If you want to develop head, you need to click “Add New” available under UX blocks placed in your dashboard.

You can name the block as per your desires. Here in this example, we have named the union as the ‘Full height left sidebar layout.’ Next, you can see the shortcodes inside the block editor. Once you complete copying the desired shortcodes, you can hit publish.

We will be at par after this one little step where we can customize our page according to our desires. Now navigate to the product page theme option and hit the custom layout icon.

Once complete, you will now be able to create blocks from the Custom Product Layout dropdown.

Choose the block that we just created. Our main goal for creating that block was to create a product page out of it. According to this example, the Full height left sidebar layout is the block, while at your end, it will be as you have named.

Once complete, just hit the Publish button; it will save the settings.

Step 3: Customize the Product Page

It’s time for us to start customization. First, we will navigate the existing products page from the front end that we set earlier in the steps.

It is important that you select a particular product that we need to setup. You should have complete details, images of the work that we need to customize. This way, the process becomes more comfortable to visualize the page section you will create.

The UX builder option is visible. Just hit the button to start the customization.

After the UX builder is open, you can see from the image that the product page elements are available in the left side panel of your products page.

The left side panel is the block that we initially created. We created it with the help of the shortcodes taken from the documentation.

You have options to reorder the elements from the left side panel and change the settings from the element option. In this example, we will be reordering the Price available on the left menu.

Moreover, it also allows you to rearrange elements from the builder’s preview and put on additional components on the builder product page. In this demo, the Products Tabs section and the Related Product have been rearranged with just a simple drag and drop.

With the significant drag and drop functionality, Flatsome is ready to provide you what you are looking for on your website. With highly customizable modules, you can create some fantastic pages with ease. The drag and drop feature makes life even more comfortable.

Wrapping Up

It is imperative to have an online business in this modern age because people prefer to stay home to remain safe. So start building your business first online store with Flatsome and mesmerize your customers with its uniqueness and creativity. Moreover, there is no mess of code in the content editor, just a few shortcode lines. Flatsome is undoubtedly the best theme I have come across. So there is no need to look around for any other theme, just hit the download button and start building your customized online store right away.