This tutorial is about how you can customize the WooCommerce product page using UX Builder. Customizing the product page is an awesome feature of UX Builder.
An online store is more complex than a regular website. That’s why you need to use a UX builder for customization. It helps to design your WooCommerce store with a visual, drag& drop interface.
Your online shop have to be modern and beautiful but the most important feature is user experience (UX).
The UX builder of Flatsome is the ultimate tool for creating awesome responsive sites without having any coding experience.
Moreover, it enable you to create beautiful online shop without writing a single line of code.
Now let’s get started.
To make it easy for you, we have created a video tutorial on how to customize WooCommerce product page using UX Builder.
To follow text-instructions, then you can continue reading the text version below…
Before heading to the product page customization, let’s select a product layout page that we will customize in this tutorial.
For demonstration purpose, I am selecting Classic Shop for shop demos of Flatsome Theme. However, you can select your desired shop demos from the list.
In the product customizer, I have termed this layout as ‘Full height left sidebar’.
If you want to customize this product page without manually building page elements in UX Builder, you have to head to the Flatsome official documentation. After that, you have to search for the shortcodes for Custom Product Page Layout.
On this page, you’ll get a list of shortcodes for all available product page layouts. You can select your desired shortcodes and start customizing in the UX Builder.
Here is the link of shortcodes for custom product layouts –
As I am going to customize full-height left sidebar layout, now time to copy the code for the layout. Please note that here I am showing an image for the shortcodes. But you can easily copy it from the layout.
Now create a new block with a title. To create head to Add new under UX Blocks from your dashboard.
The block can be titled anything but I will name the title as ‘Full height left sidebar layout’. Then I have pasted the shortcode inside the block editor whichI have copied and clicked on the Publish button.
You are just one step away from customizing the product page layout. It’s time to navigate to the product page theme option and select the Custom layout icon.
After that, you will have to enable your newly created blocks from Custom Product Layout drop dropdown.
Now select the block you just created for the purpose of the custom page layout. In my term, its Full height left sidebar layout. Once your blog selection is completed click on the Publish button to save the settings.
Now time to start customizing product page layout. At first you’ll have navigate to an existing product page from the frontend which you have set earlier.
Please note that it’s recommended to select a product that you have set up completely (like some images, short description and etc). That way it will be easier to visualize the page section you will create.
You can notice an option called ‘UX Builder’ is clearly visible. Click on the button
Once the UX Builder is opened, you can notice Product Page elements available in the left side panel of the ‘Product Page’ section.
This is basically the block that I have created at layout shortcodes from the documentation.
There are options to reorder the elements from the left side panel and change the settings from the element option. For demonstration purpose, I am reordering the ‘ Price’ from the left side panel.
On the other hand, you can also rearrange elements from the builder preview and add new elements from the builder product page. In this example, I have rearranged the ‘Product Tabs’ section with the ‘Related Products’ just simply by drag and drop option.
Flatsome comes with drag and drop functionality, and ready to go modules. It will help you to customize your WooCommerce product page. You could use different page structures for different product categories.
Furthermore, it leaves clean and readable shortcodes in the content editor.
If you need more tutorials on Flatsome theme or WooCommerce, let me know in the comment section. I’ll write the next tutorial for you.