{"id":33400,"date":"2023-01-17T16:17:25","date_gmt":"2023-01-17T16:17:25","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=33400"},"modified":"2023-07-28T09:55:30","modified_gmt":"2023-07-28T09:55:30","slug":"jetengine-devtools-listing-counter-add-on-in-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-devtools-listing-counter-add-on-in-elementor\/","title":{"rendered":"How to Add Counter to the Listing Grid and the Dynamic Table Widgets with the Listing \u0421ounter Add-on in Elementor"},"content":{"rendered":"\n

The JetEngine DevTools Listing \u0421ounter Add-on<\/em> for the JetEngine<\/em><\/a> plugin adds numbers to the posts\/CPTs in listings or dynamic tables, adding the listing counter callback to the Dynamic Field<\/strong><\/a> and Listing Grid<\/strong><\/a> widgets; it uses the custom queries and dynamic tables.<\/p>\n\n\n\n

Downloading and Installing the Add-on<\/strong><\/h2>\n\n\n\n

Downloading the add-on<\/strong><\/h3>\n\n\n\n

Download this add-on from GitHub for free via the jet-engine-list-counter-callback<\/a> link; press the \u201cCode<\/strong>\u201d button and the Download Zip<\/strong> tab.<\/p>\n\n\n\n\"jetengine\n\n\n\n

Installing the add-on<\/strong><\/h3>\n\n\n\n

Go to the WordPress Dashboard<\/em>, navigate to the Plugins<\/strong> tab, and press the \u201cAdd New<\/strong>\u201d button to add the add-on.<\/p>\n\n\n\n

This tutorial details How to install Jet plugins via WordPress Dashboard<\/a>.<\/p>\n\n\n\n

Activate the add-on.<\/p>\n\n\n\n\"jetengine\n\n\n\n

Building a Query for the Numerated CPTs<\/strong><\/h2>\n\n\n\n

Navigate to JetEngine > QueryBuilder<\/em><\/strong> of the WordPress Dashboard<\/em>. Press the \u201cAdd New<\/strong>\u201d button to create a new query. <\/p>\n\n\n\n

Type the query name in the Nam<\/strong>e field (here, Query for listing counter<\/em>), choose the Posts Query<\/strong> option in the Query Type<\/strong> drop-down menu, and select the CPT for the listing or the dynamic table (here, Properties<\/em> for the listings and Real Estate<\/em> for the dynamic tables).<\/p>\n\n\n\n\"query\n\n\n\n

This tutorial explains How to Use Query Builder<\/a>. <\/p>\n\n\n\n

Adding Counters to Listings<\/strong><\/h2>\n\n\n\n

Adding callbacks to dynamic fields<\/strong><\/h3>\n\n\n\n

Open the Listing item<\/em> with the dynamic fields to which you want to add numbers. Find the Dynamic Field<\/strong> widget and drag it to where you want to display numbers.<\/p>\n\n\n\n

Enable the Filter field output<\/strong> toggle of this widget to activate the Callback<\/strong> and Select query<\/strong> drop-down menus. Select the appropriate settings: the Listing\u2019s counter<\/em> for the Callback<\/strong> and Query for listing counter<\/em> for the Select query<\/strong> menu.<\/p>\n\n\n\n\"dynamic\n\n\n\n

Additionally, users can apply stylish settings to the number.<\/p>\n\n\n\n

Read about How to Work with Dynamic Field Widget <\/a>in this tutorial.<\/p>\n\n\n\n

Listing Grid widget settings<\/strong><\/h3>\n\n\n\n

Open a page with the Listing Grid <\/strong>widget built on the CPTs with the counter in the Dynamic Field<\/strong>. Unroll the Custom Query<\/strong> tab of the Listing Grid <\/strong>widget. Move the Use Custom Query<\/strong> toggle and choose the previously created query (here, Query for listing counte<\/em>r) from the Select query<\/strong> drop-down menu.  <\/p>\n\n\n\n\"custom\n\n\n\n

Adding Counters to Dynamic Tables<\/strong><\/h2>\n\n\n\n

Creation of a dynamic table<\/strong><\/h3>\n\n\n\n

Navigate to JetEngine  > Tables Builder<\/em><\/strong> of the WordPress Dashboard<\/em>. Press the \u201cAdd New Table<\/strong>\u201d button to create a new table. <\/p>\n\n\n\n

Click the General Settings<\/strong> tab, type the table name in the Name<\/strong> field and choose the built query (here, Query for listing counter<\/em>) with the CPT for the dynamic table from the Data Query<\/strong> drop-down menu.<\/p>\n\n\n\n\"table\n\n\n\n

Columns of the table<\/strong><\/h3>\n\n\n\n

Click the Columns<\/strong> tab and add a column for the number displaying (here, index<\/em>) with the following settings:<\/p>\n\n\n\n