Display Variable Products

Elementor makes it easy to showcase variable products on your pages using the Product Variations widget. This feature allows you to visually highlight specific WooCommerce variable products with customizable styles and layouts.

 Step 1: Add the Variable Product Widget

1.      Open your page in Elementor Editor.

2.      In the left sidebar, search for the widget named “Product Variations”.

3.      Drag and drop the Product Variations widget onto your page.

4.      In the widget settings, you’ll see an option to Add Product IDs.

This is where you enter the ID(s) of the variable product(s) you want to display.

 

Step 2: How to Find a Product ID

You can find a product’s ID in two ways:

 

Method 1: From the Product Edit Page

1.      Go to your WordPress Dashboard > Products.

2.      Click Edit under the product you wish to use.

3.      In the browser’s address bar, look for the post parameter in the URL:

In this example, 14331 is the Product ID.

 Method 2: From the Product List

1.      Go to WordPress Dashboard > Products.

2.      Hover your mouse over the desired product.

3.      Below the product title, you’ll see the Product ID displayed as:

 Final Notes:

·         Make sure the product you enter is a Variable Product.
·         Only enter the numeric Product ID, separated by commas if showing multiple.