Flatsome is undoubtedly one of the best WooCommerce themes in the market. The popular WordPress theme has its own various predefined templates for shops, products, and inner pages. But still, you may want to create a Flatsome custom product page that can design any kind of layout you need.
So, I’ve made a plan to prepare an extensive tutorial to create Flatsome custom product page. I believe this tutorial will help you to design beautiful WooCommerce product pages effortlessly.
Create Flatsome Custom Product Page Globally.
There are many ways to customize Flatsome product page. In the tutorial, I’ll show how to create Flatsome custom product page globally. It means you create a custom product page layout once and apply the design to the entire WooCommerce product pages instantly. So, let’s get started.
To customize Flatsome product pages globally, navigate to UX Blocks >> Add New. Create a block for Flatsome custom product layout, Name the block with your desired title, and click ‘Publish.’ I’ve named my block “Custom Product Layout Global“.
In the dashboard, hover on ‘Flatsome’ and from there on ‘Theme Options, header to the WooCommerce >> Product page.
You will be taken to the product customization options page. Click on ‘Custom’ icon from the ‘Product Layout’ option. Select ‘Custom Product Layout Global’ from the custom product layout list. Publish the setting to save the changes.
The current block for Flatsome custom product page is empty. We have no layout added yet, right? If you visit any of WooCommerce product page. It will show an empty page. It asks to open Flatsome builder to add a new product page layout. To create the desired product page layout with UX Builder, hover over ‘Edit Product’ in the top admin bar and click on ‘Edit product layout with UX builder.’
Your custom layout page will open in UX Builder. Click on the ‘Add Elements’ button in UX builder. Now, you can use entire UX Builder elements as you want. Check the guideline to use Flatsome UX Builder to customize the product page layout. Even you can import desired Flatsome custom product page layout from Flatsome studio.
If you don’t want to build the page with UX Builder. You can use Flatsome custom product page shortcodes to design the layout swiftly. I am going to customize the Left Sidebar Product Layout. Check the preview of the WooCommerce product page.
I’ve added the page shortcodes for your convenience.
You have the shortcodes for the left sidebar product layout. Now, add these shortcodes to the empty Custom Product Layout Global block that we create in the first step and press the Update button.
Get inside any of your store product pages, and you can notice pages are no longer empty. The empty page is filled with the Left Sidebar layout. Press the “Edit Layout With UX Builder” button to customize the page layout. It will open the page in the UX Builder.
From the UX Builder, you can create any type of Flatsome custom product page. You can reorder product page elements, add new Builder elements, and change element settings.
In step 9, you can notice the product description is showing before the add to cart button. You move the description under the product title from the UX Builder.
Besides reordering the product page element, you add a new UX Builder element in your desired location. Let’s add an image element after the add to cart button.
Each builder element comes with settings. You can also create Flatsome custom product page layout changing UX Builder element settings. Let’s change the WooCommerce product title size and hide the title divider layout.
When the Flatsome custom product page customization process is completed, save the changes and press Apply. The changes would get applied to the entire WooCommerce product pages automatically.
In this tutorial, we have tried to show you how to create and use a custom product page of your choice. This procedure allows you to create any design you want for your custom product layout. You can also create a one-page website free in the Flatsome theme easily.
We hope this tutorial helps you to meet your specific needs. Stay tuned with WPCred for useful tutorials like this! Feel free to check out our article on Yoast SEO vs Rank Math SEO plugin comparison to get insight on the most popular SEO plugins.