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, dragdrop 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 WooCommerce product page using UX Builder.
To follow the text instructions, you can continue reading the version below.
B. 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.
As going to customize full-height left sidebar layout, now time to copy the code for the layout. Please note that here 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 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.
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 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.
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.
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.