WoodMart Theme Layout Builder Tutorial Guide

WoodMart is a highly business-oriented, practical program WooCommerce Theme, whose Layout Builder is one of the most critical functional modules within the entire theme system. Through the Layout Builder, you can directly take control of WooCommerce's page structure, enabling deep customization of product pages, store pages, and other system pages.

Understanding and correctly using the Layout Builder is a fundamental skill for building e-commerce sites with WoodMart.

1. The Role of Layout Builder in WoodMart

1.1 Practical Applications of the Layout Builder

The purpose of Layout Builder is not to "beautify pages," but ratherRedesign WooCommerce Page StructureThe

It primarily addresses the following issues:

• The default product page structure is not controllable.
• Different products cannot use different page layouts.
• Store pages and category pages have a monotonous style.
• Modifying theme files carries high risks and incurs significant maintenance costs.

Using Layout Builder, you can completely restructure page layouts without writing any code.

1.2 Differences Between Layout Builder and Standard Page Editing

The standard page editor only affects the content of individual pages, while Layout Builder directly modifies WooCommerce's system pages.

The key difference is this:

• Layout Builder will replace the default PHP Template Output
• Layout can be controlled by conditions to apply scope
• Multiple product page structures can coexist on the same site.

Therefore, Layout Builder is closer to a "page template system" than a content editor.

II. Creating a Single Product Page Layout

2.1 Path for Creating a New Single Product Layout

The backend operation path is as follows:

WordPress Backend
Layouts
Single Product
Add New

Two basic configurations must be completed during creation:

• Layout Name
• Application Conditions

2.2 Application Condition Configuration Logic

Conditions determine which products this layout applies to. Common uses include:

• All products use a unified layout.
• A specific category uses a standalone layout.
• Specify exclusive structures for certain products

The significance of this step lies in enabling different product types to adopt distinct display strategies, rather than applying a single template across the board.

2.3 Enter Builder to Edit Layout Structure

After clicking Create Layout, the system will enter the visual Builder.

The layout consists of modular elements, such as:

• Product Pictures
• Product Title
• prices
• descriptive
• buttons
• Custom Content Block

Each element supports:

• spacing
• font setting
• Color Control
• Functional Parameter Configuration

All layouts are designed to work seamlessly across desktop, tablet, and mobile devices.

III. Explanation of Element Categories in Layout Builder

3.1 Global Elements

Global Elements are versatile modules that can be reused across multiple layouts, suitable for:

• Unified Promotion Zone
• Fixed Description Module
• common (use) CTA blocs

These elements are used to maintain a consistent style across the site.

3.2 Site Elements

Site Elements contain site-level components, typically related to the overall structure, used to maintain consistent logic across different layouts.

3.3 Single Product Exclusive Elements

Elements in the Single Product area can only be used on single product pages, such as:

• Product Title
• Product Ratings
• Product Price
• Add to cart button

These elements cannot be called within regular pages or other layouts.

4. Set the correct product preview object

4.1 Why is it necessary to specify preview products?

By default, Builder randomly selects a product for preview, which can easily lead to misjudgments in the following situations:

• Product fields are incomplete.
• Variable products differ from simple product structures.
• The layout displays abnormally in the actual product.

4.2 Specifying the Preview Product Operation Method

The operation path is as follows:

Theme Settings
Single Product
Builder Area
Select a specific product

After configuration is complete, the layout in the Builder will always be rendered based on this product.

V. Reasons for Functionality Loss Due to Custom Layouts

5.1 The Fundamental Cause of Feature Disappearance

When using a custom layout:

• The default WooCommerce page structure has been cleared.
• Content originally output via PHP Hooks is no longer automatically loaded.

Therefore, some functional modules may no longer be displayed, such as:

• Visitor Count
• Third-Party Plugin Information
• Custom Extension Content

5.2 Using WooCommerce Hook Element Recovery Functionality

WoodMart provides WooCommerce Hook elements for manually inserting hooks.

The typical usage process is as follows:

• Confirm the hook names for plugin dependencies
• Add a WooCommerce Hook element to the layout
• Select the corresponding option Hook
• Enable Clean Actions to remove default output

The primary function of Hook is:

• Ensure third-party plugin compatibility
• Add custom functionality code

VI. Creating the Shop Page Layout

6.1 Create a New Products Archive Layout

The backend path is as follows:

Layouts
Products Archive
Add New

You also need to set the layout name and apply conditions.

6.2 Archive Layout Exclusive Element Specifications

Product archive pages feature different components compared to single product pages, such as:

• Product Lifecycle Module
• Category Filter
• Sorting Tool
• Category Description Area

These elements are only available in the Products Archive Layout.

6.3 Post-Layout Display Effect

After release:

• The default store page will be replaced.
• All qualifying category pages will adopt the new structure.

This is the foundation for achieving differentiated designs on store pages.

VII. Other Page Layout Types Supported by WoodMart

7.1 Customizable Page Range

In addition to product-related pages, Layout Builder also supports:

• Cart web page
• Checkout Page
• Thank You Page
• Single Post Page
• Post Archive Page

This enables the entire site's structure to be managed under a unified system.

7.2 The Significance of Using a Unified Layout System

Consistent use of Layout Builder offers the following advantages:

• Page structure is consistent
• Reduce maintenance costs
• Reduce template conflicts
• Enhance extension stability

For long-running WooCommerce sites, this is a crucial point.

VIII. Common Recommendations in Practice

• Different product types use different layouts.
• Dedicated page structure for best-selling products
• Plugin Exception Priority Check Hook
• Avoid stacking invalid modules in layouts
• Mobile display effects must be checked.

Conclusion

WoodMart The Layout Builder is essentially a set of WooCommerce A page structure management system, not merely a page beautification tool. Used appropriately, it can completely break free from the constraints of default templates, enabling product pages, store pages, and system pages to possess controllable, maintainable, and scalable structures.

For e-commerce sites using WoodMart, the Layout Builder is an essential feature that cannot be bypassed.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off