{"id":45255,"date":"2024-08-09T08:36:19","date_gmt":"2024-08-09T08:36:19","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=45255"},"modified":"2024-08-09T08:41:12","modified_gmt":"2024-08-09T08:41:12","slug":"how-to-use-pagination-widget-for-product-archives","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/","title":{"rendered":"How to Use Pagination Widget for Product Archives"},"content":{"rendered":"\n

The Products Pagination<\/strong><\/a> <\/strong>widget separates posts on WooCommerce<\/em> archive pages. It adds pagination to the WooCommerce<\/em> products displayed via the Products Grid<\/strong><\/a>, Products List<\/strong><\/a>, or Products Loop<\/strong><\/a> widgets, as well as allows for the customization of labels, icons, and more.<\/p>\n\n\n\n

The widget is part of the JetWooBuilder<\/em><\/a> plugin that covers 60+ widgets for different types of WooCommerce<\/em> pages.<\/p>\n\n\n\n

Activate the JetWooBuilder Settings<\/strong><\/h2>\n\n\n\n

Navigate to the WordPress Dashboard > Crocoblock > JetPlugins Settings > JetWooBuilder > Widgets <\/em><\/strong>tab. <\/p>\n\n\n\n

Move to the Shop Product Widgets<\/strong> section and enable the Products Pagination<\/strong> toggle.<\/p>\n\n\n\n

\"jetwoobuilder<\/a><\/div>\n\n\n
<\/svg><\/div>
Things to know<\/div>

Activate the Products Grid<\/strong>, Products List<\/strong>, or Products Loop<\/strong> widgets to display the products on the front end and then apply the Product Pagination<\/strong> widget to separate the products on the page.<\/p><\/div><\/div>\n\n\n\n

Create a Shop Page Template<\/strong><\/h2>\n\n\n\n

Move to WordPress Dashboard > <\/em><\/strong>Crocoblock > Woo Page Builder<\/em><\/strong> and press the “Create New Template<\/strong>” button. <\/p>\n\n\n\n

In the Create Template<\/strong> pop-up, select the “Shop” option in the This Template For<\/strong> selector and complete the Template Name<\/strong>. Finally, press the “Create Template<\/strong>” button.<\/p>\n\n\n\n

\"creating<\/a><\/div>\n\n\n\n

Read the tutorial How to Create a Shop Page Template<\/a> to learn about the main features of the JetWooBuider<\/em> template creation.<\/p>\n\n\n\n

Add the Products Grid Widget<\/strong><\/h2>\n\n\n\n

The new template will be opened in Elementor.<\/p>\n\n\n\n

Find the Products Grid<\/strong> widget in the search bar and drag-n-drop it to the page. Add the specific preset and set other options.<\/p>\n\n\n\n

To learn how to manage the widget\u2019s settings, read the Products Grid Widget Overview<\/a>.<\/p>\n\n\n\n

\"products<\/a><\/div>\n\n\n\n

To display the products for current categories, tags, and taxonomies on the archive pages, enable the Use Current Query<\/strong> toggle.<\/p>\n\n\n\n

Next, we specified the Products Number <\/strong>that would be displayed on the page. In this case, we set four products per page.<\/p>\n\n\n\n

\"the<\/a><\/div>\n\n\n\n

Add the Products Pagination Widget<\/strong><\/h2>\n\n\n\n

Find the Products Pagination<\/strong> widget and drag-n-drop it to the page.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Adjust the Settings<\/strong><\/h2>\n\n\n\n

Since the Enable Prev & Next Pages Links<\/strong> toggle is activated by default, the settings for icons and labels are available. In particular, you can change the labels for the “Previous<\/strong>” or “Next<\/strong>” buttons and select their icons.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n\n\n\n

Then, unroll the Style<\/strong> tab and customize the typography, colors, backgrounds, paddings, borders, alignment, and more for the product pagination, navigation, and navigation icons.<\/p>\n\n\n\n

alt text: style settings of the jetwoobuilder products pagination widget<\/p>\n\n\n\n

Additionally, we customized the Layout <\/strong>options within the Advanced<\/strong> settings tab.\u00a0<\/p>\n\n\n\n

\"advanced<\/a><\/div>\n\n\n\n

Check the Result<\/strong><\/h2>\n\n\n\n

Navigate to the front end and observe how the widget works.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n\n\n\n


That\u2019s all about adding the Products Pagination<\/strong> widget, displaying the products via the Products Grid<\/strong> widget, and managing the pagination settings with the JetWooBuilder<\/em> plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Products Pagination widget separates posts on WooCommerce archive pages. It adds pagination to the WooCommerce products displayed via the Products Grid, Products List, or Products Loop widgets, as well as allows for the customization of labels, icons, and more. The widget is part of the JetWooBuilder plugin that covers 60+ widgets for different types […]<\/p>\n","protected":false},"author":12,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[523],"yoast_head":"\nHow to Use Pagination Widget for Product Archives \u2014 JetWooBuilder | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to apply the JetWooBuilder Products Pagination widget on the archive pages to add WooCommerce products per page selector and manage the widget settings.\" \/>\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\/how-to-use-pagination-widget-for-product-archives\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Pagination Widget for Product Archives \u2014 JetWooBuilder | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to apply the JetWooBuilder Products Pagination widget on the archive pages to add WooCommerce products per page selector and manage the widget settings.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-09T08:41:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/08\/jetwoobuilder-widgets-tab-1024x640.webp\" \/>\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=\"4 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\/how-to-use-pagination-widget-for-product-archives\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/\",\"name\":\"How to Use Pagination Widget for Product Archives \u2014 JetWooBuilder | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-08-09T08:36:19+00:00\",\"dateModified\":\"2024-08-09T08:41:12+00:00\",\"description\":\"Learn how to apply the JetWooBuilder Products Pagination widget on the archive pages to add WooCommerce products per page selector and manage the widget settings.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/#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\":\"How to Use Pagination Widget for Product Archives\"}]},{\"@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":"How to Use Pagination Widget for Product Archives \u2014 JetWooBuilder | Crocoblock","description":"Learn how to apply the JetWooBuilder Products Pagination widget on the archive pages to add WooCommerce products per page selector and manage the widget settings.","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\/how-to-use-pagination-widget-for-product-archives\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Pagination Widget for Product Archives \u2014 JetWooBuilder | Crocoblock","og_description":"Learn how to apply the JetWooBuilder Products Pagination widget on the archive pages to add WooCommerce products per page selector and manage the widget settings.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/","og_site_name":"Help Center","article_modified_time":"2024-08-09T08:41:12+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/08\/jetwoobuilder-widgets-tab-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/","name":"How to Use Pagination Widget for Product Archives \u2014 JetWooBuilder | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-08-09T08:36:19+00:00","dateModified":"2024-08-09T08:41:12+00:00","description":"Learn how to apply the JetWooBuilder Products Pagination widget on the archive pages to add WooCommerce products per page selector and manage the widget settings.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-use-pagination-widget-for-product-archives\/#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":"How to Use Pagination Widget for Product Archives"}]},{"@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\/45255"}],"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=45255"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=45255"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=45255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}