How to Display WooCommerce Products With the WC Products Widget in Elementor

If you’re running a WooCommerce store and using Elementor as your page builder, you have access to powerful tools that make showcasing your products easier than ever.

One of the most versatile features is the WC Products Widget, which allows you to display WooCommerce products in customizable layouts without writing a single line of code.

In this comprehensive guide, you’ll learn how to display WooCommerce products with the WC Products Widget in Elementor, including step-by-step instructions, customization options, and best practices to maximize your store’s performance.

Check Out More At: Elementor

Software: Elementor | Affiliate Program

---

What is the WC Products Widget in Elementor?

The WC Products Widget is a native Elementor widget specifically designed for WooCommerce stores. This powerful tool enables you to display products on any page or post, giving you complete control over which products appear, how they’re arranged, and how they look.

Whether you want to showcase featured products, recent arrivals, best sellers, or products from specific categories, the WC Products Widget makes it possible with just a few clicks.

Prerequisites: What You’ll Need

Before you start, ensure you have the following:

• WordPress installed on your website
• WooCommerce plugin activated with products added to your store
• Elementor plugin installed (Free or Pro version)
• Basic familiarity with the Elementor interface

Step-by-Step Guide: How to Display WooCommerce Products With the WC Products Widget

Step 1: Create or Edit a Page with Elementor

First, you need to access the Elementor editor where you’ll add the WC Products Widget.

1. Navigate to your WordPress dashboard
2. Go to Pages > Add New to create a new page, or select an existing page
3. Click the Edit with Elementor button to launch the Elementor editor

Step 2: Locate the WC Products Widget

Once you’re in the Elementor editor:

1. Look at the left sidebar where all Elementor widgets are listed
2. Search for “Products” in the search bar, or scroll to find the Products widget under the WooCommerce category
3. The icon typically shows a shopping cart or product grid symbol

Step 3: Drag and Drop the Widget

To add the WC Products Widget to your page:

1. Click and drag the Products widget from the sidebar
2. Drop it into your desired location on the page
3. The widget will immediately display a default selection of your WooCommerce products

Step 4: Configure Product Query Settings

Now comes the customization part. Click on the widget to access its settings in the left panel. You’ll see several tabs, starting with Content.

Query Options

In the Query section, you can control which products appear:

• Source: Choose what type of products to display
  • Recent Products
  • Featured Products
  • Sale Products
  • Best Selling Products
  • Top Rated Products
  • Related Products
  • Products by Category
  • Products by Tag
  • Manual Selection
• Products Per Page: Set how many products to display (default is usually 4)
• Exclude: Choose to exclude out-of-stock items or featured products
• Advanced Filters: Narrow down products by specific categories, tags, or custom criteria

Step 5: Customize Layout and Columns

The layout settings determine how your products appear visually:

1. Columns: Choose how many products display per row (1-6 columns)
2. Rows: Set the number of product rows
3. Products Per Page: Control pagination if you have many products
4. Image Ratio: Adjust product image dimensions (square, portrait, landscape)

Step 6: Style Your Product Display

Switch to the Style tab to customize the appearance:

Image Styling

• Border radius for product images
• Image spacing and padding
• Hover effects

Content Styling

• Product title font, size, and color
• Price typography and color
• Rating stars appearance
• Button styling (Add to Cart button)

Box Styling

• Background color
• Border and shadow effects
• Padding and spacing

Step 7: Configure Additional Settings

Elementor’s WC Products Widget offers advanced options:

• Show/Hide Elements: Toggle product titles, ratings, prices, and “Add to Cart” buttons
• Sale Badge: Customize or hide the sale flash badge
• Pagination: Enable/disable product pagination
• Order By: Sort products by date, price, popularity, or rating

Step 8: Preview and Publish

Before publishing:

1. Click the Preview button (eye icon) to see how your products look on desktop, tablet, and mobile
2. Make any necessary adjustments to responsive settings
3. Once satisfied, click Publish or Update to make your changes live

Advanced Tips for Using the WC Products Widget

Display Products by Category

To showcase products from a specific category:

1. In the Query section, select “Product Category” as the source
2. Choose your desired category from the dropdown menu
3. Set the number of products to display

Create a Featured Products Section

Highlight your best products:

1. Set the Source to “Featured Products”
2. Use 3-4 columns for optimal display
3. Style with eye-catching colors and prominent “Add to Cart” buttons

Show Related Products on Product Pages

Create dynamic product recommendations:

1. Edit your single product template with Elementor
2. Add the WC Products Widget
3. Select “Related Products” as the source
4. Products will automatically match the current product’s category or tags

Use Manual Selection for Curated Collections

For complete control:

1. Choose “Manual Selection” in the Query settings
2. Select specific products you want to display
3. Perfect for creating themed collections or promotional sections

Styling Best Practices

Optimize for Mobile Devices

Always check your product display on mobile:

1. Switch to responsive mode in Elementor
2. Reduce columns to 1-2 for mobile screens
3. Adjust image sizes and spacing for better mobile viewing
4. Ensure buttons are easily tappable

Maintain Visual Consistency

Keep your product displays aligned with your brand:

• Use consistent colors that match your site’s theme
• Apply the same typography across all product widgets
• Maintain uniform spacing and padding
• Use Global Colors and Fonts in Elementor for easy consistency

Improve Load Times

Product images can slow down your site:

• Optimize images before uploading to WooCommerce
• Use lazy loading for product images
• Limit the number of products per page to 8-12 for faster loading
• Consider using a caching plugin

Common Issues and Troubleshooting

Products Not Displaying

If your products aren’t showing:

• Verify that you have published products in WooCommerce
• Check your query settings and filters
• Ensure WooCommerce is properly activated
• Clear your cache and refresh the page

Styling Not Applying

If custom styles aren’t working:

• Check for theme conflicts by temporarily switching to a default WordPress theme
• Ensure Elementor is updated to the latest version
• Clear Elementor’s CSS cache (Elementor > Tools > Regenerate CSS)

Mobile Display Issues

For responsive problems:

• Use Elementor’s responsive mode to set specific mobile styles
• Reduce columns for smaller screens
• Adjust image sizes independently for each device

Why Use the WC Products Widget?

The WC Products Widget in Elementor offers several advantages:

No Coding Required: Build professional product displays without technical knowledge

Complete Customization: Control every aspect of how products appear

Dynamic Content: Products update automatically when you add or modify items in WooCommerce

Responsive Design: Built-in mobile optimization ensures great looks on all devices

Time-Saving: Create product layouts in minutes instead of hours

Conversion Focused: Optimized layouts that encourage purchases

Conclusion

Learning how to display WooCommerce products with the WC Products Widget in Elementor opens up endless possibilities for your online store.

From creating eye-catching product grids to building dynamic category pages, this powerful tool gives you the flexibility to design a store that truly represents your brand.

By following this guide, you can create professional product displays that engage visitors and drive sales.

Experiment with different layouts, styles, and configurations to find what works best for your store. Remember to always preview your changes on multiple devices and test the user experience before publishing.

Start implementing these techniques today, and watch your WooCommerce store transform into a visually stunning shopping experience that converts visitors into customers.

---

Ready to take your store to the next level? Explore Elementor’s other WooCommerce widgets to create complete shopping experiences, including product carousels, category grids, and custom checkout pages.