Avada WooCommerce Guide: Building Shop, Cart and Checkout Pages With Avada Builder

Thirty-eight Woo elements and two ways to use them

Avada's documentation counts 38 elements for WooCommerce, from Woo Add To Cart and Woo Additional Information to Woo Mini Cart, Woo Featured Products Slider and a set of filter elements: by attribute, brand, category, price and rating, plus Woo Active Filters. They split into two groups that behave differently. Woo Layout Elements pull product data into a template and only appear when you edit a Content Layout Section in the Layout Builder. Woo Design Elements, such as the cart and checkout pieces, work on any page.

That distinction explains most first-week confusion. Product and archive pages are templates assigned by rule. The Shop, Cart and Checkout pages are ordinary pages you edit directly. The Thank You page is a conditional layout again. Get the mental model right and the builder is quick to work in; get it wrong and you spend an afternoon looking for an element that only exists in the other mode.

Rebuilding the cart and checkout from elements

Avada's docs are clear that the cart and checkout need no special layout. You open the page WooCommerce assigned as Cart or Checkout, remove WooCommerce's shortcode, and build the page from elements in any order you like. The default shortcode keeps working if you leave it, which is worth remembering: a stock WooCommerce checkout is the version every payment plugin is tested against.

1. 1

   Copy the store to staging

   Checkout changes are never tested on the live store. Use a copy with the same payment plugins in test mode.

2. 2

   Build the cart

   On the Cart page, remove the cart shortcode and add Woo Cart Table, Woo Cart Totals, Woo Cart Coupons and Woo Cart Shipping, with Woo Notices at the top for errors and confirmations.

3. 3

   Handle the empty cart

   Woo Cart Table shows the empty-cart notice, and the docs suggest Conditional Element Rendering to show different containers when the cart is empty or full.

4. 4

   Build the checkout

   Use Woo Checkout Billing, Shipping, Order Review and Payment separately, or Woo Checkout Tabs, which combines all four in WooCommerce's standard structure. Put Woo Notices first.

5. 5

   Test every gateway

   Place test orders with each payment method, a coupon, each shipping zone and a guest checkout. Gateways that print extra fields need somewhere on your layout to print them.

If orders stop arriving after a redesign, WooCommerce checkout not working covers the causes in order, and missing confirmations are usually order emails not sending rather than the layout. A cart or shop page that collapses after an update is explained in WooCommerce layout broken.

Product and category templates by condition

Product pages and archives are built in Avada, then Layouts, then the Layout Builder. A layout carries conditions saying where it applies, and its Content Layout Section is where Woo Layout Elements live. One layout can serve every product, while another overrides it for a single category, which suits stores whose furniture and accessories need different page structures. Headers and footers are separate sections of the same layout, so a product template can carry its own header.

• Name layouts by scope, so the next person can see which one wins for a given product without opening each.
• Filters belong on archives. The Woo Filter By Price, Category, Attribute, Brand and Rating elements, with Woo Active Filters, cover what many stores buy a filter plugin for. Run one filter system, not two.
• Put the Woo Mini Cart in an Off-Canvas slide, as the docs suggest, triggered After Product Is Added to Cart, so shoppers see the cart without leaving the product.
• Gutenberg and Avada Builder do not cross over. Avada's docs say a page made in one cannot be edited in the other, so product descriptions written in blocks stay blocks.

When a header vanishes from product pages only, overlapping layout conditions are the first suspect; Avada header not showing covers the checks. If the builder itself will not open, see Avada Builder not loading.

Six bundled plugins, and none of them runs a store

As of October 2026 a $69 Regular License buys one site with future updates and six months of ThemeFusion support. Registration then opens the bundled plugins: Slider Revolution, LayerSlider, ACF Pro, Convert Plus, FileBird Pro and Avada Custom Branding, on top of the required Avada Core and Avada Builder. That is real value for a marketing site. For a store, notice what is missing: no payment, shipping, tax, subscription or SEO plugin. The WooCommerce Builder and its elements are the store features, and they are included rather than sold as a Pro add-on.

Activate only the bundled plugins a store uses. Two slider plugins on a shop homepage is two sets of scripts on the page that decides first impressions. The license terms and the cost of a full build are on the Avada pricing page.

Three version numbers, plus WooCommerce's

Avada's required-plugins documentation pairs each theme release with exact plugin versions: Avada 7.16.2 expects Avada Core 5.16.2 and Avada Builder 3.16.2. A store adds a fourth number. As of October 6, 2026 the ThemeForest listing's compatibility field names WooCommerce 7.x through 9.x, while WooCommerce itself is at 11.1.2. A listing field can trail the code, but it is a reason to update WooCommerce on staging and walk the purchase path before it touches the live store.

The update notes add a routine after major releases: regenerate Critical CSS and clear Avada's cache, the caching plugin's, the browser's and the server's, because the vendor says visual issues are usually caused by caches. Registration matters too. Envato tokens stay valid only ten days after an update, then a purchase code is needed, and a store whose registration lapsed can sit on an old version without anyone noticing.

Styles that refuse to change after an update are almost always a compiler or cache issue, covered in Avada CSS not updating. The full set of fixes lives in the Avada repair hub, and our Avada developers keep theme, Core, Builder and WooCommerce in step for stores that would rather not.

Checkout speed when the Performance Wizard has done its part

Avada's speed tools are extensive: Critical CSS, a CSS compiler, a JS compiler that combines scripts by default, deferred jQuery, font-display options and lazy loading. They help most on cached pages. WooCommerce's own documentation says to exclude the Cart, Checkout and My Account pages from page caching, so on those pages every view runs WordPress, Avada's builder output, WooCommerce and every plugin. A beautifully rebuilt checkout made of many elements is still built fresh for every shopper.

• Generate Critical CSS for product and checkout templates, not just the homepage, and regenerate it after layout changes.
• Do not double-combine scripts. If Avada's JS compiler is on, keep a caching plugin's combine option off, or payment scripts can load in the wrong order.
• Test jQuery deferral at checkout specifically. The docs warn it can break scripts, and gateway plugins often depend on jQuery.
• Check the mini cart's refresh. A live cart count has to update per shopper, commonly through WooCommerce's cart fragments; see in your browser's developer tools whether a get_refreshed_fragments request fires on content pages.

The settings walkthrough is in the Avada speed guide, and a store that has already slowed down starts with Avada slow website. When the problem is a plugin collision rather than weight, our theme troubleshooting service finds which vendor's release caused it.

Where an Avada store reaches its limit

Avada suits a simple to mid-sized store whose owner wants every page to look designed, from product to thank you. It fits less well when the store's logic, not its look, is the hard part: member pricing, quotes, subscriptions beside one-off products, or stock synced from another system. Each of those arrives as another plugin, and each has to print into a checkout that Avada has rebuilt from elements.

Avada lets you design every step of the checkout. It cannot make the checkout lighter than the stack beneath it.

Before buying the next extension, read Avada vs Next.js and WooCommerce vs Next.js for ecommerce. The move itself is mapped in WooCommerce to Next.js, and the builder pages, sliders and forms in Avada to Next.js. Sites we build run on Athena CMS, with e-commerce built in, Stripe subscription billing for members and every version kept. Faults outside the theme go to WooCommerce website repair. For the theme as a whole, see the Avada review; for its closest rival, Avada vs Divi and Divi with WooCommerce. Every other review is under WordPress themes.