Product Price
The price as WooCommerce renders it, including variable product price ranges and sale prices.
Atomic Element · Pro
Elementor 4 WooCommerce Widgets: build your product cards and product pages from atomic parts
Six product widgets (Price, Rating, Badge, Stock, Add to Cart and Variation Swatches) that drop into the free Loop Grid's card or a single product template. WooCommerce still renders the prices, stock and cart, so nothing about how your store sells has to change.
- 6 native Elementor 4 product elements
- Swatches instead of dropdowns
- WooCommerce renders price, stock and cart
- No Elementor Pro needed
The short answer
What are the Animation Addons WooCommerce widgets?
The Elementor 4 WooCommerce widgets from Animation Addons for Elementor are six Atomic Elements for product cards and single product templates: Product Price, Product Rating, Product Badge, Product Stock, Add to Cart and Variation Swatches. They use WooCommerce's native rendering, with no separate cart logic, and are styled with Elementor 4 Classes and Variables.
Many "Elementor V4 compatible" addons are classic v3 widgets that still run on V4. These product widgets are native Atomic Elements, built on Elementor's Atomic Editor architecture.
Key factsAnimation Addons 4.3
| Plan | Pro Animation Addons Pro; the Loop Grid that repeats your card is free |
|---|---|
| Element type | Native Elementor 4 Atomic Elements, in the panel group "AAE WooCommerce" |
| Widgets | Product Price, Product Rating, Product Badge, Product Stock, Add to Cart, Variation Swatches |
| Where they go | Inside the Loop Grid's Loop Item (product cards) and in single product templates |
| Rendering | WooCommerce's native rendering; no custom cart logic or endpoints |
| Shop query | Loop Grid Source Products follows WooCommerce's catalog visibility and "Hide out of stock items" setting |
| Requires | WooCommerce + Animation Addons for Elementor (free) + Animation Addons Pro |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Plugin version | Animation Addons 4.3 · Last updated October 2026 |
Included
The six product widgets
Each one is its own native Elementor 4 Atomic Element, styled from its own Style panel.
Product Rating
The product's star rating from its WooCommerce reviews.
Product Badge
Sale, stock, featured and new-product badges, usually placed over the card image.
Product Stock
The product's real stock information from WooCommerce.
Add to Cart
An add-to-cart button rendered by WooCommerce, so cart behaviour stays WooCommerce's.
Variation Swatches
Variable product attributes as clickable swatches, using the colours or images assigned to your attribute terms.
Demo variations
Five ways to use the WooCommerce Product Widgets.
Every demo is built with the WooCommerce Product Widgets, part of Animation Addons Pro, plus native Elementor 4 elements. Extensions they add are named on each card.
01Clothing and accessories stores
Fashion grid with colour swatches
A four-column grid. Each card: image, "Sale" badge top-left, product name, price range, colour swatches and Add to Cart.
- Built with
- Loop Grid (Source Products); Loop Item with Post Image, Post Title, Product Badge, Product Price, Variation Swatches, Add to Cart.
- Motion
- Card images zoom on hover with Image Hover (Pro extension).
02Any store replacing its classic product template
Single product page
Large image on the left; on the right, title, rating, price, stock line, swatches and Add to Cart; previous and next product links at the bottom.
- Built with
- Single product template with Post Title, Post Image, Post Content, Product Rating, Product Price, Product Stock, Variation Swatches, Add to Cart, and Post Pagination (free, works on single Product pages).
- Motion
- The product image reveals with Image Animation (Pro extension).
03Furniture, homeware and design brands
Furniture catalogue with material swatches
A two-column editorial grid with big images, product name, price and fabric swatches showing real material photos. No badges, lots of white space.
- Built with
- Loop Grid (Source Products); Variation Swatches using WooCommerce term images; Product Price; whole card linked to the product with the Loop Item's Wrapper Link.
- Motion
- The cursor shows "View" over images with Cursor Hover (Pro extension).
04Food shops selling a short weekly menu
Bakery pre-order cards
A three-column grid of square cards on a warm background; each shows the bake, its price, a stock line so customers see what's nearly gone, and Add to Cart.
- Built with
- Loop Grid (Source Products, filtered to the "This week" category in its Query); Loop Item with Product Price, Product Stock, Add to Cart.
- Motion
- Cards fade up with Regular Animation (Pro extension).
05Home pages that highlight a handful of products
Featured picks strip on the home page
One row of four featured products with a "Featured" badge and a rating under each, inside a dark band.
- Built with
- Loop Grid (Source Products, four per page) narrowed to a "Staff picks" product category in its Query; Product Badge (featured), Product Rating, Product Price.
- Motion
- The row drifts slightly with Parallax (Pro extension).
Features
What you get with the WooCommerce Product Widgets.
Every option below is a real control in the WooCommerce Product Widgets panel or part of how the element renders. Nothing here needs custom code.
WooCommerce stays in charge
The widgets render through WooCommerce's own system. Prices, stock, cart and the extensions that hook into them behave the way WooCommerce defines, and there is no second cart to keep in sync.
One card design, every product
Build the card once in the free Loop Grid's Loop Item and it repeats for every product in the query. Move the price above the title or drop the rating on mobile by moving or hiding an element, not by switching a fixed product-card widget.
Swatches that use what you already set up
Variation Swatches show each attribute term as its colour or image instead of a dropdown, so shoppers choose by sight.
A shop query that respects store settings
Loop Grid applies WooCommerce's own catalog rules to product queries: hidden products stay hidden and "Hide out of stock items" is honoured, which WooCommerce does not do on its own for secondary queries.
Styled with Classes and Variables
Give every price one Class and every badge another. Change them once, and the shop grid, home page strip and product page update together.
Need visitors to filter by price, rating or attribute? That's Loop Filters, which sit beside the same grid.
Built on the atomic base
How a product card is built (atomic structure)
Why it mattersEach part of the card is its own atomic element with its own Style panel, so the card follows your design system instead of a widget's fixed layout.
- Loop Gridfree: Source Products, Query, pagination
- Loop Layout
- Loop Itemyour product card; Wrapper Link for a whole-card link
- Post Image
- Product Badge
- Post Title
- Product Rating
- Product Price
- Variation Swatches
- Product Stock
- Add to Cart
- Pagination
Step by step
How to build a WooCommerce product grid in Elementor 4
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Get Animation Addons ProInstall WooCommerce, Animation Addons for Elementor and Animation Addons Pro, then open your shop page or template with the Atomic Editor on.
Drag Loop Grid onto the canvas and set Source to Products. Set Posts Per Page and, if needed, narrow it to categories in the Query.
Open the Loop Item and add Post Image, Post Title, then Product Badge, Product Rating, Product Price, Variation Swatches, Product Stock and Add to Cart from "AAE WooCommerce".
Style each widget in the Style tab and save the styles as Classes.
Build the single product template with the same widgets and add Post Pagination for previous and next products.
Preview, publish, and place a test order to check cart and checkout.
Honest comparison
Elementor Pro WooCommerce widgets vs Animation Addons atomic product widgets
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Pro WooCommerce widgets | Animation Addons atomic product widgets |
|---|---|---|
| Requires Elementor Pro | Yes | No (needs Animation Addons Pro) |
| Native Elementor 4 atomic elements | No, classic widgets | Yes |
| Loop that repeats product cards | Loop Grid (classic) or Atomic Loop, both Elementor Pro | Loop Grid, free |
| Price, rating, stock, add to cart | Yes | Yes |
| Styled with Classes and Variables | No | Yes |
Compared with Elementor 4.3.3 (September 2026).
Which one to pick
Elementor Pro's WooCommerce builder covers more of the store, including product images, tabs, related products, cart and checkout pages. Choose the Animation Addons widgets when you want atomic product cards and product pages on Elementor Free, with the cart and checkout left to WooCommerce.
Who it's for
Who uses the WooCommerce Product Widgets?
The people who get the most out of it, and what they use it for.
Store owners
Rebuilding their shop on Elementor 4 with one design system.
Agencies
Delivering WooCommerce sites without Elementor Pro's classic WooCommerce widgets.
Fashion and homeware brands
That need visual colour and material swatches.
Small food and craft shops
That want simple, fast product cards.
FAQ
Questions about the WooCommerce Product Widgets
How do I build a WooCommerce shop page in Elementor 4?
Use the free Loop Grid from Animation Addons for Elementor with Source set to Products, then design the Loop Item as your product card with the Pro widgets: Product Price, Product Rating, Product Badge, Product Stock, Add to Cart and Variation Swatches. Loop Grid repeats the card for every product and respects WooCommerce's catalog visibility.
Can I add variation swatches to product cards in Elementor?
Yes. The Animation Addons Variation Swatches widget shows variable product attributes as clickable swatches using the colours or images assigned to your attribute terms. Variation Swatches is built to sit in the Loop Grid's product card and in single product templates, so shoppers choose by sight instead of a dropdown.
Does the Add to Cart widget work with my WooCommerce plugins and cache?
The Animation Addons Add to Cart widget is rendered by WooCommerce, with no custom cart logic or endpoints, so cart, checkout and the extensions that hook into them stay WooCommerce's. Keep your cache plugin's WooCommerce rules (cart, checkout and account pages uncached) and test checkout with your payment and shipping plugins after setup.
Do I need Elementor Pro to build a WooCommerce store in Elementor 4?
No. The Animation Addons WooCommerce widgets need WooCommerce and Animation Addons Pro, but not Elementor Pro. The Loop Grid that displays products is free in Animation Addons for Elementor, and everything runs on Elementor Free with the Atomic Editor on. Cart and checkout pages remain WooCommerce's own.
How do I show sale and new badges on WooCommerce products in Elementor?
Add the Animation Addons Product Badge widget to your Loop Grid product card, usually over the product image. Product Badge supports sale, stock, featured and new-product badges based on WooCommerce data, so badges appear and disappear as products go on sale or sell out without manual edits.
Are the WooCommerce widgets good for SEO and mobile?
The Animation Addons WooCommerce widgets render product titles, prices and stock into the page HTML through WooCommerce, so search engines read them like any product listing. Each widget takes per-breakpoint styles, so a four-column grid can become two columns on phones with larger Add to Cart buttons for touch.
Can I use these widgets on the single product page?
Yes. The Animation Addons WooCommerce widgets are designed for both Loop Grid product cards and single product templates. Use Product Price, Product Rating, Product Stock, Variation Swatches and Add to Cart on the product page, and add the free Post Pagination for previous and next product links.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Related Atomic Elements
Elements that work well with the WooCommerce Product Widgets on the same page or template.
Loop Grid
the free atomic loop that repeats your product card for every product.
Loop Filters
price, rating, stock and attribute filters for the same grid (Pro).
Post Pagination
free previous and next product links on single product pages.
Post Image
the free featured-image element for the card and product page.
Search Form
a free AJAX search box for the shop header.
Build your product cards the Elementor 4 way
Atomic product parts, WooCommerce's own rendering, no Elementor Pro. Need something free? The free Loop Grid with Post Title, Post Image and Post Excerpt already lists your products; the Pro widgets add price, stock, swatches and the cart button.
- Included in Animation Addons ProFrom $39 a year or $59 once
- Elementor Pro not requiredRuns on Elementor Free
- 15-day refund windowFor eligible first purchases