Products Element

Updated on June 18, 2019

How to show products on a page

The Product element is a WooCommerce based element that displays a loop of your shop products in a page. Please note that the Products element is not considered as a shop archive. For this, you need to use the Shop Customizer.

Common Uses:

  • Custom shop page
  • Product loop inside pages
  • Showcasing products
  • Product grid

Note: In order for this element to work, WooCommerce plugin needs to be installed and activated. You can do it from Jupiter X control panel > Plugins.


Beware!
 This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. Also, the Jet Elements for Elementor has some WooCommerce elements which you can use them too. You may check its WooCommerce related elements here

To add a Products element to a page:


1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the left dashboard, search for a “Products”.

4. Drag and drop the Products element to your page.

5. A new dashboard on the left will open with the element’s settings.

6. Edit the settings and Update the page.


Note:
 To style the items (product title, price, image) in the Products Element you need to use Shop Customizer via Appearance > Customize > Shop > Product List as described in the article.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Products element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Did this answer your question?