Flatsome WooCommerce Setup: Catalog Mode, Custom Product Pages and the Store Settings That Matter

What Flatsome takes off WooCommerce's plate

WooCommerce runs the store: products, stock, the cart session, orders, payments and emails. Flatsome Classic decides how all of that looks and adds a layer of shopping conveniences on top. The vendor's feature page lists category grids in grid, list or masonry styles, products per row set separately for each screen size, category layouts with no sidebar, a left or right sidebar or an Off-canvas Filter panel, live search, a Quick Add To Cart button over grid images, sale bubbles in three styles, and Product Quick View, which opens a product from the category grid without leaving it.

Product pages get gallery options, tabs that can display as sections, accordions or vertical tabs, lightbox product videos, next and previous product navigation and hover zoom. None of this costs extra. As of October 2026 the $59 Regular License on ThemeForest covers the whole store layer for one site, with six months of vendor support. The Flatsome pricing page covers the license terms, and the Flatsome review covers the theme beyond the shop.

Catalog Mode, quick view and the header cart

Catalog Mode is the setting Flatsome owners ask about most, because it suits businesses that show products but quote by phone. Switched on in Theme Options, it marks every product as not purchasable, removes add-to-cart buttons, including the quick-add buttons in grids, and takes the cart out of the shopping flow. The vendor's feature page adds two options: show or hide prices, and replace the add-to-cart button with a form or any shortcode. Text you set for the product page and for the quick view lightbox appears where the button used to be.

• Catalog Mode with hidden prices suits wholesale and trade catalogs. Check that your SEO plugin's product markup does not still publish a price the page hides.
• Catalog Mode with a form turns each product into an inquiry. Test that the form plugin's emails arrive before you trust it with leads.
• Product Quick View is pleasant on desktop. On phones, compare it against simply opening the product page, which loads the full gallery once instead of twice.
• The header cart sits in the header builder and can open as a dropdown or a slide-out drawer. Either way, its live count depends on WooCommerce's cart fragment mechanism, which matters for speed below.

Header problems on stores often trace to that cart element or to a caching plugin serving a stale header to a shopper with items in the basket. Our Flatsome header not showing guide covers the first case; the speed section below covers the second.

Building a custom product page with UX Blocks

This is the feature that separates Flatsome from themes that only restyle WooCommerce's default template. A product page layout is a UX Block, built in UX Builder and assigned by rule. The vendor's documentation names the steps, and they are worth following exactly, because a layout attached at the wrong level is the most common reason a store owner says one product looks different from the rest.

1. 1

   Create an empty block

   Go to Blocks, then Add new. The docs suggest names that say where the block is used, such as CPL - Global, CPL Category - Clothing or CPL Single - Design 1.

2. 2

   Choose the scope

   For every product, open Theme Options, then Shop, then Product Page, set the product layout to Custom and pick the block. For one category, choose it on the category edit screen. For one product, choose it on that product's edit screen.

3. 3

   Open it on a real product

   Visit a product on the front end and use the Edit product layout with UX Builder link in the admin bar, so you design against live data.

4. 4

   Keep third-party output

   Add the Product Hooks element. Plugins that print into WooCommerce hooks, such as size charts, delivery estimates or subscription options, need it to appear on a custom layout.

That last step is where custom layouts quietly break stores. A payment message, a bundle selector or a variation add-on that worked on the default template vanishes on the custom one because nothing calls the hook it uses. If variation dropdowns go missing after a redesign, start with WooCommerce variations not showing and then check the layout for the Product Hooks element.

Template overrides and the outdated-copies warning

Flatsome draws the shop its own way by shipping its own copies of WooCommerce template files. When WooCommerce changes one of its core templates, WooCommerce, then Status, reports that the theme contains outdated copies. The vendor's help article gives a short routine: read the Flatsome changelog to see whether your theme version supports your WooCommerce version; if it does not, a Flatsome update is on the way; if it does and the warning remains, the outdated file is almost certainly a custom override in your child theme, and those have to be corrected by hand.

The calendar is the real issue. As of October 6, 2026 the ThemeForest listing states WooCommerce compatibility from 5.x to 10.x, current Classic is 3.20.11, and WooCommerce itself is at 11.1.2. A listing field can lag the code, so read the changelog rather than the badge. The practical rule for a Flatsome store: update WooCommerce on a staging copy first, check the Status screen, place a test order, and only then update the live shop.

A checkout that misbehaves right after an update is covered in our Flatsome checkout issues guide. If the shop grid or product page has lost its layout instead, WooCommerce layout broken explains the mechanism across themes.

The plugin list a real Flatsome shop still carries

A store theme saves you plugins for presentation. It does not save you plugins for running a business. Here is the shopping list we would expect on a working Flatsome Classic store, and why each one stays.

• A payment gateway plugin for each provider you accept. Flatsome styles the checkout; it does not take money.
• Shipping and tax extensions or services once rates stop being flat. WooCommerce settings carry a small shop; beyond that, plan for one.
• An SEO plugin. The docs cover Yoast, Rank Math and SEOPress. It owns product titles, category descriptions and structured data.
• Translation, if you sell in two languages. WPML and Polylang each have their own Flatsome integration articles.
• Order email delivery. A transactional mail service plugin, because hosting mail is how order emails stop sending.
• Backups and security that understand a database with live orders, not just pages.
• Subscriptions, bookings or bundles only if you sell them. These are WooCommerce extensions with their own renewal dates.

Keep the list honest by asking each plugin what it does that Flatsome or WooCommerce does not. A second quick view plugin or a separate filter plugin layered over Flatsome's off-canvas filters is a conflict waiting for a release day.

Why a Flatsome checkout is slower than its category pages

Page caching makes a Flatsome category page fast for a visitor who has not logged in: the server sends a saved copy. WooCommerce's developer documentation says to exclude the Cart, Checkout and My Account pages from that cache, because they hold one customer's data. So the pages where money changes hands always run WordPress, Flatsome, WooCommerce and every active plugin from scratch. That is the honest reason a store feels quick until the moment it matters.

The second cost is the cart fragment refresh, the background request that keeps a header cart count current. Since WooCommerce 7.8, core loads that script only where the cart widget appears, but a theme with a header cart on every page brings the mechanism back site-wide. Open a blog post in your browser's developer tools and look for a wc-ajax request for get_refreshed_fragments; if it fires on pages where nobody shops, decide whether the live count is worth it.

Flatsome's own lever is Smart Lazy Loading for images and backgrounds, which the vendor says sits under Advanced settings. Its documented first step when something looks wrong is to reset or disable every cache and minify plugin, which tells you how often optimizers and themes collide. Settings and order of work are in the Flatsome speed guide; if a store has already bogged down, Flatsome slow website is the repair checklist.

Site Builder beta: block-based shop templates, sold yearly

On September 30, 2026 UX-Themes opened the beta of Flatsome Site Builder, and the store is central to it. The announcement lists block-based shop, product, cart and checkout templates, product galleries, add to cart, tabs, related products, deals and a wishlist, with the mini cart rebuilt as a header block. Plans add Flatsome Dynamic Pricing, which the vendor describes as quantity discounts, buy-one-get-one deals, role-based prices and limited-time offers, the kind of feature many stores now buy as a separate plugin.

The trade is pricing and maturity. As of October 2026, one site costs $44.50 for the first year at the early-access discount, which ends October 14, 2026, and renews at $45 a year. The announcement says a migration plugin for Classic sites will be offered, while the pricing page lists a Classic migrator as included, so treat migration as unproven. Your products, customers and orders sit in WooCommerce either way; your UX Builder layouts are what would need converting or rebuilding.

Classic is a one-time purchase that keeps a store running. Site Builder is a yearly bet on where Flatsome is going.

For a store that must take orders next week, stay on Classic. For a redesign planned next year, try Site Builder on a staging copy of the shop and decide at version 1.0. Flatsome also has registration rules that catch stores out when they move to a new domain.

Signs the shop has outgrown Flatsome

Flatsome is a good home for a small to mid-sized catalog with ordinary products. The ceiling shows up in specific ways: wholesale price lists that a Catalog Mode toggle cannot express, quotes and configurators, subscriptions sold beside products, ERP or inventory sync that several plugins handle badly, and paid traffic landing on uncached checkout pages over phone networks. None of those is a theme setting. They are limits of a stack assembled from plugins.

When that is where you are, compare the roads before buying another extension. Flatsome vs Next.js weighs the theme against a custom build, WooCommerce vs Next.js for ecommerce covers the engine, and moving WooCommerce to Next.js lays out products, orders and redirects. The Flatsome-specific route, UX Builder pages included, is in Flatsome to Next.js. Sites we build run on Athena CMS, which has e-commerce built in and keeps every version of a price change.

Staying put is often the right answer. Our Flatsome developers maintain Classic stores and their child theme overrides, the Flatsome repair hub collects every fix, WooCommerce website repair handles faults that sit outside the theme, and our theme repair service takes the urgent ones. For the rival store theme, see WoodMart with WooCommerce or the head-to-head WoodMart vs Flatsome; the rest are in WordPress theme reviews.