When it comes to building eCommerce websites using the Flatsome WooCommerce theme, Flatsome Studio can help you to do the job in a minute.
UX Themes launched this feature after the 3.0 version. Before that, site owners have to image a page layout and design them using UXBuilder. After the launch of Flatsome Studio, the process has become a lot easier.
There are more than a hundred website elements in the Flatsome theme studio. Those are categorized under site elements. We’ve listed them for your convenience.
Flatsome Studio Elements
How To Use Flatsome Studio To Build an 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 the page backend or frontend.
Please note: UX Builder can’t be enabled on Blog and WooCommerce-based pages.
Step 01: Lunch UX Builder on a Page
If you are on the page backend, launch the builder and click on the Edit UX Builder Button button.
Step 02: Enable Flatsome Studio Mode
Once UX Builder is launched completely, the screen looks like the following screenshot.
To enable Flatsome Studio mode, click on the Add elements button from the left UX Builder settings panel.
Now, the Flatsome Studio button appears at the top left of the page. Click it to enable Flatsome Studio mode.
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 to your page. If you have a product import-related issue you can use the product import export plugin for WooCommerce in the future.
To Import the pre-made layout, select the Import button.
And click the Start button. It will add the element to the page builder in a few seconds.
Once the builder element is added to the Flatsome UX Builder, press the update button.
There are hundreds of templates from which you can choose. You may not find the exact template we’ve used for the demonstration. In that case, use any template you like.
Troubleshooting UX Flatsome Studio
Sometimes, you may find an issue like “Element Importing Process Get Stuck or Freeze” like the following screenshot.
To solve this issue. Your site is running on PHP 5.6 or higher. And You have added the following limits are added in the 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 WordPress memory limit increase has been done.
If you can’t increase the limit in PHP, contact your WordPress hosting website to do that on your behalf.
Flatsome Studio is an incredible feature of the Flatsome WooCommerce WordPress theme. With this feature, you can quickly build a site within the shortest period. If you find this tutorial helpful, let us know in the comment. For being an expert in Flatsome, you can also check out our other Flatsome tutorials.
If you need a tutorial on your desired topic, let us know in the comment. We’ll write the next tutorial for you.