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.
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.
Filters
The product widget has premade filters, and it’s accessible in the content tab,
- Products by IDs
- Categories & Tags
- Most Ordered Products
- Most Recent Ordered Products
- Related to the Existing Product Page
- Related to Products in the Cart
- Related to Customer’s Previously Visited Products
- Related to Customer’s Recent Ordered Products
- Cross-Sell to the Existing Product Page
- Cross-Sell to Products in the Cart
- Cross-sell to Customer’s Previously Visited Products
- Cross-Sell to Past Orders
- Upsells to the Existing Product Page
- Upsells to Products in the Cart
- Upsells to Customer’s Previously Visited Products
- Upsells to Past Orders
You can also sort products by
- Popularity
- Average Rating
- DateTitle
- Menu Order
- Random
Layout
The product widget can take settings from Shop Customizer via Appearance > Customize > Shop > Product List as described in the article. Or you can apply your custom style. To do this, you need to select the custom style in the Layout settings tab:
Once you select Custom, you will get control of all elements of the widget
Style
The style tab of the Product widget represents the styling options of the widget. From this tab you can style every part of the widget, Widget Title, Box of the products, Product container, and Sales badge.
Responsive Options
You can choose different settings on different screen sizes for some of the Product element options. You can choose the different screen sizes whenever you see this icon and freely change those 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.
