Manage Product Highlights in Flatsome Theme

Learn to customize product pages in Flatsome! This step-by-step guide shows you how to manage global and unique content for each product without extra hassle. Perfect for WooCommerce users!

Step-by-Step Tutorial:

1. Set Up a Custom Product Page Layout

• Go to your WordPress dashboard and open the product page where you want to apply the custom layout.
• If you have imported a product page layout template, select it from the Product Layout section (e.g., choose “Product Page 2” layout).

2. Preview the Updated Product Page

• Click Update and view the product to see your new layout.
• Your page should now reflect the custom structure, with the global elements remaining consistent across all products.

3. Separate Global and Unique Content

• Identify which sections are global (e.g., product title and icons) and which sections need individual customization (e.g., product highlights).
• Open the UX Builder to locate sections like “Image Text Block 1” or similar blocks specific to the unique product content.

4. Edit Product-Specific Content in UX Blocks

• In the dashboard, go to UX Blocks to manage reusable page elements.
• Find the “Product Page Layout” block, and copy out the section you want to customize for each product.

5. Create New UX Blocks for Unique Product Highlights

• Create a new UX Block for each product, naming it by the product name (e.g., “Table Lamp Highlights”).
• Paste the unique content into this new block under the Text Editor tab and Publish the block.

6. Insert Shortcode for Custom Product Highlights

• Copy the shortcode for your new UX Block.
• Return to the product editor, scroll to Bottom Content within the product layout, and paste the shortcode to add the custom highlights for that specific product.

7. Set Default Product Layout for All Products (Optional)

• To apply the layout across multiple products, go to WooCommerce > Settings > Products.
• Choose the default layout (e.g., Product Page 2) to ensure all products use this page structure.

8. Duplicate Product-Specific UX Blocks for Similar Products

• Install a plugin like Duplicate Page to quickly copy UX Blocks.
• Duplicate a product block, customize as needed, and paste the new shortcode into the next product’s Bottom Content.

9. Adjust Global Settings in Product Layout (Optional)

• If you need to change global elements (e.g., product title size), edit these directly in the original Product Page Layout in UX Builder.
• Save your updates to apply them across all products using this layout without affecting individual product highlights.

10. Review and Fine-Tune Each Product

• Preview each product to ensure the upper (global) and lower (unique) content display correctly.
• Make any final adjustments as needed to the text, images, or layout.

This method is ideal if you’re looking to scale your WooCommerce store with a flexible, custom design while maintaining ease of updates. Let me know if there’s any part you’d like to dive deeper into or if you need help troubleshooting Flatsome theme features!