Custom Product Layout like Amazon in Flatsome Theme

In this tutorial, you’ll learn to set up a custom WooCommerce product layout with Flatsome Theme. This guide will walk you through each step so you can showcase products with a sidebar, product info, and direct access to the cart.

Tutorial Steps:

1. Prepare Your WordPress Setup

• Make sure you have WordPress, Flatsome Theme, and WooCommerce installed.
• Add a few products in WooCommerce for testing. For related items, assign them the same category. For upsells, set specific products as “linked” under product settings.

2. Create a UX Block for Custom Layout

• Go to UX Blocks > Add New, name it “Custom Product Layout,” and publish it.
• Link this block to your product pages: Flatsome > Theme Options > WooCommerce > Product Page and select the UX block you just created.

3. Adjust Site Width (Optional)

• For a fuller layout, go to Flatsome > Theme Options > Layout and set Site Width to about 1250 pixels.

4. Edit Product Layout with UX Builder

• Open any product and go to Edit Product Layout with UX Builder.
• This will allow you to customize the layout directly with a live preview.

5. Add a Section with Background

• Add a new section and give it a light gray background (#FAFAFA).
• Within this section, create your layout.

6. Add Breadcrumb Navigation

• Insert a row with one column and add Product Breadcrumbs for easy navigation.

7. Design the Main Product Layout with Three Columns

• Add a row with three columns. Set their widths to 6:3:3 or adjust based on your preference.
• First column: Add the Product Gallery.
• Second column: Add Product Title, Rating, and Short Description.
• Third column: Insert Product Price and Add to Cart button. Add any custom text (e.g., “Next Day Delivery”) in a list format for extra details.

8. Apply Padding and Rounded Corners

• Select the row settings for padding and set it to 40px (desktop), 30px (tablet), and 20px (mobile).
• In column settings, set border radius to about 15px to achieve a rounded box effect.

9. Add Product Tabs

• Below your main product info, add a new row for Product Tabs to display additional details.
• Use “Line Tabs” for a cleaner, organized appearance.

10. Add Related Products and Upsells

• Duplicate the previous row to save settings and adjust for related products.
• For related items: Insert Related Products.
• For upsells: Insert Product Upsells. Remember, if products aren’t linked as upsells, this box will appear empty.

11. Preview & Test Responsiveness

• Switch between desktop, tablet, and mobile views to ensure all elements fit nicely. Adjust the layout widths if needed to optimize for different screen sizes.

12. Apply and Review on All Products

• Once you save, all products will reflect this new layout automatically. Test different products to ensure everything displays as intended.

Your new custom layout is ready! You’ve just created an engaging and intuitive product page layout for your WooCommerce store, making it easy for customers to view products, add to cart, and explore related items!