Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. EDD Product Grid

EDD Product Grid

How to use EDD Product Grid Widget of Sky Addons for Elementor

The Sky Addons EDD Product Grid widget displays your Easy Digital Downloads products in a polished, responsive CSS grid with three layout presets. It integrates directly with the Sky Addons query builder so you can pull products by category, tag, or manual selection — and gives each product its own Quick View modal so shoppers can preview details and add to cart without navigating away from the page. Optional pagination, a configurable Add to Cart button, and a full suite of style controls round out the feature set. This documentation will guide you through the process of using the EDD Product Grid Widget to create a high-converting product listing on your website.

Features:

  1. Three Layout Styles: Style 1, 2, and 3 each arrange the product image, title, price, and action buttons in a distinct composition.
  2. Query Builder: Filter products by post type, manual selection, current query, or related — with orderby, date, author, and taxonomy filters.
  3. Quick View Modal: A configurable pop-up that lets visitors preview full product details and add to cart in one step.
  4. Built-in Pagination: Optional page-by-page navigation at the bottom of the grid so shoppers can browse large catalogs without scrolling endlessly.
  5. CSS Grid Spacing: Separate Row Gap and Column Gap sliders keep card spacing consistent across every breakpoint.
  6. Toggleable Elements: Show or hide the title, price, image, category badge, excerpt, Add to Cart button, and Quick View button independently.
  7. Normal / Hover Item States: Background, box shadow, and border color controls for both the resting and hovered card states.

Insert EDD Product Grid Widget

  1. Open your page in Elementor and click the + icon to add a new section.
  2. Search for EDD Product Grid in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section controls the visual style and grid dimensions.

  1. Layout Style: Choose Style 1, 2, or 3 — each places the thumbnail, title, price, and buttons in a different arrangement inside the card.
  2. Columns: Set column count per device breakpoint (desktop defaults to 3, tablet to 2, mobile to 1).
  3. Row Gap: Vertical spacing between grid rows.
  4. Column Gap: Horizontal spacing between grid columns.
  5. Image Size: Pick a registered WordPress image size for product thumbnails.

Configure Query

The Query section determines which EDD products are fetched and displayed.

  1. Source: Select Download for all products, Manual Selection to hand-pick items, Current Query to mirror the active archive, or Related for contextual products.
  2. Posts Per Page: How many products to show per page (default 6).
  3. Offset: Skip the first N products in the result set.
  4. Order / Orderby / Date / Author / Tax Filter: Full query builder controls for sorting and filtering the product list.

Configure Additional Display Options

The Additional section toggles individual product elements on or off.

  1. Show Title: Display the product name. Select the Title HTML Tag for semantic correctness.
  2. Show Price: Show or hide the EDD price.
  3. Show Image: Display the product thumbnail.
  4. Show Category: Render the Download Category badge on each card.
  5. Show Text: Display an excerpt. Set the Text Limit (word count) and enable Strip Shortcode to clean the output.
  6. Show Add to Cart: Render the Add to Cart button.
  7. Show Quick View: Render the Quick View modal trigger.
  8. Show Pagination: Enable numbered page navigation below the grid.

Configure Add to Cart and Quick View Buttons

The Add To Cart Button and Quick View Button sections (each visible when the corresponding toggle is on) let you customise the button labels and icons.

  1. Button Text / View Cart Text: Set the Add to Cart label and the post-purchase “View Cart” label.
  2. Icon: Choose an icon library icon for the button.
  3. Icon Spacing: Control the gap between the icon and the button text.
  4. Quick View Label / Icon: Override the Quick View button text and choose its icon.

Configure Modal Settings

When Quick View is enabled, the Modal Settings section controls the pop-up behaviour.

  1. Popup Animation: Choose the modal entrance animation (fade, slide, zoom, etc.).
  2. Popup Position: Center, top, bottom, left, or right of the viewport.
  3. Popup Width / Height: Set the modal dimensions.

Style Your EDD Product Grid

Use the Style tab to customise every visual element of the grid.

  1. Item:
    Padding, border, border radius. Normal tab (background, box shadow) and Hover tab (background, box shadow, border color) for the card container.
  2. Image:
    Width, height, padding, margin, border, border radius, box shadow, and CSS filters.
  3. Title:
    Spacing, typography, color, text shadow, and hover color.
  4. Price:
    Color, typography, text shadow, and margin for the EDD price element.
  5. Text:
    Typography, color, and spacing for the product excerpt.
  6. Category:
    Typography, color, background, padding, border radius, and hover state for the category badge.
  7. Add to Cart Button:
    Full button style for Normal and Hover states — typography, padding, border, radius, background, text color, box shadow.
  8. Quick View Button:
    Matching full button style for the Quick View trigger.
  9. Modal:
    Background, border, radius, and box shadow for the Quick View pop-up container.

Save and Preview

  1. Click Update in Elementor to save your page.
  2. Preview the page to see your EDD Product Grid widget in action.

Best Practices

  1. Enable Pagination for stores with more than 12 products rather than setting a very high Posts Per Page value, which can slow down the page load.
  2. Keep the Text Limit short (20–30 words) to maintain consistent card heights across the grid.
  3. Use Manual Selection for a “Featured Products” section and the default Download source for a full catalog page.
  4. Give hover state cards a subtle box shadow instead of a heavy color change — it provides clear feedback without jarring the layout.

Troubleshooting

  1. Products do not appear: Verify that Easy Digital Downloads is active and that at least one Download is published. If you selected Manual Selection, confirm you have actually picked products in the field.
  2. Pagination does not work: Make sure Show Pagination is toggled on. Pagination depends on the current WordPress query context — it works best on a dedicated shop page rather than inside a nested query.
  3. Quick View modal opens blank: This usually means the product’s single template is not rendering inside the modal. Ensure no theme redirect is interfering with the modal AJAX request, and check the browser console for errors.

Frequently Asked Questions

Does this widget require Easy Digital Downloads?

Yes. The widget queries the EDD download custom post type. Easy Digital Downloads must be installed and active.

Can I filter products by a specific Download Category?

Yes. In the Query section, use the Taxonomy Filter to restrict the grid to one or more Download Categories or Tags.

How do I show a “View Cart” button after a customer adds an item?

In the Add To Cart Button section, fill in the View Cart Text field. Once the customer adds the product to their cart, the button label automatically switches to this text.

Can I use this grid as a related products section?

Yes. In the Query section, set the Source to Related. The widget will then show products that share taxonomy terms with the currently viewed product, making it ideal for single product pages.

What is the difference between EDD Product Grid and EDD Product Carousel?

The Grid places all fetched products in a static multi-column layout visible at once. The Carousel wraps them in a horizontally scrollable Swiper widget with autoplay, navigation arrows, and loop support. Use the Grid for full catalog pages and the Carousel for featured or highlighted product sections.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the EDD Product Grid widget:

Conclusion

The EDD Product Grid widget provides a complete, flexible product listing solution for Easy Digital Downloads stores — from the query builder that targets exactly the right products, to the Quick View modal that reduces the steps to purchase. Configure, style, and go live directly from the Elementor panel. If you have any questions or need help, visit the Sky Addons support center.

How can we help?