How to Create Amazing Flatsome Custom Product Page Without Writing Code

Flatsome is undoubtedly one of the best WooCommerce themes in the market. This 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 layout you need. 

So, we have made a plan to prepare an extensive tutorial to create a Flatsome custom product page. This tutorial will help you design beautiful WooCommerce product pages effortlessly.

Create Flatsome Custom Product Page Globally

There are many ways to customize the Flatsome custom product page. The tutorial will show how to create a 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.

Step 1:

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.’  We have named our block “Custom Product Layout Global“. flatsome custom product page

Step 2:

In the dashboard, hover on ‘Flatsome’ and from there on ‘Theme Options, head to the WooCommerce >> Product page. 

Step 3:

You will be taken to the product customization options page. Click on the ‘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. flatsome custom product page  

Step 4:

The current block for Flatsome custom product page is empty. We have no layout added yet, right? If you visit any WooCommerce product pages, they will be empty. 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.’  custom product page in flatsome

See also  Best WordPress Contact Form Plugin in 2023

Step 5:

Your custom layout page will open in UX Builder. Click on the ‘Add Elements’ button on the left side panel in the UX builder. You can now use entire UX Builder elements as you want while the UX builder is open. Check the guideline for using Flatsome UX Builder to customize the product page layout. Even you can import desired Flatsome custom product page layout from Flatsome studio flatsome custom product page

Step 7:

If you don’t want to build a custom WooCommerce 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 LayoutCheck the preview of the WooCommerce product page. We have added the page shortcodes for your convenience.

Step 8:

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. flatsome custom product page

Step 9:

Get inside any of your custom WooCommerce 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.

Step 10

From the UX Builder, you can create any Flatsome custom product page. You can reorder product page elements, add new Builder elements, and change element settings on the left side panel.  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. flatsome custom product page 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 by changing UX Builder element settings when UX builder is opened. Let’s change the WooCommerce product title size and hide the title divider layout. flatsome custom product page 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.

Create Custom Product Page for a Specific Product

We have successfully created a custom product page and set it globally. Globally means, this custom product page will be active for all products of your WooCommerce website. Now we will see how we can create and set up a custom product page for a specific product because you may want to present a product differently than others. 

Step 1:

Head to UX Blocks>Add New from the WordPress dashboard. We will create a new block called ‘Custom Product Page-Single.’ This custom product page will be used for a specific product. Click ‘Publish’ to proceed. 

Step 2:

From the WooCommerce product list, open any single product in the editor.  flatsome custom product page

Step 3:

Scroll down to the product setting section at the bottom. Click on the ‘Product Layout’ tab. Now choose ‘Custom Product Page-Single’ from the Custom Product Layout dropdown list. Click ‘Update’ to save the settings. 

Step 4:

Now open the particular product in ‘View’ mode. Hover on ‘Edit Product’ in the top admin bar and click ‘Edit Product Layout with UX Builder.’ This will open your product in UX Builder, and you can customize the product page per your design criteria. 

Final Output

flatsome custom product page

Create a Custom Product Page for Products of a Specific Category

So far, we have learned how to create a custom product page for all individual products. Now we will see how we can create and set up a custom product page that will be used for products of a particular category. 

See also  How to Disable Product Quick View in Flatsome WooCommerce Theme

Step 1:

Create a new UX Block named ‘Custom Product Page-Category.’ This block will be used to create a custom product page for products of a particular category. Click ‘Publish’ to save.

Step 2:

From the WordPress dashboard, go to Products>Categories. From the category list, choose the particular category you want to create the custom template. Open the category in the editor.  flatsome custom product page

Step 3:

Scroll down and click the select box for Custom Product Layout. Choose ‘Custom Product Page-Category’ from the list and click ‘Update’ to save the setting. 

Step 4:

Now open any product in ‘View’ mode that falls under our preferred category. Hover on ‘Edit Product’ in the top admin bar and click ‘Edit Product Layout with UX Builder.’ Your product will be open in UX Builder, and you can customize and develop a custom product page for the particular category.  flatsome custom product page

Final Output

Conclusion

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 into the most popular SEO plugins. 


Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…