Sky Addons for Elementor

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

EDD Category Grid

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

The Sky Addons EDD Category Grid widget lays out your Easy Digital Downloads Download Categories in a responsive CSS grid. Each category card links to its archive page and can display the category image, name, product count, and description — making it easy for shoppers to find the section they are looking for. Four layout presets, adjustable row and column gaps, and a full set of style controls mean you can match the grid to any site design. This documentation will guide you through the process of using the EDD Category Grid Widget to create a clear, browsable category overview on your website.

Features:

  1. Four Layout Styles: Style 1–4 each arrange the category image, overlay, and text in a different composition.
  2. CSS Grid Layout: Uses native CSS Grid for gap-based spacing — set Row Gap and Column Gap independently without box-model hacks.
  3. Responsive Columns: Choose different column counts for desktop, tablet, and mobile from a simple dropdown.
  4. Category Query Controls: Include or exclude specific categories, set an item limit, control ordering, and hide empty categories.
  5. Product Count Display: Append the number of products in each category to the title automatically.
  6. Content Overlay Styling: Style the content wrapper that sits over the image with its own background, padding, border, and radius.
  7. Normal / Hover Item States: Separate background, box shadow, and border color controls for the default and hovered card states.

Insert EDD Category Grid Widget

  1. Open your page in Elementor and click the + icon to add a new section.
  2. Search for EDD Category 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 from Style 1, 2, 3, or 4 to change how the image and text are composed inside each card.
  2. Columns: Set how many cards appear per row on desktop, tablet, and mobile (desktop defaults to 3).
  3. Row Gap: Vertical space between grid rows.
  4. Column Gap: Horizontal space between grid columns.
  5. Image Size: Pick the registered WordPress image size for the category thumbnail.

Configure Query

The Query section targets the EDD download_category taxonomy.

  1. Include / Exclude Terms: Whitelist or blacklist specific categories by name.
  2. Item Limit: Cap the maximum number of categories displayed.
  3. Orderby / Order: Sort by name, ID, slug, or product count in ascending or descending order.
  4. Hide Empty: Suppress categories that currently have no published products.

Configure Additional Display Options

The Additional section controls which elements appear inside each category card.

  1. Show Title: Toggle the category name. When enabled, choose the Title HTML Tag (h2–h6, div, etc.).
  2. Show Image: Display the category’s featured image.
  3. Show Text: Render the category description below the title.
  4. Show Count: Append the product count to the title (e.g., “Music (5)”).

Style Your EDD Category Grid

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

  1. Item:
    Text alignment, 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 (brightness, contrast, blur, saturation).
  3. Content:
    Background, padding, margin, border, border radius, and box shadow for the text overlay wrapper.
  4. Title:
    Spacing below the title, typography, color, and hover color for the category name.
  5. Text:
    Typography, color, and spacing for the category description (visible when Show Text is on).

Save and Preview

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

Best Practices

  1. Upload a term image for every category in the EDD term settings — the grid looks most cohesive when each card has a real image rather than the placeholder.
  2. Use the Row Gap and Column Gap controls rather than adding margin inside the Item padding, so spacing remains consistent across all breakpoints.
  3. Keep the item count manageable — a grid of 6–12 categories is typically more scannable than showing every category at once. Use the Item Limit setting to cap the output.
  4. Pair the grid with a heading widget above it to give the section context, such as “Browse by Category.”

Troubleshooting

  1. No categories appear: Make sure Easy Digital Downloads is active, at least one Download Category exists, and (if Hide Empty is on) each category has at least one published product assigned to it.
  2. Category images show a placeholder: Category images are stored in the download_term_image meta field managed by EDD. Edit each category under Downloads → Categories and upload a term image.
  3. Grid columns do not change on mobile: Check that you have set a Columns value under the mobile breakpoint in the responsive column control. Changes to the desktop value do not automatically cascade down to smaller breakpoints.

Frequently Asked Questions

Does this widget require Easy Digital Downloads?

Yes. The widget queries the download_category taxonomy that EDD registers. EDD must be installed and active for any categories to show.

Can I show a subset of categories rather than all of them?

Yes. Use the Include Terms field to specify exactly which categories to show, or use Exclude Terms to hide specific ones. You can also cap the total with the Item Limit control.

Can I display the category description below the title?

Yes. Enable Show Text in the Additional section. The text shown comes from the Description field on the taxonomy term edit screen in the WordPress admin.

How do I control the spacing between cards?

Use the Row Gap and Column Gap sliders in the Layout section. These map directly to the CSS grid-row-gap and grid-column-gap properties on the grid container.

How is the EDD Category Grid different from the EDD Category Carousel?

The Grid is a static, all-at-once layout where every category card is visible simultaneously. The Carousel is a horizontally scrollable Swiper widget with autoplay and navigation. Use the Grid for overview pages and the Carousel for featured or hero-style sections.

Related Documentation

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

Conclusion

The EDD Category Grid widget is a straightforward yet fully customisable way to help shoppers navigate your Easy Digital Downloads catalog by category. With flexible layout styles, a powerful query builder, and granular style controls, you can build a category overview page that is both functional and visually consistent with your brand. If you have any questions or need help, visit the Sky Addons support center.

How can we help?