WooCommerce Module
The dedicated WooCommerce module (FLWooCommerceModule) lets you add WooCommerce functionality anywhere in your layouts.
Module Layouts
The WooCommerce module supports multiple layout options:Single Product
Display a single product with all its details
Product Page
Render the complete product page layout
Multiple Products
Show a grid of products from various sources
Add to Cart Button
Add standalone cart buttons for specific products
Product Categories
Display product category grids
Cart
Embed the shopping cart page
Checkout
Add the checkout page layout
Order Tracking
Include order tracking functionality
My Account
Add the customer account page
Product Page Building
Create completely custom product pages using Beaver Builder on any WooCommerce product.Enabling Builder on Products
Enable Product Post Type
Go to Settings → Page Builder → Post Types and enable the Product post type
Product Page Layouts
Use these strategies for building product pages:- Default + Custom
- Fully Custom
Keep the default WooCommerce product layout and add custom sections above or below:
- Hero sections
- Additional product information
- Related content
- Custom calls-to-action
Short Description Fix
Beaver Builder includes an automatic fix for products with empty short descriptions:class-fl-builder-compatibility.php
This ensures that products with builder layouts but no short description still have content for structured data and SEO.
Multiple Products Display
The WooCommerce module offers several ways to display multiple products.Product Sources
Choose from various product sources:Product IDs
Product IDs
Display specific products by entering comma-separated product IDs:Best for: Handpicked product showcases
Product Category
Product Category
Show all products from a category using the category slug:Best for: Category-specific pages
Product Tags
Product Tags
Recent Products
Recent Products
Show the most recently added productsBest for: “New arrivals” sections
Featured Products
Featured Products
Display products marked as featured in WooCommerceBest for: Highlighting premium products
Sale Products
Sale Products
Show products currently on saleBest for: Sale and promotional pages
Best Selling Products
Best Selling Products
Display top-selling products based on sales dataBest for: Social proof and popular items
Top Rated Products
Top Rated Products
Show products with the highest ratingsBest for: Building trust with reviews
Product Grid Options
Customize how products are displayed:- Number of Products: Control how many products to show (default: 12)
- Columns: Choose from 1-6 columns for the product grid
- Sort By: Order by default, popularity, rating, date, price, or product ID
- Sort Direction: Ascending or descending order
Product Categories Display
Create beautiful category grids to help customers browse your shop.Category Options
Comma-separated list of category IDs to include. Leave blank for all categories.
Automatically select parent categories
Specific parent category ID (when autoparent is disabled)
Number of columns for the category grid (1-4)
Sort categories by: name, id, slug, or menu_order
Sort direction: ascending or descending
Finding Category IDs
To find a product category ID:Shop Customization
Beaver Builder includes several features for customizing your WooCommerce shop.Archive Loop Compatibility
The builder properly integrates with WooCommerce’s archive sorting:class-fl-builder-compatibility.php
This ensures that WooCommerce sorting (by price, rating, etc.) works correctly with the Posts module when displaying products.
WooCommerce Memberships
Beaver Builder respects WooCommerce Memberships restrictions:class-fl-builder-compatibility.php
Builder content is automatically hidden on products restricted by WooCommerce Memberships if the user doesn’t have access.
WooCommerce Widgets
Use WooCommerce widgets in the WordPress Widgets module:- Product Categories
- Products
- Recently Viewed Products
- Top Rated Products
- Product Search
- Product Tag Cloud
- Shopping Cart
Compatibility Fixes
Beaver Builder includes automatic compatibility fixes for popular WooCommerce extensions:WooCommerce Products Filter
Prevents JavaScript conflicts in the builder:WooCommerce Tab Manager
Ensures tab content displays correctly with builder layouts:YITH WooCommerce Affiliates
Automatically dequeues conflicting scripts when the builder is active.Best Practices
Performance
- Limit the number of products per page
- Use pagination for large catalogs
- Optimize product images
- Enable WooCommerce caching
Mobile Design
- Test product grids on mobile devices
- Use responsive column settings
- Ensure buttons are touch-friendly
- Optimize for mobile checkout
SEO
- Keep product titles descriptive
- Use proper heading hierarchy
- Include product schema markup
- Optimize short descriptions
Conversion
- Highlight sale prices
- Add trust badges and reviews
- Create urgency with limited offers
- Use clear calls-to-action
Related Resources
WordPress Integration
Core WordPress features and compatibility
Content Modules
Display posts with advanced queries
Third-Party Plugins
Other plugin integrations
Theme Builder
Create custom WooCommerce templates