Elementor Loop Grid helps you build repeatable content listings without manually duplicating every card on a page. Instead, you create or select a reusable Loop Item template, then use the Loop Grid widget to decide which items appear, how they are ordered and how visitors move through the results. This makes the workflow useful for blog indexes, page collections, resource directories, taxonomy listings and WooCommerce product grids.
The practical sequence is straightforward: choose the content type, create the repeated template, place it in a Loop Grid, configure the query, select ordering and pagination, and test the complete result. The available template types and query controls depend on the Elementor and WooCommerce setup installed on the site. Treat AJAX, Infinite Scroll and independent pagination as configuration options that need testing on the target website, not as universal improvements.
What Elementor Loop Grid Does
Choose the Listing Type Before Designing
A Loop Grid displays multiple content items using one reusable Loop Item template. The template establishes the consistent structure of each entry, while the widget controls the collection displayed on the page. Depending on the available configuration, a grid can list posts, pages, landing pages, manually selected content, post taxonomies, WooCommerce products or product taxonomies.
These sources support different practical workflows. A post-oriented grid can present articles or other editorial content, while a page-oriented listing can organize selected pages. Taxonomy-oriented grids can display terms. A product grid is intended for a WooCommerce catalog, and Product Taxonomy depends on WooCommerce being available on the site.
Choose the listing type before designing the card. Post and product entries do not necessarily expose the same dynamic information, so they should not automatically share one template. Separating the content model from the visual layout also makes later query and pagination testing easier.
Create a Reusable Elementor Loop Item Template
Post and Product Card Checks
Start by creating or selecting a Loop Item template separately from the Loop Grid widget’s query and pagination settings. For post or page listings, choose the Posts template type. For a WooCommerce catalog listing, choose Products where WooCommerce is available. Build the repeated entry with Elementor containers and the dynamic content widgets relevant to that content type.
A post template may need an image, title and excerpt or other intended post content. A product template should present the relevant product information and purchase-related links used by the selected design. The exact fields should match the content being listed rather than being copied from an unrelated template.
Preview the template with representative content before placing it in the grid. Check entries that contain optional or missing values, because a repeated card must remain understandable when every item does not have identical content. For WooCommerce listings, verify product visibility, stock status, pricing, tax display and purchase-related links in the selected Loop Item template before deployment. Do not assume that a template is compatible with every theme, WooCommerce extension or third-party product without separate verification.
Configure the Loop Grid Layout
Responsive and Content Checks
Place the Loop Grid on the target page and select the existing or newly created Loop Item template. Then establish the basic layout, including the number of columns and items per page. These are design settings rather than universal recommendations: the appropriate choice depends on the content, page composition and target device, so test the result on the actual site.
Keep the layout configuration separate from Query and Pagination settings. First confirm that the repeated cards form a coherent grid. Then review the same layout on mobile devices instead of assuming that the desktop arrangement will transfer correctly. Titles, images, excerpts and product information should remain usable at different viewport sizes.
Use real content during this review. Different title lengths, missing dynamic values and varied images can reveal problems that are not visible in a preview containing only one convenient example. Correct the template or layout before investigating query behavior.
Build Queries for Posts, Pages, Taxonomies and Products
Source, Include and Exclude Rules
Open the Loop Grid Content settings and go to the Query section. Select the source before applying filters. Documented options include Posts, Pages, Products, Manual Selection, Current Query and Related where available. The source determines which content collection the widget can use and which controls are relevant.
After confirming the source, use inclusion and exclusion rules to narrow the results. Depending on the selected content type and configuration, items can be filtered using terms, authors or dates. For post listings, terms can include categories and tags. For product listings, a relevant product term such as a category can be used. Manual Selection is useful when the displayed collection must be chosen explicitly rather than inferred from broader query conditions.
Compare the resulting collection with the intended page, archive or directory. Check whether excluded items truly disappear and whether the first page contains enough representative results. Also test an empty-result scenario before publication. Query controls should be verified in the installed Elementor and WooCommerce setup because not every option is necessarily present in every configuration.
Current Query and Contextual Listings
Use Current Query when the Loop Grid should inherit an existing archive or page query. This can help a listing follow the context already established by the page instead of duplicating the selection manually. The setting should be treated as contextual: verify that the page or archive supplies the query you intend to display and do not assume that the option behaves independently of the current page.
When a page contains a manually defined collection, compare it with the contextual result before publishing. A grid that inherits the wrong context can appear correctly designed while displaying an unintended set of items. Test archive, taxonomy and page views that are relevant to the implementation.
Order and Refine Listing Results
Validate the Resulting Order
After defining the source and filters, select an Order By criterion in the Query settings. Documented choices include Date, Title, Menu Order, Last Modified, Comment Count and Random order. Where applicable, choose ascending or descending direction.
Match the criterion to the purpose of the listing, then test it with real content. Date or Last Modified can organize time-sensitive editorial collections; Title can support a directory-style arrangement; Menu Order can reflect intentionally arranged content. Random order is another documented option, but its effect should be checked against the intended user experience.
Review the order after applying terms, authors or date limits. Retest after content changes that could affect the chosen criterion. There is no single ordering method that is best for every site or catalog, so the result must be judged against the page’s purpose rather than assumed from the setting name.
Choose Pagination and Manage Multiple Grids
Selecting a Pagination Style
Choose a pagination style in the Loop Grid Pagination settings. Available options include Numbers, Previous/Next, Numbers plus Previous/Next, Load on Click and Infinite Scroll. Without a pagination style, visitors see only one page of loop items.
Numbered navigation gives visitors explicit access to individual pages. Previous/Next provides a simpler sequence, while the combined option offers both forms of navigation. Load on Click and Infinite Scroll are also documented configuration choices, but their behavior should be tested with the actual design, content quantity and interaction pattern. Do not describe either option as automatically faster, more accessible or more SEO-friendly.
Elementor also documents Page Reload and AJAX as load types. Page Reload refreshes the page, while AJAX reloads only the Loop Grid widget according to the documentation. Select and test the behavior with the site’s theme, caching configuration, filters and mobile layout. Dynamic updates can affect focus management and the visibility of loading or empty-result states, so keyboard navigation and screen-reader behavior require a real implementation check.
Independent Pagination Configuration
Multiple Loop Grids on one page require special attention. By default, Elementor normally refreshes them to the same page number. If visitors should move through each grid independently, enable Individual Pagination.
This setting is page-wide in practice: all Loop Grids on that page must use the same Individual Pagination setting. Check every grid rather than changing only the one whose controls you are currently editing. A mixed configuration can prevent the page from behaving as intended.
Test the grids separately and together. Confirm which collection changes when a visitor selects a page, clicks Load on Click or reaches an Infinite Scroll trigger. Repeat the test on mobile and after any change to filtering, caching or other interactive elements. Independent pagination should be validated as part of the complete page, not in isolation.
Pre-Publication Testing Checklist
Final Verification Pass
Before publishing, perform one complete pass through the template, query, ordering and pagination settings. Confirm that the selected Loop Item template matches the content source and that posts, pages, taxonomies or products are represented correctly.
- Verify the query source and review include and exclude rules.
- Test term, author and date filters where they are used.
- Check the selected Order By criterion and sort direction with representative content.
- Confirm pagination links, Load on Click or Infinite Scroll behavior.
- Test empty results and entries with missing or optional dynamic fields.
- Review the layout on mobile devices and check keyboard navigation.
- Use a screen reader to inspect dynamic updates, focus management and loading or empty-result visibility.
- For WooCommerce, verify visibility, stock status, pricing, tax display and purchase-related links.
- On pages with several grids, confirm that every grid uses the same Individual Pagination setting.
- Retest after changes to the theme, caching configuration or other plugins.
These checks do not establish compatibility with every theme, caching layer, WooCommerce extension or third-party filtering plugin. They provide a practical way to identify issues in the specific implementation before visitors depend on it.
Elementor Loop Grid is most manageable when its responsibilities remain clear: the Loop Item template defines the repeated card, the Query settings define the content, ordering refines the result, and Pagination controls how visitors access additional items. For several grids, decide early whether pagination should remain synchronized or become independent, then apply the matching setting consistently. Finally, test the complete page across content types, devices and interaction methods. Explore our WordPress plugins, WooCommerce extensions, themes and membership plans to find the right tools for your website.