How to Display WooCommerce Products Using JupiterX

Enhance your online store by showcasing your WooCommerce products on any page with the advanced JupiterX Products widget. With a plethora of filtering options and sorting capabilities, you can tailor the display to match your marketing strategy and customer preferences.

Getting Started with the WooCommerce Products Widget

To begin using the WooCommerce Products widget:

Navigate to the page where you wish to display your products within the WordPress dashboard.
Click on 'Edit with Elementor' to load the Elementor Page Builder.
From the Elementor panel, search for the 'Products' widget and drag it to your desired section on the page.

Configure Product Filters

With the Products widget, you have various ways to filter the products that will be displayed:

All Products: This option will display all products.
Current Archive Query: Utilize this to filter products according to the current archive.
Products by IDs: Specify product IDs to display specific products.
Categories & Tags: Filter products based on specific categories or tags.
Most Ordered Products: Display products that have been ordered the most.
Most Recent Ordered Products: Show products that have been ordered recently.
Related to the Existing Product Page: When used on a product page, it will show related products.
Related to Products in the Cart: Display products related to items currently in the customer's cart.
Related to Customer's Previously Visited Products: Show products based on the customer's browsing history.
Related to Customer's Recent Ordered Products: Display products similar to those the customer has recently ordered.
Cross-Sell to the Existing Product Page: Show cross-sell items related to the current product page.
Cross-Sell to Products in the Cart: Display cross-sell items related to what's in the cart.
Cross-sell to Customer's Previously Visited Products: Suggest cross-sell items based on past visits.
Cross-Sell to Past Orders: Show cross-sell products related to past orders.
Upsells to the Existing Product Page: Display upsell products related to the current product page.
Upsells to Products in the Cart: Offer upsells related to cart items.
Upsells to Customer's Previously Visited Products: Suggest upsell items based on browsing history.
Upsells to Past Orders: Recommend upsell products related to past purchases.

Special Product Filters

Spotlight special selections by enabling filters for:

Featured Products: Present your handpicked, standout items.
Products on Sale: Attract attention to products with discounts and deals.

Sorting Products

Customize the order in which your products appear by choosing a sort criteria:

Price: List products from low to high price or vice versa.
Popularity: Arrange products based on sales volume.
Average Rating: Prioritize products with higher ratings.
Date: Sort by the newest or oldest products.
Title: Order products alphabetically.
Menu Order: Follow the custom order set in the WooCommerce backend.
Random: Mix up the product display for a dynamic look.

Offset

Find the 'Offset' field.
Enter a numerical value to skip over a set number of products. For example, entering '4' will skip the first four products in the query results.

Excludes

Under 'Excludes', you can determine which products not to display.
'Current Product' is pre-selected, meaning the product being viewed will not be included in the list.
Click the '+' button to add more exclusion criteria.
Select 'Manual Selection' if you want to exclude specific products by searching and selecting them manually.

Widget Title

Click on the 'Widget Title' field.
Enter a title for your product display widget. This title will be visible above the products on your webpage.

Layout Configuration

From the Layout section, choose 'Custom' from the 'Choose Layout & Style Source' menu.

Show All Products Toggle

If available, toggle 'Show All Products' to 'Yes' if you want to display all products regardless of pagination settings.

General Layout

Click on the 'General Layout' dropdown.
Choose from options like 'Grid', 'Masonry', 'Matrix', or 'Metro' to define how products are organized visually on the page.

Content Layout

Click on the 'Content Layout' dropdown.
Select 'Content Under Image' to place the product details below the image.
Other options like 'Content Overlay' and 'Content on the Side' may be available depending on your theme and settings.

Columns and Rows

Adjust the number of 'Columns' and 'Rows' to specify how many products to display horizontally and vertically.

Media Aspect Ratio

Use the slider to adjust the aspect ratio of the product images.

Media Position

Select the image alignment within its container, such as 'Center Center' for a centered position.

Image Resolution

Choose the desired image quality/resolution from the dropdown, such as 'WooCommerce Thumbnail'. You can also select 'Custom' and choose a custom size to be cropped.

Equal Columns Height

Toggle 'Yes' to ensure all columns have the same height for a uniform appearance.

Block Hover

Select an effect for when the mouse hovers over a product block, if desired.

Featured Image Hover

Click on the dropdown to select an interaction effect for the featured image when hovered over, like 'Zoom', 'Fade and Swap', etc.

Load Effect

Select a loading animation for the products as they appear on the screen from the 'Load Effect' dropdown.

Display Elements Toggles

Toggle the switches next to 'Categories', 'Title', 'Price', 'Rating', etc., to 'Show' or 'Hide' these elements on the product display.

Pagination

Locate the 'Pagination' toggle switch.
Set it to 'Show' to enable pagination on the product display. This allows users to navigate through multiple pages of products if there are more products than can be displayed on one page according to the Rows and Columns settings.

View Pagination As

Click on the dropdown menu labeled 'View Pagination As'.
Choose the type of pagination:
- Page Based: Users navigate through products via numbered pages.
- Load More: A button will appear for users to load more products on the same page.
- Infinite Load: New products load automatically as the user scrolls down.

Show Sorting Dropdown

Toggle 'Show Sorting Dropdown' to 'Show' if you want to give users the ability to change the sorting of products themselves. A dropdown will appear on the front end, allowing them to sort products according to various criteria like price, popularity, etc.

Show Result Count

Toggle 'Show Result Count' to 'Show' to display the number of products being viewed and the total number of products available. This information typically appears as "Showing 1–10 of 20 results".

Elements Order

The 'Elements Order' section allows you to numerically reorder the elements that appear on each product block.
Input the order number beside 'Categories', 'Title', 'Rating', 'Price', etc., to rearrange the sequence in which they are displayed.

Styling Configurations

Use the styling tab to customize the look of different elements in JupiterX 'Products' widget.

Widget Title Styling

Alignment: Choose the alignment of the widget title text (left, center, right).
Color: Select a color for the widget title text.
Typography: Click on the typography option to set the font family, size, weight, transform, style, decoration, line-height, and letter-spacing for the widget title.
Spacing: Adjust the padding around the widget title to increase or decrease the space around it. This can be set for top, right, bottom, and left individually.

Block Styling

Columns and Rows Gap: Adjust the slider for the 'Columns Gap' and 'Rows Gap' to set the space between the columns and rows of products.
Border Type: Choose the type of border for the product blocks (solid, double, dotted, dashed, etc.).
Border Radius: Set the border-radius to control the roundness of the product block corners.
Box Shadow: Add a shadow effect to the product blocks.
Background Color: Select a background color for the product blocks.
Content Alignment: Set the alignment for the content inside the product blocks.
Padding: Adjust the padding inside the product blocks.
Image Styling
Border Type: Choose the border type for the images.
Border Radius: Set the border-radius for the images to control corner roundness.
Opacity: Adjust the opacity of the images.
Spacing: Set the spacing around the images.
Box Shadow: Optionally add a shadow to the images.

Rating Styling

View as: Choose how the rating is displayed (inline, stacked).
Icon Size: Adjust the size of the rating icons.
Spacing: Set the spacing around the rating.
Color: Choose the color for the rating icons.

Categories, Title, and Price Styling:

For each of these elements:

View as: Decide if the element should be displayed inline or stacked.
Color: Select the text color.
Typography: Customize the typography settings.
Spacing: Adjust the spacing around the element.

Add to Cart Button Styling

Location: Choose whether the button appears inside or outside the image area.
Icon: If there's an option to add an icon, upload or choose the icon for the button.
Text Color, Background Color, Border Color: Customize colors for the text, background, and border of the button.
Typography: Set the font settings for the button text.
Size: Adjust the size of the button.
Border Type: Choose the type of border for the button.
Border Radius: Set the border-radius for the button.
Text Padding: Adjust the padding inside the button to increase or decrease the text size.
Spacing: Set the spacing around the button.

Pagination Styling

Button Label: Enter the text that will appear on the pagination button, such as "Load More".
Width and Height: Adjust the sliders to set the width and height of the pagination button.
Padding: Set the padding inside the button to increase or decrease the clickable area.
Alignment: Choose the alignment of the button within its container (left, center, or right).
Normal and Hover States: Configure the styles for both the normal and hover states of the button, including color, typography, background color, border, and box shadow.

Sorting & Result Count Styling

Padding: Adjust the padding around the sorting dropdown and result count text.
Result Count: Style the result count by configuring the typography, text color, and any other available options.
Sorting: Customize the padding, typography, and text color for the sorting dropdown.
Border: If available, set the border type, border radius, and box shadow for the dropdown.
Dropdown Arrow: Customize the color, size, and horizontal offset of the dropdown arrow.

Overlay Styling

Color Type: Choose between a solid color or a gradient for the overlay.
Color: Select the color for the overlay; this will apply when items are hovered over.
Transition Duration: Set how quickly the hover transition takes place.

Sale Badge Styling

Position: Choose where on the product image the sale badge should be positioned.
Border Type: Set the type of border around the sale badge.
Border Radius: Adjust the border-radius to change the roundness of the sale badge corners.
Padding and Spacing: Configure the padding inside the badge and the spacing around it.
Text Color: Choose the color of the text within the sale badge.
Border and Background Color: Select colors for the border and background of the sale badge.
Typography: Set the font properties for the text inside the sale badge.