How to Add WooCommerce Products to Elementor: A Beginner’s Guide

Adding your WooCommerce products to your Elementor pages is a crucial step in creating a beautiful and functional online store. This guide will walk you through the process, even if you’re completely new to either Elementor or WooCommerce. We’ll use simple, real-world examples to make it easy to understand.

Imagine you own a bakery selling delicious cakes. You want to showcase your “Chocolate Fudge Cake” prominently on your homepage. This is where Elementor and WooCommerce integration comes in handy.

What You’ll Need

Before we begin, ensure you have the following:

• WordPress installed and active. This is the foundation of your website.
• WooCommerce plugin installed and configured. This is what powers your online store.
• Elementor plugin installed and active. This is the page builder we’ll use. Make sure Explore this article on How To Reset Woocommerce Payment you have the Elementor Pro plugin if you want access to all features.
• At least one WooCommerce product created. Go to Products > Add New to create your cake masterpieces!

Method 1: Using the WooCommerce Widget

This is the simplest and most recommended method.

• Step 1: Open the Elementor Editor: Navigate to the page you want to edit (or create a new one) and click “Edit with Elementor.”
• Step 2: Add the WooCommerce Widget: In the Elementor editor, search for “WooCommerce” in the widgets section. Drag and drop the “Products” widget onto your page.
• Step 3: Configure the Widget: The “Products” widget offers several options:
• Source: Choose how you want to display products. “Featured products” showcases products you’ve marked as featured Check out this post: How To See All Customers In Woocommerce in WooCommerce. “Recent products” shows the latest added products. “Specific products” lets you select individual products (like your Chocolate Fudge Cake!). “Best selling Discover insights on Wpml How To Translate Woocommerce Products products” displays your top sellers.
• Number of products: Control how many products are displayed.
• Columns: Arrange the products in a grid.
• Order by: Sort products by date, popularity, etc.
• Step 4: Select Your Products (if using “Specific products”): If you chose “Specific products,” you’ll see a dropdown where you can select the products you want to display. Choose your “Chocolate Fudge Cake” and other delicious treats!
• Step 5: Save and Publish: Once you’re happy with the arrangement, click “Update” or “Publish” to save your changes.

Method 2: Using the Elementor Template Library (Pro Feature)

Elementor Pro offers pre-built templates designed to showcase WooCommerce products. This is a great option for quick setup.

• Step 1: Access the Template Library: In the Elementor editor, click on the “Templates” icon.
• Step 2: Search for WooCommerce Templates: Search for “WooCommerce” to find various pre-designed layouts.
• Step 3: Import and Customize: Import the template you like and customize it to match your brand and the products you want to highlight.

Real-Life Example: Showcasing Your Bestsellers

Let’s say you want to highlight your three best-selling cakes on your homepage using the WooCommerce widget. You’d choose “Best selling products” as the source, set the “Number of products” to 3, and choose a suitable layout. This creates an attractive section showcasing your most popular items, encouraging customers to make a purchase.

Troubleshooting

• If you can’t find the WooCommerce widget: Ensure both WooCommerce and Elementor are properly installed and activated. Also, check if you have the necessary Elementor Pro license (if using Pro features).
• Products not displaying correctly: Double-check your widget settings and ensure the products you’ve selected are published and visible on the frontend.

By following these simple steps, you can seamlessly integrate your WooCommerce products into your Elementor pages, creating a stunning and functional online store. Remember to experiment and find what works best for your brand and products!