Flatsome Studio

How To Use Flatsome Studio To Create eCommerce Website Using Flatsome WooCommerce Theme

When it comes to building eCommerce websites using Flatsome WooCommerrce theme, Flatsome Studio can help you to do the job in minutes.

UX Themes has launched this feature after 3.0 version. Before that, site owners have to image a page layout and design them using UXBuilder. After lunch of Flatsome Studio, the process has become easier.

There are more than hundred of website elements in the Flatsome studio. The elements are categorized under site elements. I’ve listed them for your convenience.

Flatsome Studio Elements

  • Banner
  • Blog
  • Call To Action
  • Campaigns
  • Category
  • Client
  • Contact
  • Countdown
  • eCommerce
  • Full Page
  • Gallery
  • Grids
  • Icons
  • Map
  • Search
  • Servies
  • Sign up
  • Sliders
  • Team Member
  • Testimonial
  • Text
  • Video

How To Use Flatsome Studio To Build eCommerce Website

To use UX Builder, create a blank page giving a name. Once a page is created, the page builder could be accessed from page backend or frontend.

Please note: UX Builder can’t enabled on Blog and WoCommerce based pages.

Step 01: Lunch UX Builder on a Page

If you are on the page backend, launch the builder click on the Edit UX Builder Button button.

Edit page with UX Builder - flatsome studio

Step 02: Enable Flatsome Studio Mode.

Once UX Builder is launched completely, the screen looks like the following screenshot.

Press Add Element button - flatsome studio

To enable Flatsome Studio mode, click on the Add elements button from the left UX Builder settings panel.

Now, Flatsome Studio button appear at the top of the elements. press the button to enable Flatsome Studio mode.

Press Flatsome Studio Button - flatsome studio

Step 03: Import Desired Site Elements

Now you have access to Flatsome Studio. Try to find your desired elements from the startup screen. Even you can get into elements categories like eCommerce, testimonial, etc to find your desired page element. Each element comes with Preview and Import button. Preview helps to view elements live. And Import will add the element on your page.

To Import the pre-made layout, select the Import button.

Choose Your Desired Element - flatsome studio

And press Start button. It will add the element you to page builder in a few seconds.

Select Start Button to Import Element - flatsome studio

Once the builder element is added to the Flatsome UX Builder, press the update button.

Press update button - flatsome studio

Check your page frontend. If followed the tutorial like I showed in tutorial. Your page would look like this link.

Troubleshooting UX Flatsome Studio

Sometimes, you may find an issue like “Element Importing Process Get Stuck or Freeze” like the following screenshot.

Builder freeze - flatsome studio

To solve this issue. Your site is running on PHP 5.6 or higher. And You have added the following limits are added in php.ini file.

  • max_execution_time 180
  • memory_limit 256M
  • post_max_size 48M
  • upload_max_filesize 48M

Now, get to your file root and edit wp-config.php. Make sure the file has following limits added

If you can’t add the limit in php, contact your hosting provider to add this limit for you.


Flatsome Studio is an incredible feature of Flatsome WooCommerce WordPress theme. With this feature you can quickly build site within shortest span of time. If you find this tutorial helpful, let me know in the comment.

If you need tutorial on your desired topic, let me know in the comment. I’ll write the next tutorial for you.