How to Customize WooCommerce Product Page Using UX Builder By Flatsome Theme

Customizing the product page is an excellent feature of UX Builder. This tutorial discusses how you can customize the WooCommerce product page using 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-and-drop interface.

For any eCommerce shop, user experience(UX) is one of the most important features. So, to make an eStore beautiful and modern, you need to have a better UX. To solve this problem and give every website a better UX by default, Flatsome introduced the UX builder. It’s an awesome tool that can help you to build a responsive site without writing a single line of code!

To make it easy for you, we have created a video tutorial on how to customize the WooCommerce product page using UX Builder. Using this article or video, you can customize the WooCommerce product page using UX builder. Follow any that works for you!

 

 

To follow the text instructions, you can continue reading the version below.

Before heading to the product page customization, let’s select a product layout page that we will customize in this tutorial. We’re selecting Classic Shop for shop demos of Flatsome Theme for demonstration purposes. 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.’

 
 

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 must search for the Custom Product Page Layout shortcodes.

documentation of flatsome
 
 

There is a list of shortcodes for product page layouts. You can select your desired shortcodes and start customizing them in the UX Builder.

 
shortcode for cstom layout
 

As we’re going to customize the full-height left sidebar layout, now is time to copy the code for the layout. Please note that here we’re showing an image for the shortcodes. But you can easily copy it from the layout.

 
shortcode for UX Builder
 

Now create a new block with a title. To create a 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 we pasted the shortcode inside the block editor, which we’ve copied, and clicked on the Publish button.

 
title for ux builder
 

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.

product layout for ux builder
 
 

After that, you will have to enable your newly created blocks from the Custom Product Layout drop dropdown.

Now select the block you just created for the custom page layout. In our term, it’s a Full height left sidebar layout. Once your blog selection is completed, click the Publish button to save the settings.

custom layout for ux builder
 
 

Now time to start customizing the product page layout. At first, you’ll have navigated to an existing product page from the frontend you set earlier.

Selecting a product you have set up completely (like some images, short descriptions, etc.) is recommended. That way, it will be easier to visualize the page section you create.

You can notice an option called ‘UX Builder’ is visible. Click on the button.

 
 

Once the UX Builder is opened, you can notice the Product Page elements available in the left side panel of the ‘Product Page’ section.

This is 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 purposes, 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’ simply by the drag and drop option.

 
 
 

Wrapping Up

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 us know in the comment section. We’ll write the next tutorial for you.