Loop Query Table | WellPlayedWP

Overview

Loop Query Table adds an Elementor Pro widget that displays query results as a real HTML table. Each query result is one table row, and each cell in that row can render its own Elementor Loop Item template.

Requirements

WordPress 6.5 or newer
PHP 7.4 or newer
Elementor
Elementor Pro with Loop Builder support

Getting Started

Install and activate Loop Query Table.
Create one or more Elementor Loop Item templates.
Edit a page or template with Elementor.
Add the Loop Query Table widget from the WellPlayedWP widget group.
Open Table Cells and add one repeater item for each cell you want in every result row.
Choose a Loop Item template for each cell.
Open Query and choose the source, include/exclude rules, terms, authors, order, date, posts per page, and Query ID.
Configure Pagination and Responsive Table as needed.

Plugin settings are available in WordPress admin under Elementor > Loop Query Table.

Table Cells

The Cells Per Result Row repeater controls the number of cells in each table row on a widget-by-widget basis.

Each cell includes:

Column Label: used in the table header and stacked mobile layouts.
Loop Item Template: the Elementor Loop Item template rendered in the cell.
Column Width: optional CSS width such as 25%, 220px, or 12rem.
Alignment: left, center, or right.
Vertical Align: top, middle, or bottom.
Hide On: optionally hide the column on desktop, tablet, or mobile.

Each query result uses the same cell structure. For example, if the widget has three cells, every result row renders those three templates against that result’s current post.

Query Controls

Loop Query Table uses Elementor Pro query controls. The widget supports:

Source and manual selection
Current query
Include by term or author
Exclude current post, manual selections, terms, or authors
Avoid duplicates
Offset
Date filtering
Order and order by
Posts per page
Ignore sticky posts
Query ID

The Query ID field is important when Advanced Loop Query or custom code needs to target this table.

Loop Item Template Rendering

Loop Query Table sets up each query result as the current post before rendering cell templates. Elementor dynamic tags, post widgets, custom fields, shortcodes, buttons, links, and other Loop Item template content should resolve the same way they do in Elementor Loop Grid.

Use focused templates for table cells. For example:

A media template for the first cell
A title, excerpt, and metadata template for the second cell
A price, status, or button template for the third cell

Responsive Table

Responsive Table controls include:

Stacked Cards: converts each row into a stacked layout and uses column labels as cell labels.
Horizontal Scroll: keeps the table structure and allows sideways scrolling.
Keep Table: leaves table layout unchanged.
Stack/Scroll Below: choose mobile or tablet.
Sticky Header: keeps the header visible while scrolling.
Sticky First Column: keeps the first column visible during horizontal scrolling.

Per-column Hide On controls can be used with responsive modes to simplify the table on smaller screens.

Pagination

Loop Query Table supports:

No pagination
Numbered pagination
Previous/next pagination
Numbered pagination with previous/next links
Load More button

Numbered pagination can use Page Reload or AJAX. The Load More button uses AJAX and appends the next result rows to the current table.

Styling

The widget includes style controls for:

Table width
Border collapse or separate border mode
Borders
Striped rows
Row hover color
Header typography, text color, background, and padding
Cell typography, text color, background, and padding
Pagination alignment and spacing

Column-specific alignment, vertical alignment, width, and device visibility are managed in each Table Cells repeater row.

Admin Settings

Go to Elementor > Loop Query Table to manage:

Uninstall Cleanup
Builder notes for template and query setup
Compatibility guidance for Elementor Pro Loop Builder support

Uninstall Cleanup is disabled by default. Turn it on before uninstalling if you want Loop Query Table to remove its plugin options and update cache data during uninstall. Elementor pages, templates, Loop Item templates, and widget settings stored in Elementor content are not deleted.

Languages

Loop Query Table includes gettext translation files for:

German (de_DE)
Spanish (es_ES)
French (fr_FR)
Chinese (zh_CN)
Japanese (ja)

Security Notes

Loop Query Table renders published Elementor Loop Item templates and public query results. AJAX pagination requests require a WordPress nonce, query settings are sanitized before use, and template rendering is restricted to published Elementor Loop Item templates when Elementor exposes the Loop document type.

Admin settings require the manage_options capability and are stored with WordPress Settings API sanitization. The widget registers only when Elementor Pro Loop Builder support is detected, so unsupported installs show an admin notice instead of loading an incomplete widget.

Developers

Loop Query Table mirrors Elementor Pro’s query extension points so Advanced Loop Query and custom code can target it like Elementor Loop Grid.

`elementor/query/query_args`

Filters query arguments before the query runs.

add_filter(
    'elementor/query/query_args',
    function ( $query_args, $widget ) {
        if ( ! is_object( $widget ) || ! method_exists( $widget, 'get_name' ) || 'loop-query-table' !== $widget->get_name() ) {
            return $query_args;
        }

        $query_args['meta_query'][] = array(
            'key'     => 'featured',
            'value'   => '1',
            'compare' => '=',
        );

        return $query_args;
    },
    20,
    2
);

`elementor/query/{query_id}`

Runs when the widget has a Query ID. Replace {query_id} with the Query ID entered in the widget.

add_action(
    'elementor/query/customer_directory',
    function ( $query, $widget ) {
        if ( ! $query instanceof WP_Query ) {
            return;
        }

        $query->set( 'posts_per_page', 25 );
        $query->set( 'orderby', 'title' );
        $query->set( 'order', 'ASC' );
    },
    20,
    2
);

`elementor/query/query_results`

Runs after query results are available.

add_action(
    'elementor/query/query_results',
    function ( $query, $widget ) {
        if ( ! is_object( $widget ) || ! method_exists( $widget, 'get_name' ) || 'loop-query-table' !== $widget->get_name() ) {
            return;
        }

        error_log( 'Loop Query Table rendered ' . absint( $query->post_count ) . ' results.' );
    },
    20,
    2
);

Changelog

1.0.0 – 2026-04-22

Add Elementor Pro Loop Query Table widget with one query result per table row.
Add per-cell Elementor Loop Item template selection with column labels, widths, alignment, and device visibility.
Add WellPlayedWP Elementor group placement and panel icon badge.
Add inline Elementor editor handles for table cell Loop Item templates.
Add Save & Back handling for inline Loop Item template editing.
Add Elementor Pro query controls with Query ID support and mirrored Elementor query hooks for Advanced Loop Query compatibility.
Add semantic table output with responsive stacked-card and horizontal-scroll modes.
Fix sticky header behavior, default column labels, and same-window Loop Item template editing.
Add sticky header, sticky first column, striped rows, hover rows, borders, typography, color, spacing, and pagination styling controls.
Add classic numbered pagination, AJAX pagination, and AJAX Load More support.
Add Elementor admin settings page, plugin listing Settings link, inline admin guidance, uninstall cleanup, and i18n-ready strings.
Add German, Spanish, French, Chinese, and Japanese translation catalogs.
Fix uninstall cleanup, AJAX pagination, compatibility guards, and editor template switching hardening.
Document installation, requirements, widget setup, query compatibility, responsive behavior, pagination, security, uninstall behavior, and developer hooks.