WooCommerce Products

How to use WooCommerce Products Widget of Sky Addons for Elementor

The Sky Addons WooCommerce Products widget displays your WooCommerce products in a modern grid that you design yourself in Elementor: no coding and no theme templates to edit. You choose one of seven ready-made card designs, decide which pieces of information appear on each card (image, category, star rating, title, price, short description, buttons), and pick which products to show. Shoppers can add a product to their cart or open a Quick View popup without ever leaving the page. This documentation walks you through every setting, step by step, in plain language.

Features:

Seven Card Designs: Pick from Classic, Overlay, Minimal, Soft, Glass, Split, and Focus. Each one is a genuinely different look, not the same card with a different border.
Add to Cart Without Reloading: Shoppers add products straight from the grid. The page does not reload, so they never lose their place.
Quick View Popup: A popup shows the product image, price, rating, and description with its own Add to Cart button: perfect for shoppers who want a closer look before buying.
Real Star Ratings: Reviews appear as gold stars instead of the plain text “Rated 5.00 out of 5”. Products with no reviews simply show nothing.
Discount Percentage Badge: On-sale products show how much a shopper saves, such as -33%, instead of a generic “Sale!” label.
Show Actions on Hover: On the Classic and Glass designs you can keep the buttons always visible, or reveal them when the shopper hovers the card for a cleaner look.
Alignment Control: Move every piece of text and both buttons to the left, centre, or right, and set it differently on desktop, tablet, and mobile.
Image Ratio and Image Fit: Force all product images into the same shape (square, portrait, landscape) so a grid of mixed photos still lines up perfectly.
Powerful Product Query: Show your latest products, a specific category or tag, a manual list, or products related to the one being viewed.
Built for Every Shopper: Buttons meet the recommended minimum tap size, work with a keyboard, and never hide behind a hover effect on touch screens.

Insert WooCommerce Products Widget

Before you begin, make sure WooCommerce is installed and active and that you have at least one published product. The widget only appears in Elementor when WooCommerce is running.

Open the page you want to edit and click Edit with Elementor.
Click the + icon to add a new section, or click into an existing one.
Type WooCommerce Products in the widget search box on the left.
Drag the widget onto your page. Your products appear immediately using the default design.

Choose a Card Design and Layout

Open the Layout section in the Content tab. This is where you decide how the grid looks overall.

Style: Choose one of the seven card designs:
- Classic: Image on top, details underneath, buttons always visible. The safest choice and the best all-rounder for most shops.
- Overlay: Text sits on top of the product photo. Best when your product images have plenty of empty space.
- Minimal: No borders or shadows, and the buttons look like small text links. Suits clean, editorial, fashion-style shops.
- Soft: Rounded corners and gentle shading. Friendly and approachable.
- Glass: A frosted, semi-transparent panel over the image. Looks best over colourful photos or a coloured section background.
- Split: Image on one side, details on the other. Good for wide layouts with only one or two columns.
- Focus: The card is just the photo, and everything else appears when the shopper hovers. The most dramatic option. Because it relies on hovering, use it only where your visitors are mostly on desktop.
Columns: How many products sit side by side. Set a different number for desktop, tablet, and mobile: two columns on mobile is a good starting point.
Alignment: Moves the category, rating, title, price, and buttons to the left, centre, or right together. Centre suits Overlay and Focus; left suits Classic and Minimal.
Show Actions (Classic and Glass only): Choose Always Visible to keep the buttons on screen at all times, or one of the hover options to reveal them only when the shopper points at the card. Hover reveal is skipped automatically on phones and tablets, and the buttons still appear for anyone using a keyboard, so nobody is ever locked out of buying.
Image Ratio: Forces every product image into the same shape. If your product photos are different sizes, set this and your grid will line up neatly.
Image Fit: Decides what happens to a photo inside that shape. Cover fills the space and trims the edges; Contain shows the whole photo and may leave blank space around it.

Choose Which Products to Show

Open the Query section to control which products appear.

Source: Pick where products come from: all products, a chosen Category or Tag, a Manual list you select one by one, or Related products.
Products Per Page: How many products to display. Keep this reasonable: a page with 60 product images will feel slow.
Order By and Order: Sort by date, title, price, popularity, or menu order, in ascending or descending direction.
Exclude: Leave specific products out, which is handy for hiding a placeholder or a sold-out item.
Show Pagination: Adds numbered page links beneath the grid so shoppers can browse a large catalogue.

Tip: The Related source only has products to work with when the widget sits on a single product page, for example inside a Theme Builder product template. On a normal page it will look empty.

Turn Card Elements On and Off

The Elements section holds a simple on/off switch for every piece of a product card, listed in the same order they appear on the card. Switch off anything you do not need: a shorter card is easier to scan and loads faster.

Show Image: The product photo.
Show Sale Badge: The discount label on on-sale products. It shows the real saving, such as -25%. For products with several variations at different prices it shows the biggest available discount.
Show Category: A small chip with the product’s category name. Off by default.
Show Rating: Gold review stars with the number of reviews in brackets. Products without reviews show nothing at all, so your grid never displays a row of empty stars.
Show Title and Title Tag: The product name, and which HTML heading tag it uses. Leave the tag at its default unless you understand heading structure: search engines use it to understand your page.
Show Price: The price, including the crossed-out original price on sale items.
Show Text, Text Limit, and Strip Shortcode: The product’s short description, how many words of it to show, and whether to remove any shortcodes from it.
Show Add to Cart and Show Quick View: The two action buttons.

Configure the Add to Cart Button

Icon: Leave this empty to use the built-in shopping bag icon, which is designed to match the card. Pick any icon here if you would rather use your own.
Show Text: Hide the wording to leave an icon-only button. Only do this if the meaning is obvious: a bare icon confuses some shoppers.

The wording on the button comes from WooCommerce itself, so a simple product says Add to cart while a product with options says Select options. Products with options cannot be added in one click: WooCommerce needs the shopper to choose a size or colour first, so the button sends them to the product page.

Configure the Quick View Button and Popup

Icon: Leave empty for the built-in eye icon, or choose your own.
Show Text: Show or hide the wording next to the icon.
Modal settings: Control the popup’s width, background, and close button.

The popup loads a product’s details only when a shopper actually clicks Quick View. This keeps your page light no matter how many products the grid contains.

Style Your WooCommerce Products

Switch to the Style tab. The sections are listed in the same order the pieces appear on the card, so you can work from top to bottom.

Item: The card itself: background, padding, border, corner rounding, and shadow, with separate settings for the normal and hover states.
Image: Corner rounding and the zoom effect on hover.
Badge: Colours, text size, spacing, and corner rounding for the sale badge.
Category: Colours, text size, and the chip’s border and padding.
Rating: Star Color sets the filled stars and Empty Star Color sets the rest, plus star size and the review-count colour.
Title, Price, and Text: Typography, colours, and spacing for each.
Add to Cart Button and Quick View Button: Full control over both: typography, padding, border, corner rounding, icon size, and separate normal and hover colours.
Modal: Styling for the Quick View popup.
Pagination: Styling for the page number links.

Save and Preview

Click Update to save your page.
Use the responsive icons at the bottom of the Elementor panel to check the grid on tablet and mobile.
View the live page and test the buttons: add a product to your cart, then open Quick View. Both should work without the page reloading.

Best Practices

Upload product photos at the same shape. If you cannot, set Image Ratio so the widget lines them up for you.
Keep Add to Cart always visible on shops with lots of mobile traffic. There is no hovering on a phone, and a buy button nobody can find costs you sales.
Show fewer things, not more. Image, title, price, and a buy button is enough for most shops. Every extra line makes the price harder to spot.
Match the design to your photos. Overlay and Glass need images with calm, empty areas; busy photos make the text hard to read.
Use pagination instead of a huge Products Per Page. It keeps the page fast.
Keep the buy button colour consistent across your site so shoppers instantly recognise it.

Troubleshooting

The widget is missing from Elementor. WooCommerce must be installed and active. Also check the widget has not been switched off in Sky Addons → Widgets.
No products appear. Confirm you have published products, then check your Query settings: an empty category or a too-narrow filter is the usual cause.
A style change does nothing on the live page. Clear your caching plugin, and your CDN if you use one. Elementor stores generated styles in a file that a cache can hold on to.
Add to Cart sends shoppers to the product page. That is correct for products with options such as size or colour: WooCommerce needs the choice before it can add the item.
No stars appear on a product. That product has no approved reviews yet. Ratings are hidden rather than shown as empty stars.
Quick View does not open. Check your browser console for JavaScript errors from another plugin or your theme. One broken script on the page can stop all others from running.
Buttons look wrong or oversized. Your theme’s own button styling may be overriding the widget. Set the padding and text size in the button’s Style section to take back control.

Frequently Asked Questions

Can I use this widget to replace the default WooCommerce shop page?

Yes. Build a page with the WooCommerce Products widget, enable Show Pagination, then set that page as your shop page, or build a shop archive template with the Sky Addons Theme Builder.

Does the Add to Cart button work for variable products?

The button appears, but it reads Select options and opens the product page. This is how WooCommerce works: a product with several variations cannot be added to a cart until the shopper picks which one they want.

Can I show products from multiple categories at once?

Yes. The category field in the Query section accepts more than one category at a time.

Which card design should I choose?

If you are unsure, choose Classic. It shows everything clearly, keeps the buy button visible, and works on every screen size. Try the more decorative designs once your product photos are consistent.

Will the hover reveal hide the buy button on phones?

No. Hover reveal is switched off automatically on touch screens, and the buttons also appear for anyone navigating with a keyboard. Every shopper can always reach the buy button.

Does the sale badge appear automatically?

Yes, whenever a product has a sale price set in WooCommerce. It shows the actual percentage saved, and for products with variations it shows the largest discount available.

Why are my product images different heights?

Because the original photos have different proportions. Set Image Ratio to a fixed shape and Image Fit to Cover, and every card will match.

Conclusion

The WooCommerce Products widget gives you a modern, fully designed WooCommerce product grid without touching a template file. Choose a card design, decide what appears on each card, and let shoppers buy or preview products right where they are. If you have any questions or need help, visit the Sky Addons support center.

Sky Addons for Elementor