You bought Avada because you wanted a beautiful website. Then you installed WooCommerce and... suddenly everything looks like a 2015 template??
Don't worry - you're not alone!
Avada actually has one of the most powerful WooCommerce integrations available. The problem is that most people never discover it. They stick with default settings and wonder why their store looks so generic.
This guide changes that. We're going deep into product layouts, shop customization, and checkout optimization. By the end, you'll have a store that looks custom-built - because it essentially will be.
Let's transform that default WooCommerce mess into something your competitors will envy...
The Avada WooCommerce Builder: Your Secret Weapon
Here's what most Avada users miss entirely - since version 7.0, Avada includes a complete WooCommerce Builder. This isn't just a few extra options. It's a full visual system for designing every part of your store:
- Custom single product layouts
- Shop and archive page designs
- Cart page customization
- Checkout page building
- Thank you page styling
All using the same Avada Builder you already know. No extra plugins needed!!
Where to find it: Avada → Layouts → Layout Section Builder
The magic happens through something called "Woo Design Elements" - specialized blocks that pull dynamic product data into your custom layouts.
Step 1: Setting Up WooCommerce Basics in Avada
Before diving into custom layouts, let's nail the foundation. Head to Avada → Options → WooCommerce.
Critical settings to configure:
Products Per Page: Default is often too few. For most stores, 12-24 products works well. Too many slows your page; too few makes browsing tedious.
Number of Product Columns: Match this to your site width. Full-width layouts can handle 4-5 columns. Sidebar layouts work better with 3.
Product Box Design: Choose between "Classic" (traditional look) and "Clean" (modern, minimal). Clean usually converts better in 2025...
Product Images Layout: You have two choices here - "Avada" gives you more control, "WooCommerce" uses plugin defaults. Choose Avada.
Enable Quick View: Lets customers preview products without leaving the shop page. Reduces clicks to purchase!!
Enable Variation Swatches: Replaces boring dropdowns with visual color/image/button selectors. Massive UX improvement.
Step 2: Creating Custom Product Layouts
This is where the real customization begins. Instead of using WooCommerce's default product page, you build your own.
Creating Your First Product Layout
1. Create a Layout Section:
Go to Avada → Layouts → Layout Section Builder. Click "Add New" and select "Content" as the type. Name it something like "Custom Product Template."
2. Set the Preview Product:
Critical step that many skip!! In Layout Section Options → Layout Section, set "View Dynamic Content" to "Product" and select an actual product. This lets you see real data while building.
3. Add Woo Elements:
When you add elements, scroll down to find the "Woo Layout Elements." These are your building blocks:
- Woo Product Images - Gallery with zoom, thumbnails, video support
- Woo Product Title - Dynamic product name with typography control
- Woo Product Price - Regular and sale price display
- Woo Product Rating - Star ratings from reviews
- Woo Short Description - Product excerpt
- Woo Add To Cart - Button with quantity selector and variations
- Woo Product Tabs - Description, reviews, additional info
- Woo Related Products - Automatic product suggestions
- Woo Upsells - Products you configure for upselling
4. Build Your Layout:
Start with a two-column container. Left column: Product Images. Right column: Title, Price, Short Description, Add To Cart, maybe some trust badges.
Below that: Full-width Product Tabs, then Related Products.
5. Assign to Products:
Create a new Layout in Avada → Layouts. Add your Layout Section to the Content area. Set conditions to apply to "All Products" or specific categories.
Pro Layout Tips
Add trust elements near the Add To Cart button. A simple text element with "✓ Free shipping over €50" or "✓ 30-day returns" can boost conversions significantly.
Use sticky Add To Cart for long product pages. Avada's Sticky Container option keeps the purchase button visible as users scroll through descriptions and reviews.
Different layouts for different categories. Clothing might need large image galleries and size charts. Digital products might emphasize instant delivery and license terms. Create separate Layout Sections for each.
Step 3: Product Variations Done Right
Default WooCommerce shows variations as dropdown menus. Boring, hard to use, and they hide your product options.
Avada includes built-in variation swatches that transform this completely...
Setting Up Avada Swatches
1. Create Global Attributes:
Go to Products → Attributes. Click "Add New."
For the Type field, choose:
- Avada Color - For color variations (shows color picker)
- Avada Image - For pattern/style variations (shows images)
- Avada Button - For sizes or text-based options
2. Configure Attribute Terms:
After creating the attribute, click "Configure Terms." Add each option (Blue, Red, Small, Large, etc.)
For Color attributes, you'll see a color picker to set the exact shade.
For Image attributes, upload a small square image.
3. Add to Products:
In your product editor, go to Product Data → Attributes. Add your global attributes and check "Used for variations."
Then go to Variations tab → "Create variations from all attributes" and set prices/images for each combination.
Styling Swatches in Custom Layouts
When using the Woo Add To Cart element in your custom layout, you get Swatch Style options:
- Swatch size (small, medium, large, custom)
- Border radius (square, rounded, circle)
- Active/hover colors
- Tooltip display options
This level of control is why custom layouts beat default templates every time!!
Step 4: Designing Your Shop Page
The shop page is your storefront. Default WooCommerce shop pages are... functional. Let's make yours exceptional.
Method 1: Enhanced Default Shop
For quick improvements without full custom builds:
Avada → Options → WooCommerce → Shop Page:
- Enable Grid/List View toggle (let customers choose)
- Set default view based on your products
- Configure sidebar position (or disable it)
- Enable product image hover effects
Add Filters:
Use Avada's Woo Filters Element or a plugin like YITH WooCommerce Ajax Product Filter. Filtering dramatically improves UX for stores with many products.
Method 2: Fully Custom Shop Page
Want complete control? Build it yourself:
1. Edit the Shop Page:
Go to Pages, find "Shop" (created by WooCommerce), edit with Avada Builder.
2. Remove Default Content:
Delete the default WooCommerce shortcode.
3. Build Custom Layout:
Add these Woo Elements:
- Woo Products - The main product grid with tons of options
- Woo Sorting - Price/popularity/rating dropdowns
- Woo Product Grid - Alternative display element
- Woo Filters - Sidebar or inline filtering
4. Add Marketing Elements:
Hero section at top with current promotion. Category showcase with images. Trust badges. Newsletter signup.
Shop Page That Converts
Above the fold matters. Your best-selling or promoted products should be visible without scrolling. Use a featured products row before the main grid.
Category navigation should be obvious. If you have multiple product types, show category cards or a mega menu. Don't make customers hunt.
Mobile layout needs separate attention. Check how your shop looks on phones. Consider fewer columns (2 instead of 4) and larger touch targets.
Step 5: Cart Page Optimization
The cart page is where doubt creeps in. Every friction point here costs you sales.
Building a Custom Cart Page
1. Edit the Cart Page:
Go to Pages → Cart. Edit with Avada Builder.
2. Replace the Shortcode:
Remove [woocommerce_cart] and build with Woo Elements:
- Woo Cart Table - The products list with quantities
- Woo Cart Totals - Subtotal, shipping, total
- Woo Cart Coupons - Discount code field
- Woo Cart Shipping - Shipping calculator
- Woo Notices - Success/error messages
3. Strategic Layout:
Two-column layout works well: Cart Table on left (wider), Totals + Checkout Button on right (narrower, sticky).
Cart Page Best Practices
Show product images. Customers should see what they're buying. The visual confirmation reduces "did I add the right one?" anxiety.
Make quantity changes easy. Plus/minus buttons beat typing numbers. Enable AJAX updates so the page doesn't reload.
Display shipping early. Surprise shipping costs at checkout = abandoned carts. Show estimates on the cart page.
Add cross-sells strategically. "Customers also bought" can increase average order value. But don't overwhelm - 2-4 products maximum.
Create an "Empty Cart" experience. Don't just show "Your cart is empty." Add a call-to-action leading back to the shop or featured products.
Step 6: Checkout Optimization
Here's a sobering statistic: 70% of shopping carts get abandoned. And a huge chunk of that happens at checkout.
The default WooCommerce checkout is... okay. With Avada, you can make it great.
Custom Checkout Page Build
1. Edit the Checkout Page:
Pages → Checkout → Edit with Avada Builder.
2. Replace Default Shortcode:
Remove [woocommerce_checkout] and use these elements:
- Woo Checkout Billing - Customer information
- Woo Checkout Shipping - Delivery address
- Woo Checkout Payment - Payment method selection
- Woo Checkout Order Review - Order summary
- Woo Checkout Tabs - Combined element (optional)
3. Choose Your Layout:
Option A: One-Page Checkout
All fields visible on single scrolling page. Faster for simple purchases. Use two columns: billing/shipping on left, order review on right.
Option B: Multi-Step Checkout
Break into steps: Details → Shipping → Payment. Feels less overwhelming for complex orders. Use Woo Checkout Tabs element.
Checkout Optimization Checklist
Enable Guest Checkout. Forcing account creation kills conversions. Go to WooCommerce → Settings → Accounts & Privacy → Enable guest checkout.
Minimize form fields. Every field you remove increases completion rates. Do you really need "Company Name" for B2C sales? Combine first/last name if possible.
Auto-fill billing to shipping. One checkbox: "Ship to billing address" saves customers from entering everything twice.
Show order summary throughout. Customers should always see what they're paying for. Makes them confident to proceed.
Add trust signals. Security badges, payment icons, money-back guarantee near the payment button. Reduce last-second doubt.
Mobile optimization is critical. Over 60% of ecommerce traffic is mobile. Test your checkout on phones obsessively!!
Payment Gateway Integration
Avada works with all WooCommerce payment gateways. But some tips:
Keep customers on-site. Gateways that redirect (PayPal standard) have higher abandonment than integrated options (Stripe, PayPal Commerce).
Offer multiple options. Credit card + PayPal + Apple Pay/Google Pay covers most customers. Consider BNPL (Buy Now Pay Later) options like Klarna for higher-priced items.
Express checkout buttons. Apple Pay and Google Pay complete purchases with one tap. Add these above the form if supported.
Step 7: Performance Considerations
A beautiful store means nothing if it's slow. And WooCommerce can get heavy...
WooCommerce + Avada Speed Tips
Disable unused features:
Avada → Options → Advanced → Theme Features. Turn off anything you don't use.
Optimize product images:
Large images are the #1 speed killer. Use WebP format, proper sizing, and lazy loading.
Limit products per page:
Infinite scroll or pagination? Pagination with 12-20 products loads faster than endless scrolling.
Enable AJAX Add to Cart:
Avada → Options → WooCommerce → Enable Single Product AJAX Add to Cart. Prevents full page reloads.
Cache carefully:
Caching plugins help but can conflict with cart functionality. Exclude cart, checkout, and my-account pages from caching. If using WP Rocket, it handles WooCommerce automatically.
For deeper performance optimization, check out my article on Why Your Avada Site is Slow (And How to Fix It).
Common WooCommerce + Avada Issues
Product images not showing correctly?
Check Avada → Options → WooCommerce → Product Images Width. Also regenerate thumbnails after changing sizes.
Variation swatches not appearing?
Ensure Avada → Options → WooCommerce → Enable Product Variation Swatches is ON. Check that attributes are set to Avada types, not default Select.
Cart not updating?
Enable Avada → Options → WooCommerce → Load Cart Fragments Script. This enables AJAX updates but can impact performance on large stores.
Layout not applying to products?
Check Layout conditions in Avada → Layouts. Ensure it's set to apply to Products and no other layout is overriding it.
Checkout page broken after update?
Sometimes WooCommerce updates reset the checkout page. Re-edit and remove/re-add the shortcode or elements. If problems persist, see my Avada Update Broke My Site guide.
When to Consider Alternatives
Look, I'll be honest with you...
Avada's WooCommerce integration is powerful. But it's also complex. You're essentially building a custom store from scratch using a page builder that wasn't originally designed for ecommerce.
If you find yourself:
- Spending more time on layouts than products
- Fighting with settings that won't cooperate
- Needing features that require additional plugins
- Managing multiple sites with different licenses
...it might be worth knowing your options.
Divi takes a different approach with its WooCommerce Builder. Similar concept - visual building for product pages and shop layouts - but with a licensing model that might make more sense.
Here's the difference: Avada costs $69 per site plus $80/year for extended support per site. Running 3 stores? That's $207 upfront plus $240/year.
Divi is ~$89/year for unlimited sites. Or $249 once, lifetime, unlimited.
If you're building one store and staying with it forever, Avada's fine. If you're an agency, freelancer, or running multiple projects - do the math. The WooCommerce capabilities are comparable; the economics aren't.
Your WooCommerce Action Plan
Feeling overwhelmed? Here's how to tackle this systematically:
Week 1: Foundation
- Configure basic WooCommerce settings in Avada Options
- Set up product images, columns, and basic layout
- Enable variation swatches for existing attributes
Week 2: Product Pages
- Create one custom product Layout Section
- Test with different product types
- Refine based on how it looks with real products
Week 3: Shop & Cart
- Customize shop page layout
- Optimize cart page with cross-sells
- Test the shopping flow end-to-end
Week 4: Checkout & Polish
- Build or optimize checkout page
- Enable guest checkout, minimize fields
- Add trust signals and test on mobile
Wrapping Up
WooCommerce + Avada can create stunning, high-converting online stores. The tools are there - Woo Elements, Layout Builder, variation swatches, custom page designs...
The key is understanding what's possible and building systematically.
Start with the basics. Get products looking good. Then customize the shop experience. Finally, optimize the checkout flow. Each improvement compounds.
Your customers won't know you used Avada. They'll just know your store looks professional and buying feels easy.
And that's exactly the point!!
Questions about specific WooCommerce + Avada setups? Drop them in the comments - I've built more of these stores than I can count...
This article contains affiliate links!
Top comments (0)