How to use WC Products Widget of Sky Addons for Elementor

The Sky Addons WC Products widget displays WooCommerce products in a responsive grid with three built-in layout styles. It includes a full query builder for sourcing products — by category, tag, manual selection, the current shop query, or related products — plus an Add to Cart button, a Quick View modal, sale badge display, optional pagination, and deep style control for every element. This documentation will guide you through the process of using the WC Products Widget to build a high-converting product grid on any page of your store.

Features:

1. Three Layout Styles: Style 1 places buttons below the content; Styles 2 and 3 place buttons as icon overlays on the product image for a more compact card.
2. Flexible Query Builder: Source products from a specific category/tag, manual product IDs, the current WooCommerce shop query, or automatically pull related products to the current post.
3. Add to Cart Button: Fully customizable button with custom text, icon (position before/after), and a “View Cart” state after a product is added — all with complete style control.
4. Quick View Modal: A lightbox-style product quick view opens inline without leaving the page. Configure animation, position, and dimensions. Style the modal backdrop and container independently.
5. Sale Badge: Native WooCommerce sale flash badge with full color and typography style control.
6. Pagination: Built-in WordPress-compatible pagination renders below the grid when enabled.
7. Responsive Grid: 1–6 columns with responsive row and column gap controls.

Insert WC Products Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for WC Products in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section controls the grid structure and image size.

1. Layout: Choose Style 1 (buttons below content), Style 2, or Style 3 (buttons as icon overlays on the image).
2. Columns: Set 1–6 columns for desktop, tablet, and mobile.
3. Row Gap / Column Gap: Control grid spacing in px or em. Responsive.
4. Image Size: Choose a registered image size for the product thumbnail.

Configure Query

The Query section controls which products are fetched.

1. Source: Choose from Product (all products), Manual Selection (specific product IDs), Current Query (mirrors the active WooCommerce shop/archive query), or Related (related products for the current post).
2. Use the query builder controls to filter by Category, Tag, Author, set Posts Per Page (default 8), and choose Order By and Order direction.

Configure Additional Options

The Additional section controls which product elements are displayed.

1. Show Title / Title HTML Tag: Toggle the product name and choose its heading tag.
2. Show Price: Toggle the product price display.
3. Show Image: Toggle the product thumbnail.
4. Show Category: Toggle the product category links displayed above the title.
5. Show Text: Toggle the product excerpt. When on, set a Text Limit (word count) and optionally Strip ShortCode from the excerpt.
6. Show Add to Cart: Toggle the Add to Cart button.
7. Show Quick View: Toggle the Quick View button.
8. Show Pagination: Toggle WordPress pagination below the grid.

Configure Add to Cart Button

The Add To Cart Button section customizes the button appearance and behavior.

1. Button Text: Override the default WooCommerce “Add to cart” label.
2. View Cart Text: Set the label shown after a product is added to the cart (default “View Cart”).
3. Icon: Choose an icon from the Elementor icon library (default: shopping cart).
4. Icon Position: Place the icon Before or After the button text.
5. Icon Spacing: Control the gap between icon and label text in px or em.

Configure Quick View Button and Modal

The Quick View Button section customizes the secondary action button. The Modal Settings section controls the popup behavior.

1. Quick View text, icon, icon position: Customize the label and icon for the quick view trigger button — same controls as the Add to Cart button.
2. Popup Animation: Choose the modal entrance animation (zoom, fade, slide, etc.).
3. Popup Position: Set where the modal appears on screen (center, top, bottom, etc.).
4. Popup Width / Height: Set the modal dimensions in px or em (defaults to 900 × 480 px).

Style Your WC Products

Use the Style tab to customize every visual element.

1. Item:
   Padding, border, border radius, and Normal/Hover background, box shadow, and border color.
2. Image:
   Width, height, padding, margin, border, border radius, box shadow, and CSS filters.
3. Badge:
   Color, typography, padding, and border radius for the native WooCommerce sale badge.
4. Title:
   Spacing and global title style controls (typography, normal color, hover color).
5. Price:
   Global WooCommerce price style — regular price color, sale price color, and typography.
6. Text:
   Typography and color for the product excerpt text.
7. Category:
   Spacing, space between category pills, typography, and Normal/Hover colors for the category link labels.
8. Pagination:
   Global pagination style controls.
9. Add to Cart Button:
   Full button style — typography, padding, border radius, and Normal/Hover text color, background, border, and box shadow.
10. Quick View Button:
    Same full button style controls as Add to Cart.
11. Modal:
    Modal backdrop color and container style controls.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your WC Products widget in action.

Best Practices

1. Use the Current Query source on a custom Shop or Category archive template so the widget automatically respects any active WooCommerce filters or search queries.
2. Add product descriptions to your WooCommerce products if you plan to enable Show Text — a short excerpt improves scannability in the grid.
3. Set product featured images to the same aspect ratio across your catalog — consistent image dimensions prevent uneven card heights in the grid.
4. Enable Quick View for products with multiple variants or detailed specifications — it lets shoppers inspect the product without navigating away, which can reduce bounce rate.

Troubleshooting

1. No products appear in the grid. Check the Query section — if Manual Selection is chosen, make sure valid product IDs are entered. Also confirm WooCommerce is active and products are Published.
2. Add to Cart button does nothing. This usually indicates a JavaScript conflict or that WooCommerce AJAX is blocked. Check the browser console for errors and confirm WooCommerce scripts are loading on the page.
3. Quick View modal opens blank. Make sure the product has a featured image and content assigned. Also verify the modal dimensions are large enough to display the product — too small a popup can cause overflow without visible content.

Frequently Asked Questions

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

Yes. Set the Source to “Current Query” in an Elementor template assigned to the WooCommerce shop archive, and the widget will mirror what the default shop page would show — including active filters and sorting.

Does the Add to Cart button work for variable products?

For simple products, clicking Add to Cart adds the item directly. For variable products, clicking typically redirects to the product page so the user can select their variant — this is standard WooCommerce behavior for grid views.

Can I show products from multiple categories at once?

Yes. The query builder allows filtering by multiple categories — select them in the Category filter field, and products from all selected categories will appear together in the grid.

How does the Related source work?

When Source is set to Related, WooCommerce fetches products that share the same category or tag as the current post or product. This source is most useful inside a single product template.

Does the sale badge appear automatically?

Yes. WooCommerce’s native woocommerce_show_product_loop_sale_flash() function renders the badge automatically for any product that has a sale price set and active. Style it under the Badge section in the Style tab.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the WC Products widget:

• WC Products Carousel: Show the same product data in a Swiper carousel with navigation and autoplay.
• WC Category: Pair a category grid above your product grid to give shoppers a clear navigation path.

Conclusion

The WC Products widget gives you a complete, fully stylable WooCommerce product grid — with a powerful query builder, Add to Cart, Quick View, sale badges, and pagination all built in — ready to place on any Elementor page. If you have any questions or need help, visit the Sky Addons support center.