Skip to main content
Beaver Builder provides deep integration with WooCommerce, allowing you to build custom product pages, display products in your layouts, and create stunning shop experiences.

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

1

Enable Product Post Type

Go to Settings → Page Builder → Post Types and enable the Product post type
2

Edit a Product

Navigate to Products and open any product for editing
3

Launch Builder

Click the Page Builder tab or Launch Beaver Builder to start designing

Product Page Layouts

Use these strategies for building product pages:
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
public static function fix_woo_short_description( $content ) {
    if ( '' !== $content ) {
        return $content;
    }
    
    // Extract CSS from builder layouts in product content
    if ( isset( $post->post_content ) 
         && false !== strpos( $post->post_content, '[fl_builder_insert_layout' ) ) {
        // Ensure CSS is loaded for structured data
        // Use content as short description
        $content = strip_shortcodes( wp_strip_all_tags( $post->post_content ) );
    }
    return $content;
}
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:
Display specific products by entering comma-separated product IDs:
123, 456, 789
Best for: Handpicked product showcases
Show all products from a category using the category slug:
electronics, clothing, accessories
Best for: Category-specific pages
Display products with specific tags:
featured, new-arrival, bestseller
Best for: Tag-based collections
Show the most recently added productsBest for: “New arrivals” sections
Show products currently on saleBest for: Sale and promotional pages
Display top-selling products based on sales dataBest for: Social proof and popular items
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

product_category_ids
string
Comma-separated list of category IDs to include. Leave blank for all categories.
autoparent
boolean
default:"false"
Automatically select parent categories
parent_cat_id
number
default:"0"
Specific parent category ID (when autoparent is disabled)
cat_columns
number
default:"4"
Number of columns for the category grid (1-4)
category_orderby
string
default:"name"
Sort categories by: name, id, slug, or menu_order
category_order
string
default:"asc"
Sort direction: ascending or descending

Finding Category IDs

To find a product category ID:
1

Navigate to Categories

Go to Products → Categories in your WordPress admin
2

Hover Over Category

Hover your mouse over the category name
3

Check the URL

Look at the URL in your browser’s status bar. The ID is the number value in the URL:
tag_ID=42

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
public static function fix_woo_archive_loop( $q ) {
    if ( ! class_exists( 'WooCommerce' ) ) return;
    
    if ( is_admin() || ! $q->get( 'fl_builder_loop' ) 
         || 'product_query' != $q->get( 'wc_query' ) ) {
        return;
    }
    
    // Add WooCommerce sorting to Posts module query
    $ordering = WC()->query->get_catalog_ordering_args();
    $q->set( 'orderby', $ordering['orderby'] );
    $q->set( 'order', $ordering['order'] );
}
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
public static function wc_memberships_support() {
    if ( function_exists( 'wc_memberships_is_post_content_restricted' ) ) {
        add_filter( 'fl_builder_do_render_content', function ( $do_render, $post_id ) {
            if ( wc_memberships_is_post_content_restricted() ) {
                // Check if user has access to restricted content
                if ( ! current_user_can( 'wc_memberships_view_restricted_post_content', $post_id ) ) {
                    $do_render = false;
                }
            }
            return $do_render;
        }, 10, 2 );
    }
}
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:
if ( FLBuilderModel::is_builder_active() ) {
    wp_deregister_script( 'wcpf-plugin-polyfills-script' );
}

WooCommerce Tab Manager

Ensures tab content displays correctly with builder layouts:
public static function fix_woo_tab_manager_missing_content( $content, $tab, $product ) {
    if ( FLBuilderModel::is_builder_enabled( $product->get_id() ) ) {
        $wtm_tab_post = get_post( $tab['id'] );
        return $wtm_tab_post ? $wtm_tab_post->post_content : $content;
    }
    return $content;
}

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

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

Build docs developers (and LLMs) love