{"id":33663,"date":"2023-01-26T18:36:47","date_gmt":"2023-01-26T18:36:47","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&#038;p=33663"},"modified":"2026-02-12T11:40:49","modified_gmt":"2026-02-12T11:40:49","slug":"products-grid-widget-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/","title":{"rendered":"Products Grid Widget Overview"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"products-grid-tab\">Products Grid Tab<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>In the <strong>Products Grid <\/strong>tab, there are such settings:<\/p>\n\n\n\n<ul>\n<li><strong>Presets. <\/strong>The options from this drop-down menu help you fill the Products Grid with previously defined settings in just a few seconds;<\/li>\n\n\n\n<li><strong>Columns. <\/strong>Set the number of columns for the <strong>Desktop<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> view;<\/li>\n\n\n\n<li><strong>Hover on Touch. <\/strong>Enables the hover effect;<\/li>\n\n\n\n<li><strong>Equal Columns Height<\/strong>. If products have different pictures size and text lengths, you can enable this toggle to level items;<\/li>\n\n\n\n<li><strong>Gap between rows<\/strong>. Enable to add the extra gap between rows in the grid;<\/li>\n\n\n\n<li><strong>Hidden Products<\/strong>. If enabled, it shows the products with the \u201cHidden\u201d <strong>Catalog visibility <\/strong>status. You can set this status by the product editing or quick editing;<\/li>\n\n\n\n<li><strong>Make Product Item Clickable<\/strong>. If you enable this toggle, customers can proceed to the product page by clicking on the product item in the grid;<\/li>\n\n\n\n<li><strong>Open in New Window<\/strong>. With this toggle enabled, the product page will be opened in a new window;<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/products-grid-tab-settings-1.png\" alt=\"products grid tab settings\">\n\n\n\n<ul>\n<li><strong>Use Current Query<\/strong>. This option works only on the product <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-and-set-a-product-archive-template\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>archive templates<\/strong><\/a> and allows you to display products for current categories, tags, and taxonomies. For example, on the \u201cWomen\u201d category page, this feature will show only women\u2019s clothes;<\/li>\n\n\n\n<li><strong>Products Number<\/strong>. Enter the number of products that will be shown on the page;<\/li>\n\n\n\n<li><strong>Query by. <\/strong>You can query products by different taxonomies, such as <strong>Featured<\/strong>, <strong>Sale<\/strong>, <strong>Tag<\/strong>, etc.;<\/li>\n\n\n\n<li><strong>Exclude by IDs<\/strong>. Enter IDs of the products you want to hide from the grid. You can also set the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/dynamic-tags-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Tags<\/strong><\/a> feature to exclude products related to certain dynamic content. For example, you can exclude the products of the specific seller;<\/li>\n\n\n\n<li><strong>Order by<\/strong>. You can order products by such features based on WooCommerce product settings: Date; <\/li>\n\n\n\n<li>Modified Date; ID; Price; Title; Random; Sales; Top Rated; Menu Order; SKU; Current; and Stock Status.<\/li>\n\n\n\n<li><strong>Order<\/strong>. Select the \u201cASC\u201d (ascending) or \u201cDESC\u201d (descending) option. For example, if you select the \u201cTitle\u201d <strong>Order by<\/strong> and \u201cASC\u201d <strong>Order<\/strong>, the grid will show products in alphabetical order. If you select the \u201cDate\u201d <strong>Order by<\/strong> and \u201cDESC\u201d <strong>Order<\/strong>, products will be displayed from the newest to the oldest added;<\/li>\n<\/ul>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">Be aware that all query settings in the <strong>Products List<\/strong> tab are not available if you apply the <strong>Custom Query<\/strong> to the widget.<\/p><\/div><\/div>\n\n\n\n<ul>\n<li><strong>Title<\/strong>. Disable this toggle to hide the product title;<\/li>\n\n\n\n<li><strong>Enable Permalink<\/strong>. If enabled, customers can proceed to the product page by clicking the product title;<\/li>\n\n\n\n<li><strong>HTML Tag<\/strong>. You can select &lt;<strong>H1-H6<\/strong>&gt;, &lt;<strong>div<\/strong>,&gt; &lt;<strong>span<\/strong>,&gt; and &lt;<strong>p<\/strong>&gt; HTML tags for the product titles;<\/li>\n\n\n\n<li><strong>Trim Type<\/strong> and <strong>Length<\/strong>. With these two features, you can set the product title length. Select the \u201cWords\u201d or \u201cLetters\u201d <strong>Trim Type <\/strong>and enter the number of words or letters that will be visible in the grid item. Set -1 to show the full title and 0 to hide it;<\/li>\n\n\n\n<li><strong>Enable Line Wrap. <\/strong>If disabled the full title is shown, if enabled the title is wrapped on the end of the line;<\/li>\n\n\n\n<li><strong>Enable Title Tooltip<\/strong>. If enabled, it adds the WooCommerce tooltips (e.g., \u201cSale!\u201d) to the product title;<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/products-grid-query-settings.png\" alt=\"products grid query settings\">\n\n\n\n<ul>\n<li><strong>Enable Thumbnail Effect<\/strong>. This option shows the second picture in the product gallery on hover;<\/li>\n\n\n\n<li><strong>Enable Thumbnail Permalink<\/strong>. If enabled, customers can proceed to the product page by clicking the product picture;<\/li>\n\n\n\n<li><strong>Image Size<\/strong>. Set the product image size in this drop-down menu;<\/li>\n\n\n\n<li><strong>Badges. <\/strong>Enable to show the badges;<\/li>\n\n\n\n<li><strong>Badge Label.<\/strong> Enter any text that will be shown in badges. Use the %percentage_sale% and %numeric_sale% macros to display a withdrawal of discounts as a percentage or numeric of the initial price;<\/li>\n\n\n\n<li><strong>Short Description. <\/strong>Enable the toggle to show the product short description;<\/li>\n\n\n\n<li><strong>Trim Type<\/strong> and <strong>Length<\/strong>. Set the product short description length here. Select the \u201cWords\u201d or \u201cLetters\u201d <strong>Trim Type <\/strong>and enter the number of words or letters that will be visible in the grid item. Set -1 to show the full title and 0 to hide it;<\/li>\n\n\n\n<li><strong>Categories<\/strong>. Disable this toggle to hide the product categories;<\/li>\n\n\n\n<li><strong>Categories Count<\/strong>. Enter the number of the displayed product categories or set 0 to show the full categories list;<\/li>\n\n\n\n<li><strong>Tags. <\/strong>Disable this toggle to hide the product tags;<\/li>\n\n\n\n<li><strong>Tags Count. <\/strong>Enter the number of the displayed product tags or set 0 to show the full categories list;<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/enable-thumbnail-effect-1.png\" alt=\"enable thumbnail effect\">\n\n\n\n<ul>\n<li><strong>Price. <\/strong>Disable this toggle to hide the product price;<\/li>\n\n\n\n<li><strong>Stock Status<\/strong>. Disable this toggle to hide the product stock status;<\/li>\n\n\n\n<li><strong>Rating<\/strong>. Disable this toggle to hide the product rating;<\/li>\n\n\n\n<li><strong>Empty Rating<\/strong>. If you enable this toggle, it will show the product rating even if no one has rated it yet;<\/li>\n\n\n\n<li><strong>SKU<\/strong>. Enable this toggle if you want to show the product stock-keeping unit;<\/li>\n\n\n\n<li><strong>Add To Cart Button<\/strong>. This toggle displays the <strong>\u201cAdd to Cart\u201d <\/strong>button;<\/li>\n\n\n\n<li><strong>Quantity Input<\/strong>. With this feature, users will be able to add more than one item to the cart;<\/li>\n\n\n\n<li><strong>Use default ajax add to cart styles<\/strong>. This option enables default WooCommerce styles for the <strong>\u201cAdd to Cart\u201d<\/strong> AJAX button (<strong>\u201cLoading\u201d<\/strong> and <strong>\u201cAdded\u201d<\/strong> statements);<\/li>\n\n\n\n<li><strong>Not Found Message<\/strong>. Here you can set the \u201cnot found\u201d notification. This message appears, for example, if you set the <strong>Products Grid <\/strong>widget on the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/woocommerce-jetwoobuilder-settings-how-to-create-and-set-a-search-page-template\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Search Archive Page<\/strong><\/a> template. Instead of the regular text, you can use a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-using-the-pre-designed-section-templates-to-display-dynamic-content\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Tag<\/strong><\/a><strong> <\/strong>or enter a <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/shortcode-block\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>shortcode<\/strong><\/a>;<\/li>\n\n\n\n<li><strong>Query ID<\/strong>. Give the Query a unique custom ID to allow server-side filtering. You can use a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-using-the-pre-designed-section-templates-to-display-dynamic-content\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Tag<\/strong><\/a> with this option;<\/li>\n\n\n\n<li><strong>Show Quick View<\/strong>. Adds the <strong>\u201cQuick View\u201d <\/strong>button that opens the Quick View pop-up, created with the <em>JetPopup <\/em>plugin. To learn how to create such a pop-up, proceed to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-product-quick-view-with-jetwoobuilder-and-jetpopup\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Create a Product Quick View Popup<\/strong><\/a> tutorial;<\/li>\n\n\n\n<li><strong>Quick View Button Order<\/strong>. If you have more than one button (<strong>\u201cQuick View,\u201d \u201cAdd to Compare,\u201d<\/strong> and <strong>\u201cAdd to Wishlist\u201d<\/strong>), you can set their order. Be aware that this feature doesn\u2019t affect the <strong>\u201cAdd to Cart\u201d <\/strong>button that is always first. You can also set the order for the <strong>Desktop<\/strong>,<strong> Tablet<\/strong>, and <strong>Mobile <\/strong>view.<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/quick-view-button.png\" alt=\"quick view button\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"quick-view-tab\">Quick View Tab<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To set the <strong>\u201cQuick View\u201d <\/strong>button settings, enable the <strong>Show Quick View <\/strong>toggle in the <strong>Products Grid <\/strong>tab, proceed to the <strong>Quick View <\/strong>tab, and open it.<\/p>\n\n\n\n<p>You can change the <strong>Button Icon <\/strong>and <strong>Button Label Text<\/strong>, disable the icon with the <strong>Use Icon? <\/strong>toggle, and set the \u201cLeft,\u201d \u201cTop,\u201d \u201cRight,\u201d or \u201cBottom\u201d <strong>Icon Position<\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/quick-view-settings-tab-1-1.png\" alt=\"quick view settings tab\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"compare-tab\">Compare Tab<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>To customize the <strong>\u201cAdd to Compare\u201d<\/strong> and <strong>\u201cAdd to Wishlist\u201d <\/strong>buttons, you need the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/article-category\/jetcomparewishlist\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetCompareWishlist<\/em><\/a><em> <\/em>plugin.<\/p>\n\n\n\n<p>Proceed to the <strong>Compare <\/strong>tab and enable the <strong>Compare Button <\/strong>toggle.<\/p>\n\n\n\n<p>You can disable the button <strong>Icon<\/strong> and set the \u201cLeft,\u201d \u201cTop,\u201d \u201cRight,\u201d or \u201cBottom\u201d <strong>Icon Position<\/strong>.<\/p>\n\n\n\n<p>You can also customize the appearance of the standard button, and the button view after users add the product to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-page-with-products-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Product Comparison Page<\/strong><\/a>. For that, hit the <strong>\u201cNormal\u201d <\/strong>and \u201c<strong>Added\u201d <\/strong>buttons to switch the settings. In both tabs, you can set the <strong>Icon <\/strong>and <strong>Label<\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/compare-settings-tab-1.png\" alt=\"compare button tab settings\">\n\n\n\n<p>Be aware that in the <strong>Added <\/strong>settings tab, you can enable the <strong>Use as Remove Button <\/strong>toggle, so customers can remove the product from the Compare Page by clicking on the same button.<\/p>\n\n\n\n<p>If you have more than one button (<strong>\u201cQuick View,\u201d \u201cAdd to Compare,\u201d<\/strong> and <strong>\u201cAdd to Wishlist\u201d<\/strong>), you can set their <strong>Order<\/strong>. Be aware that this feature doesn\u2019t affect the <strong>\u201cAdd to Cart\u201d <\/strong>button that is always first. You can also set the order for the <strong>Desktop<\/strong>,<strong> Tablet<\/strong>, and <strong>Mobile <\/strong>view.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/use-as-remove-button-1-1.png\" alt=\"use as remove button\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wishlist-tab\">Wishlist Tab<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Proceed to the <strong>Wishlist <\/strong>tab and enable the <strong>Wishlist Button <\/strong>toggle.<\/p>\n\n\n\n<p>You can disable the button <strong>Icon<\/strong> and set the \u201cLeft,\u201d \u201cTop,\u201d \u201cRight,\u201d or \u201cBottom\u201d <strong>Icon Position<\/strong>.<\/p>\n\n\n\n<p>You can also customize the appearance of the standard button and the button view after users add the product to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-page-with-a-wishlist-wishlist-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Wishlist Page<\/strong><\/a>. For that, hit the <strong>\u201cNormal\u201d <\/strong>and \u201c<strong>Added\u201d <\/strong>buttons to switch the settings. In both tabs, you can set the <strong>Icon <\/strong>and <strong>Label<\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/wishlist-settings-tab-1.png\" alt=\"wishlist button tab settings\">\n\n\n\n<p>Be aware that in the <strong>Added <\/strong>settings tab, you can enable the <strong>Use as Remove Button <\/strong>toggle, so customers can remove the product from the Wishlist Page by clicking on the same button.<\/p>\n\n\n\n<p>If you have more than one button (<strong>\u201cQuick View,\u201d \u201cAdd to Compare,\u201d<\/strong> and <strong>\u201cAdd to Wishlist\u201d<\/strong>), you can set their <strong>Order<\/strong>. Be aware that this feature doesn\u2019t affect the <strong>\u201cAdd to Cart\u201d <\/strong>button that is always first. You can also set the order for the <strong>Desktop<\/strong>,<strong> Tablet<\/strong>, and <strong>Mobile <\/strong>view.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/use-as-remove-button-toggle-enabled-1.png\" alt=\"use as remove button toggle enabled\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"custom-query\">Custom Query<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Move to the <strong>Custom Query <\/strong>tab and switch on the <strong>Enable Custom Query <\/strong>toggle. You can apply the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-query-builder-wc-product-query-type\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WC Product Query<\/strong><\/a> created with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-query-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetEngine Query Builder<\/strong><\/a> feature here.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/custom-query-settings-tab-1-1.png\" alt=\"custom query settings tab\">\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\" id=\"carousel-tab\">Carousel Tab<\/h2>\n\n\n\n<p>Go to the <strong>Carousel <\/strong>tab and activate the <strong>Enable Carousel <\/strong>toggle.<\/p>\n\n\n\n<p>There are such settings:<\/p>\n\n\n\n<ul>\n<li><strong>Direction. <\/strong>Set the \u201cVertical\u201d or \u201cHorizontal\u201d direction of the carousel scrolling;<\/li>\n\n\n\n<li><strong>Slides Min Height<\/strong>. Set the slides minimal height for the <strong>Mobile<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> view;<\/li>\n\n\n\n<li><strong>Slide Overflow<\/strong> and <strong>Overflow. <\/strong>If you enable the <strong>Slide Overflow<\/strong> toggle and, for example, set the \u201c0.5\u201d in the <strong>Overflow <\/strong>field, the carousel will show half of the extra product slide;<\/li>\n\n\n\n<li><strong>Slides to Scroll. <\/strong>Here, you can set the number of slides to scroll for the <strong>Mobile<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> views;<\/li>\n\n\n\n<li><strong>Space Between. <\/strong>Enter the number of pixels between the slides. You can set the different numbers for the <strong>Mobile<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> views;<\/li>\n\n\n\n<li><strong>Navigation<\/strong>. This option enables the arrows by clicking on which customers can scroll the slides;<\/li>\n\n\n\n<li><strong>Prev Arrow<\/strong> and <strong>Next Arrows<\/strong>. Here you can set the custom icons for the arrows. Note that you can upload only SVG format icons;<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/carousel-navigation.png\" alt=\"carousel navigation\">\n\n\n\n<ul>\n<li><strong>Pagination<\/strong>. Shows the dots on the carousel bottom that indicate the different slides. By clicking the dot, users can move to the needed slide;<\/li>\n\n\n\n<li><strong>Dynamic Bullets<\/strong>. This option is available if <strong>Pagination <\/strong>is enabled;<\/li>\n\n\n\n<li><strong>Autoplay. <\/strong>Makes scroll slides automatically;<\/li>\n\n\n\n<li><strong>Delay.<\/strong> Defines the frequency of the automatic slide scrolling. For example, if you set \u201c500,\u201d slides will scroll too often, and if you set \u201c5000,\u201d slides will scroll less frequently;<\/li>\n\n\n\n<li><strong>Disable on Interaction. <\/strong>After users interact with the carousel, it disables autoplay, and slides freeze until the page isn\u2019t reloaded;<\/li>\n\n\n\n<li><strong>Loop. <\/strong>If enabled, the carousel scrolls the slides in the loop, and if disabled, then when the last slide is reached, the carousel shows the slides in reverse order;<\/li>\n\n\n\n<li><strong>Animation Speed. <\/strong>Defines the speed of the slide\u2019s movement. For example, if you set \u201c100,\u201d the slides will scroll sharply, and if you set \u201c1000,\u201d the animation will be smoother.<\/li>\n\n\n\n<li><strong>Simulate Touch<\/strong>. It allows you to scroll the slides by holding down the cursor on the <strong>Desktop <\/strong>devices;<\/li>\n\n\n\n<li><strong>Free Mode <\/strong>and <strong>Velocity. <\/strong>The <strong>Velocity <\/strong>option defines the speed of slide scrolling in the free mode;<\/li>\n\n\n\n<li><strong>Centered Slides<\/strong>. If the <strong>Slide Overflow <\/strong>option is toggled on, the <strong>Centered Slides<\/strong> option allocates overflow on both sides of the carousel.<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/carousel-pagination.png\" alt=\"carousel pagination\">\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn about how to use Products Grid widget from JetWooBuilder to showcase WooCommerce products on the Shop Page.<\/p>\n","protected":false},"author":12,"template":"","format":"video","builder-category":[],"feature-category":[539],"article-category":[523],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Products Grid Widget Overview \u2014 JetWooBuilder | Crocoblock<\/title>\n<meta name=\"description\" content=\"This tutorial provides an overview of the Products Grid widget from the JetWooBuilder plugin and explains what steps you need to take to use it on the Shop page of the WordPress website.\" \/>\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\/features\/products-grid-widget-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Products Grid Widget Overview \u2014 JetWooBuilder | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"This tutorial provides an overview of the Products Grid widget from the JetWooBuilder plugin and explains what steps you need to take to use it on the Shop page of the WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-12T11:40:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/products-grid-tab-settings-1.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=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/\",\"name\":\"Products Grid Widget Overview \u2014 JetWooBuilder | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-01-26T18:36:47+00:00\",\"dateModified\":\"2026-02-12T11:40:49+00:00\",\"description\":\"This tutorial provides an overview of the Products Grid widget from the JetWooBuilder plugin and explains what steps you need to take to use it on the Shop page of the WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Features\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Products Grid Widget Overview\"}]},{\"@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 Widget Overview \u2014 JetWooBuilder | Crocoblock","description":"This tutorial provides an overview of the Products Grid widget from the JetWooBuilder plugin and explains what steps you need to take to use it on the Shop page of the WordPress website.","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\/features\/products-grid-widget-overview\/","og_locale":"en_US","og_type":"article","og_title":"Products Grid Widget Overview \u2014 JetWooBuilder | Crocoblock","og_description":"This tutorial provides an overview of the Products Grid widget from the JetWooBuilder plugin and explains what steps you need to take to use it on the Shop page of the WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/","og_site_name":"Help Center","article_modified_time":"2026-02-12T11:40:49+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/products-grid-tab-settings-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/","name":"Products Grid Widget Overview \u2014 JetWooBuilder | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-01-26T18:36:47+00:00","dateModified":"2026-02-12T11:40:49+00:00","description":"This tutorial provides an overview of the Products Grid widget from the JetWooBuilder plugin and explains what steps you need to take to use it on the Shop page of the WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-grid-widget-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Features","item":"https:\/\/crocoblock.com\/knowledge-base\/features\/"},{"@type":"ListItem","position":3,"name":"Products Grid Widget Overview"}]},{"@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\/features\/33663"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/features"}],"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=33663"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=33663"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=33663"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=33663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}