{"id":37994,"date":"2023-03-11T17:17:25","date_gmt":"2023-03-11T17:17:25","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=37994"},"modified":"2023-03-23T09:18:43","modified_gmt":"2023-03-23T09:18:43","slug":"products-grid-load-more-addon","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/","title":{"rendered":"Products Grid Load More Addon"},"content":{"rendered":"\n
\n

The Load More<\/strong> option can help you organize products and save space on the page. In general, with Load More, you can hide one part of the Products Grid<\/strong><\/a> widget by adding the Button or Infinite Scroll option that will showcase another one. You can set the number of columns and products to organize the posts in the most preferable way.<\/p>\n\n\n\n

Before installing the addon, be sure that you have an up-to-date version of the JetWooBuilder plugin. Then download the addon from the DevTools<\/strong><\/a> Crocoblock page, where this and other features are free. After that, navigate to Plugins<\/em><\/strong> on the Dashboard, click on the \u201cAdd New\u201d <\/strong>button, and then \u201cUpload plugin.\u201d<\/strong> The last step is to activate<\/strong> the plugin.<\/p>\n\n\n\n

Open the page in the Elementor page builder and click on the Products Grid<\/strong> widget. In the General <\/strong>section of the Content <\/strong>left-side menu tab, choose the Products Number<\/strong> that will be shown after every scrolling or clicking on the button.<\/p>\n\n\n\n\"products\n\n\n\n

Then open the Load More<\/strong> section and enable the toggle.<\/p>\n\n\n\n\"enable\n\n\n\n

After that, two additional features will appear. Load more Type<\/strong> drop-down menu allows you to choose when the additional sections of the Products Grid will be shown \u2013 when the user clicks the button or scrolls down the page. In the Load More Trigger ID<\/strong> field, you should define what element will be used as a \u201cLoad More<\/strong>\u201d button.<\/p>\n\n\n\n

If you select the \u201cBy Page Scrolling<\/strong>\u201d <\/strong>type, you don\u2019t need any other settings. But you need to set the trigger element if you choose the \u201cBy Button Click<\/strong>\u201d type.<\/p>\n\n\n\n

You can use any element as a \u201cLoad More<\/strong>\u201d button \u2013 image, text, button, animation, etc. Place the element under the Product Grid, open the Advanced <\/strong>tab of the left-side menu, unfold the Advanced <\/strong>section, and fill in the CSS ID<\/strong> field.<\/p>\n\n\n\n\"load\n\n\n\n

If you place the default WordPress Button<\/strong> widget, you just need to fill in the Button ID<\/strong> field on the bottom of the Button <\/strong>menu section.<\/p>\n\n\n\n\"button\n\n\n\n

Then copy the ID and go back to the Products Grid widget settings. Paste the copied ID into the Load More Trigger ID<\/strong> field.<\/p>\n\n\n\n\"load\n\n\n\n

When you are done, click the green \u201cUpdate\u201d<\/strong> button at the bottom of the menu and watch the result on the front-end.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s all. This function will help you create a structured and attractive page without losing the content.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Load More option can help you organize products and save space on the page. In general, with Load More, you can hide one part of the Products Grid widget by adding the Button or Infinite Scroll option that will showcase another one. You can set the number of columns and products to organize the posts in the […]<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[523],"yoast_head":"\nProducts Grid Load More Addon - Help Center<\/title>\n<meta name=\"description\" content=\"Find out how to use the Load More functionality via the Elementor WooCommerce plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Products Grid Load More Addon - Help Center\" \/>\n<meta property=\"og:description\" content=\"Find out how to use the Load More functionality via the Elementor WooCommerce plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-23T09:18:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/products-number.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/\",\"name\":\"Products Grid Load More Addon - Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-03-11T17:17:25+00:00\",\"dateModified\":\"2023-03-23T09:18:43+00:00\",\"description\":\"Find out how to use the Load More functionality via the Elementor WooCommerce plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Products Grid Load More Addon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Products Grid Load More Addon - Help Center","description":"Find out how to use the Load More functionality via the Elementor WooCommerce plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/","og_locale":"en_US","og_type":"article","og_title":"Products Grid Load More Addon - Help Center","og_description":"Find out how to use the Load More functionality via the Elementor WooCommerce plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/","og_site_name":"Help Center","article_modified_time":"2023-03-23T09:18:43+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/products-number.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/","name":"Products Grid Load More Addon - Help Center","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-03-11T17:17:25+00:00","dateModified":"2023-03-23T09:18:43+00:00","description":"Find out how to use the Load More functionality via the Elementor WooCommerce plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-grid-load-more-addon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Products Grid Load More Addon"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/37994"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/12"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=37994"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=37994"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=37994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}