The Products Element is a high-performance tool designed to showcase your WooCommerce inventory. It offers a seamless transition between static grids and dynamic sliders, allowing you to filter products by category, status, or specific ID.
🛠 01. General Configuration #
This tab handles the core logic and structural layout of your product display.
- Element Title: Define a custom heading for the section.
- Layout Mode: Toggle between List, Grid, or Carousel views.
- Data Source: Define which products the system fetches:
- All Products: Displays the entire catalog.
- Featured: Targets products marked with a star in the dashboard.
- Sale: Filters for items with an active discount price.
- New Label: Displays items flagged as “New” (Requires Theme Settings > Shop > Product Labels to be active).
- Bestsellers: Automatically pulls the most frequently purchased items.
- List of IDs: Manually curate a specific selection using product IDs.
- Categories/Tags: Narrow results to specific taxonomies.
- Pagination Engines:
- Load More Button: Manual trigger to fetch more items.
- Infinite Scrolling: Continuous loading as the user scrolls.
- Arrows: Fades in the next set of items upon hover.
- Grid Logic: Enable Masonry or Different Sizes for a modern, asymmetrical aesthetic.
- Spatial Control: Adjust the gutter (space) between items from 0px to 30px.
🎨 02. Visual Design #
Fine-tune the appearance and interactive behavior of your product cards.
| Option | Description |
| Products Hover | Select from various interactive animation styles. |
| Columns | Set the responsive density (1, 2, 3, 4, or 6 columns). |
| Image Size | Input standard strings (large, full) or custom pixels (300×400). |
| Sale Countdown | Displays a live timer (requires a “Sale Price Date” in WooCommerce). |
| Highlighted Section | Applies a specific visual emphasis to promote high-value items. |
Export to Sheets
📊 03. Data & Sorting #
Control the sequence and exclusion rules for your data set.
- Order By: Sort by Date, ID, Title, Price, Random, or Meta Value.
- Sorting Direction: Choose between Ascending or Descending.
- Offset: Skip a specific number of products (useful for avoiding duplicates on a page).
- Exclude: Remove specific products from the view by title.
🔄 04. Carousel Settings #
Visible only when “Carousel” is selected in the General tab.
- Slider Speed: Set the transition duration in milliseconds (ms).
- Slides Per View: Determine how many products are visible simultaneously.
- Scroll Per Page: Move the entire set of visible items instead of shifting one by one.
- Autoplay: Enable hands-free cycling of products.
- Loop & Center Mode: Enable Slider Loop for infinite rotation. Pair with Center Mode to keep the primary item focused in the middle of the viewport.
