Custom WooCommerce Product Page

Learn how to create custom WooCommerce product pages using the Flatsome theme and UX Builder. This step-by-step guide will help you design unique layouts to drive more sales.

Back to tutorials

In this tutorial, we'll walk through how to replace the default Flatsome product page with a custom layout using UX Builder. Whether you want to showcase products uniquely or test different layouts to optimize conversions, this guide will cover it all.

Step 1: Create a Custom Product Layout

1. Log in to WordPress: Go to the backend of your WordPress site.
2. Navigate to UX Blocks: In the left sidebar, click on UX Blocks > Add New.
3. Name the Layout: Give it a descriptive name, e.g., “Custom Product Layout.”
4. Publish the UX Block: Click Publish to save it.

Step 2: Connect the Custom Layout to WooCommerce

1. Go to Flatsome Theme Options: Navigate to Flatsome > Theme Options.
2. Select WooCommerce: Click on WooCommerce > Product Page.
3. Change Product Layout:
• Scroll down to Product Layout and select Custom.
• Choose the UX Block you just created.
• Click Publish to apply the changes.

Step 3: Edit the Custom Product Layout in UX Builder

1. Go to the Product Page: View a product page in WooCommerce.
2. Open UX Builder: Hover over the product and click Edit Product Layout with UX Builder.
3. Add Elements to the Custom Layout:
• Add a Section: Click Add Element > Section to create a container.
• Insert Columns: Add a two-column layout.
• Product Gallery: Select Product Gallery (Purple Element) to display product images.
• Product Title: Drag the Product Title (Purple Element) into the right column.
• Product Price: Add the Product Price below the title.
• Add to Cart Button: Insert the Add to Cart element, which includes variations and quantity.
• Short Description: Include the Product Short Description element for quick product info.
• Product Tabs: Add the Product Tabs element to display description, reviews, and additional info.

Step 4: Customize Product Tabs and Additional Info

1. Go to WooCommerce Product Settings:
• Open the product editor and scroll to Product Data > Advanced.
• Enable or disable tabs such as Reviews, Additional Info, and Custom Tabs.
2. Adding Global Custom Tabs:
• Go to Flatsome > Theme Options > WooCommerce > Product Page.
• Scroll to Global Custom Tabs and add universal information like Delivery Info.

Step 5: Create Custom Layouts for Specific Products or Categories

1. Go to Product Settings:
• Open a product and scroll down to Product Layout.
• Choose the specific UX Block layout for that product.
2. Set Custom Layouts for Categories:
• Go to Products > Categories.
• Edit a category and assign a custom product layout for all products in that category.

Step 6: Integrate Shortcodes and Third-Party Plugins

1. Add Custom HTML or Shortcodes:
• In the UX Builder, click Add Element > HTML.
• Insert shortcodes for plugins like TrustPilot, Review Plugins, or Custom Fields.
2. Example:
• To insert a TrustPilot review script, add an HTML element and paste the provided TrustPilot script.

Step 7: Add Related Products and Upsells

1. Add Related Products:
• Go to the bottom of the product layout and click Add Element > Related Products.
2. Configure Upsells and Cross-Sells:
• Go to Products > Edit Product > Linked Products.
• Assign Upsells and Cross-Sells to suggest additional products.

Step 8: Final Touches and Testing

1. Preview the Layout: Check the front-end product page to see the new layout in action.
2. Test Product Variations: Ensure that variations, pricing, and add-to-cart buttons work correctly.
3. Adjust as Needed: Make any final adjustments in the UX Builder for optimal layout and design.