{"id":33418,"date":"2023-01-17T19:44:34","date_gmt":"2023-01-17T19:44:34","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&#038;p=33418"},"modified":"2025-08-26T17:04:22","modified_gmt":"2025-08-26T17:04:22","slug":"products-list-widget-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/","title":{"rendered":"Products List Widget"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"activation-of-the-products-list-widget-and-adding-it-to-a-page\"><strong>Activation of the Products List Widget and Adding It to a Page<\/strong><\/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>The widget should be activated first in the <strong><em>WordPress Dashboard > Crocoblock > <\/em><\/strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/jetwoobuilder-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetWooBuilder<\/em><\/a><strong><em> > Widgets<\/em><\/strong> tab by enabling the corresponding toggle in the <strong>Global Widgets<\/strong> section.<\/p>\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\">The number of activated widgets may impact the website performance, so only the required ones should be enabled.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-1024x640.webp\" alt=\"products list widget activation\" class=\"wp-image-49215\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The <strong>Products List<\/strong> widget can be added to a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-create-a-shop-page-template\/\"><strong>Shop page<\/strong><\/a> built by the <em>JetWooBuilder<\/em> plugin or any other Elementor plugin by finding it in the search bar and dragging and dropping it to a page.<\/p>\n\n\n\n<p>More details on creating the <strong>Shop pages<\/strong> can be found in the <a href=\"https:\/\/www.youtube.com\/watch?v=nwmGwGevg6I\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetWooBuilder Shop and Archive Page &#8211; Step-By-Step!<\/strong><\/a> video.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget-1024x640.webp\" alt=\"inserting the product list widget\" class=\"wp-image-49219\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/inserting-the-product-list-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After that, the widget with the unrolled <strong><em>Content > Products List<\/em><\/strong> settings tab will appear.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"content-settings\"><strong>Content Settings<\/strong><\/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>Initially, the <strong>Content<\/strong> settings tab is presented by the <strong>Products List<\/strong> section. Other sections to this tab can be added if other plugins are installed and activated.<\/p>\n\n\n\n<p>The <strong>Products List<\/strong> section contains the following fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings-1024x640.webp\" alt=\"products list settings\" class=\"wp-image-49216\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Thumbnail Position<\/strong> \u4e00 a drop-down list to set the &#8220;Left,&#8221; &#8220;Right,&#8221; or &#8220;Top&#8221; position of the thumbnail;<\/li>\n<\/ul>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters 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=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Be aware that the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/jetwoobuilder-dashboard-overview\/#product-thumb-effect\" target=\"_blank\" rel=\"noopener\"><strong>Thumbnails Effect<\/strong><\/a> feature does not work for the <strong>Products List<\/strong> widget.<\/p><\/div><\/div>\n\n\n\n<ul>\n<li><strong>Hidden Products<\/strong> \u4e00 a toggle that, if enabled, shows the products with the &#8220;Hidden&#8221; visibility status;<\/li>\n\n\n\n<li><strong>Make Product Item Clickable<\/strong> \u4e00 a toggle that, if enabled, allows customers to proceed to the product page by clicking on the product item in the list;<\/li>\n\n\n\n<li><strong>Open in New Window<\/strong> \u4e00 a toggle that, if enabled, allows the product page to be opened in a new window;<\/li>\n\n\n\n<li><strong>Use Current Query<\/strong> \u4e00 a toggle that, if enabled, displays products for current categories, tags, and taxonomies. 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\">archive templates<\/a>;<\/li>\n\n\n\n<li><strong>Products Number<\/strong> \u4e00 a text field to enter the number of products that will be shown on the page;\n<ul>\n<li><strong>Query by <\/strong>\u4e00 a field that is displayed if the <strong>Use Current Query<\/strong> toggle is disabled, which allows querying products by different taxonomies, such as Featured, Sale, Tag, etc.;<\/li>\n\n\n\n<li><strong>Exclude by IDs<\/strong> \u4e00 a field that is displayed if the <strong>Use Current Query<\/strong> toggle is disabled, and which allows entering IDs of the products one wants to hide from the list. The &#8220;<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>&#8221; feature can also be set to exclude products related to certain dynamic content. For example, one can exclude the products of a specific author;<\/li>\n\n\n\n<li><strong>Order by<\/strong> \u4e00 a field that is displayed if the <strong>Use Current Query<\/strong> toggle is disabled, and that allows order products by such features based on <em>WooCommerce<\/em> product settings: <strong>Date<\/strong>, <strong>Modified Date<\/strong>, <strong>ID<\/strong>, <strong>Price<\/strong>, <strong>Title<\/strong>, <strong>Random<\/strong>, <strong>Sales<\/strong>, <strong>Top Rated<\/strong>, <strong>Menu Order<\/strong>, <strong>SKU<\/strong>, <strong>Current,<\/strong> and <strong>Stock Status<\/strong>;<\/li>\n\n\n\n<li><strong>Order<\/strong> \u4e00 a drop-down list displayed if the <strong>Use Current Query<\/strong> toggle is disabled, and allows selecting the &#8220;ASC&#8221; (ascending) or &#8220;DESC&#8221; (descending) option to order the products by the field set in the <strong>Order by<\/strong> field;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Title<\/strong> \u4e00 a toggle, if enabled, shows the product\u2019s title and turns on the following settings:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings-1024x640.webp\" alt=\"title toggle of the products list settings\" class=\"wp-image-49212\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/title-toggle-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Enable Permalink<\/strong> \u4e00 a toggle that allows customers to proceed to the product page by clicking the product title;<\/li>\n\n\n\n<li><strong>HTML Tag<\/strong> \u4e00 a drop-down list to select &lt;H1-H6&gt;, &lt;div,&gt; &lt;span,&gt; and &lt;p&gt; HTML tags for the product titles;<\/li>\n\n\n\n<li><strong>Trim Type<\/strong> and <strong>Length <\/strong>\u4e00 a drop-down list and a text field to set the product title length. If selected, the &#8220;Words&#8221; or &#8220;Letters&#8221; <strong>Trim Type<\/strong> allows setting the product title length in words or letters, correspondingly, in the <strong>Length<\/strong> text field. Also, entering the &#8221; -1&#8243; shows the full title, and &#8220;0&#8221; hides it;<\/li>\n\n\n\n<li><strong>Enable Line Wrap <\/strong>\u4e00 a toggle that, if enabled, divides the title\u2019s text into lines to fit the necessary width;<\/li>\n\n\n\n<li><strong>Enable Title Tooltip<\/strong> \u4e00 a toggle that, if enabled, adds the title of the <em>WooCommerce <\/em>tooltips to the product title;<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Thumbnail<\/strong> \u4e00 a toggle that, if enabled, hides the product thumbnail;<\/li>\n\n\n\n<li><strong>Enable Permalink<\/strong> \u4e00 a toggle that, if enabled, allows customers to proceed to the product page by clicking the product picture;<\/li>\n\n\n\n<li><strong>Image Size<\/strong> \u4e00 a drop-down list to set the product image size;<\/li>\n\n\n\n<li><strong>Badges<\/strong> \u4e00 a toggle, if enabled, allows adding badges to the products. Then the <strong>Badge Label<\/strong> field will become activated to type the text on the badges. Also, the %percentage_sale% and %numeric_sale% macros can be used to display a withdrawal of discounts as a percentage or numeric value of the initial price.&nbsp;&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Categories<\/strong> \u4e00 a toggle, if enabled, turns on the <strong>Categories Count<\/strong> field to enter the number of the displayed product categories or set 0 to show the complete categories list;<\/li>\n\n\n\n<li><strong>Price<\/strong> \u4e00 a toggle, if enabled, shows the product price;<\/li>\n\n\n\n<li><strong>Stock Status<\/strong> \u4e00 a toggle, if enabled, shows the product stock status and turns on the following field to type: <strong>In Stock Label<\/strong>, <strong>On Backorder Label<\/strong>, and <strong>Out of Stock Label<\/strong> text fields to enter the corresponding data;<\/li>\n\n\n\n<li><strong>Rating toggle<\/strong> \u4e00 a toggle, if enabled, shows the product rating and turns on the <strong>Empty Rating<\/strong>, which shows\/hides the product rating even if no one has rated it yet;<\/li>\n\n\n\n<li><strong>SKU<\/strong> \u4e00 a toggle, if enabled, shows the product stock-keeping unit;<\/li>\n\n\n\n<li><strong>Add To Cart Button <\/strong>\u4e00 a toggle, if enabled, displays the &#8220;<strong>Add to Cart<\/strong>&#8221; button and turns on the <strong>Quantity Input<\/strong> toggle for adding more than one item to the cart, and the <strong>Use default ajax add to cart styles<\/strong> toggle to enable the default <em>WooCommerce<\/em> styles for the &#8220;<strong>Add to Cart<\/strong>&#8221; AJAX button;<\/li>\n\n\n\n<li><strong>Not Found Message <\/strong>\u4e00 a field for setting the &#8220;not found&#8221; notification by entering the needed text or clicking the &#8220;<strong>Dynamic Tag<\/strong>&#8221; icon to select the text from <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/meta-field-types-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>meta fields<\/strong><\/a>, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-post-type-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Types (CPT)<\/strong><\/a>, etc;<\/li>\n\n\n\n<li><strong>Query ID <\/strong>\u4e00 a field for inserting a unique custom ID to allow server-side filtering. Also,\u00a0 dynamic data by the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetEngine<\/em><\/a>, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetreviews\/jetreviews-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetReviews<\/em><\/a>, and <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetSmartFilters<\/em><\/a> plugins can be added by pressing the &#8220;<strong>Dynamic Tag<\/strong>&#8221; icon.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"content-settings-displayed-if-other-plugins-are-installed-and-activated\"><strong>Content Settings Displayed if Other Plugins are Installed and Activated<\/strong><\/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<h3 class=\"wp-block-heading\" id=\"jetpopup-plugin\"><strong>JetPopup plugin<\/strong><\/h3>\n\n\n\n<p>If the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/jetpopup-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetPopup<\/em><\/a> plugin is installed and activated, the following settings will appear in the <strong><em>Content > Products List<\/em><\/strong> settings tab:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated-1024x640.webp\" alt=\"settings displayed if jetpopup installed and activated\" class=\"wp-image-49213\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/settings-displayed-if-jetpopup-installed-and-activated.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Show Quick View<\/strong> \u4e00 a toggle that adds the &#8220;<strong>Quick View<\/strong>&#8221; button that opens the <strong>Quick View<\/strong> pop-up created with the <em>JetPopup<\/em> plugin. For more details about how to make such a pop-up, 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\">How to Create a Product Quick View Popup<\/a> tutorial should be read;<\/li>\n\n\n\n<li><strong>Quick View Button Order <\/strong>\u4e00 a field that allows setting the order of the available pop-up buttons (e.g., &#8220;<strong>Quick View<\/strong>,&#8221; &#8220;<strong>Add to Compare<\/strong>,&#8221; and &#8220;<strong>Add to Wishlist<\/strong>&#8220;, except the &#8220;<strong>Add to Car<\/strong>t&#8221; button, which is always first). Also, the order can be set for the<strong> Desktop<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> views.<\/li>\n<\/ul>\n\n\n\n<p>After enabling the <strong>Show Quick View <\/strong>toggle in the <strong>Products List<\/strong> section, the <strong>Quick View<\/strong> section will appear. This section is presented by the following fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings-1024x640.webp\" alt=\"quick view section of the products list settings\" class=\"wp-image-49214\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/quick-view-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Button Icon<\/strong> \u4e00 a field that allows selecting the icon for the corresponding button from the library or uploading an SVG file;<\/li>\n\n\n\n<li><strong>Button Label Text <\/strong>\u4e00 a text field for entering the text to be displayed on the corresponding button;<\/li>\n\n\n\n<li><strong>Use Icon? <\/strong>\u4e00 a toggle that allows using a specific icon and setting its position in the newly appeared <strong>Icon Position<\/strong> drop-down list.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"jetengine-plugin\"><strong>JetEngine plugin<\/strong><\/h3>\n\n\n\n<p>If the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetEngine<\/em><\/a> plugin is installed and activated, the <strong>Custom Query<\/strong> section will be added to the <strong>Content <\/strong>settings tab:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings-1024x640.webp\" alt=\"custom query section of the products list settings\" class=\"wp-image-49220\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/custom-query-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Enable Custom Query <\/strong>\u4e00 a toggle that allows using a specific query;<\/li>\n\n\n\n<li><strong>Custom Query<\/strong> \u4e00 a drop-down list that allows selecting the needed query. Also, a <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 can be chosen here.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"jetcomparewishlist-plugin\"><strong>JetCompareWishlist plugin<\/strong><\/h3>\n\n\n\n<p>If the<em> <\/em><a href=\"https:\/\/crocoblock.com\/knowledge-base\/article-category\/jetcomparewishlist\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetCompareWishlist<\/em><\/a> plugin is installed and activated, and the <strong><em>WordPress Dashboard > Crocoblock > JetPlugins Setting > JetCompareWishlist > Compare Settings > <\/em><\/strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetcomparewishlist\/how-to-create-a-page-with-products-comparison\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Enable Compare<\/em><\/strong><\/a> toggle is enabled, the <strong>Compare<\/strong> sections will be added to the <strong>Content <\/strong>settings tab.<\/p>\n\n\n\n<p>More details about configuring the settings of a page for WooCommerce products comparison can be found in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetcomparewishlist\/how-to-create-a-page-with-products-comparison\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Create a Page with Products Comparison<\/strong><\/a><strong> <\/strong>tutorial.<\/p>\n\n\n\n<p>Also, if the <strong><em>WordPress Dashboard > Crocoblock > JetPlugins Setting > JetCompareWishlist > Wishlist Settings > <\/em><\/strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetcomparewishlist\/jetcomparewishlist-how-to-enable-wishlist-functionality-for-woocommerce-products\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>Enable Wishlist<\/em><\/strong><\/a><strong><em> <\/em><\/strong>toggle is enabled, the <strong>Wishlist<\/strong> sections will be added to the <strong>Content <\/strong>settings tab. More details about configuring the settings of a page for a <em>WooCommerce<\/em> product wishlist can be found in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetcomparewishlist\/how-to-create-a-page-with-a-wishlist-wishlist-widget-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Create a Wishlist Page<\/strong><\/a><strong> <\/strong>tutorial.<\/p>\n\n\n\n<p>The following fields are included in the <strong>Compare<\/strong> section tab:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings-1024x640.webp\" alt=\"compare section of the products list settings\" class=\"wp-image-49209\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/compare-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Compare Button<\/strong> \u4e00 a toggle that adds a compare button to the list;<\/li>\n\n\n\n<li><strong>Icon<\/strong> \u4e00 a toggle that enables fields to insert the needed icon from the library or upload an SVG file;\n<ul>\n<li><strong>Icon Position<\/strong> \u4e00 a drop-down list to set the &#8220;Left,&#8221; &#8220;Top,&#8221; &#8220;Right,&#8221; &#8220;Bottom&#8221; positions;<\/li>\n\n\n\n<li><strong>Icon<\/strong> \u4e00 a field to insert the needed icon from the library or upload an SVG file.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>The appearance of the standard button and the button view after users add the product to the compare page can be set by hitting the &#8220;<strong>Normal<\/strong>&#8221; and &#8220;<strong>Added<\/strong>&#8221; buttons. In both cases, the <strong>Icon<\/strong> and <strong>Label<\/strong> fields can be configured:<\/p>\n\n\n\n<ul>\n<li><strong>Label<\/strong> \u4e00 a text field insert a text to be displayed on the &#8220;<strong>Compare<\/strong>&#8221; button;<\/li>\n\n\n\n<li><strong>Order<\/strong> \u4e00 a field that allows setting the order of the available buttons, except the &#8220;<strong>Add to Cart<\/strong>&#8221; or &#8220;<strong>Select Options<\/strong>&#8221; button, which are always first (depending on the <em>WooCommerce<\/em> product type). By default, the &#8220;<strong>Compare<\/strong>&#8221; button is added under the &#8220;<strong>Add to Card<\/strong>&#8221; or &#8220;<strong>Select Options<\/strong>&#8221; buttons. Also, setting the order for the <strong>Desktop<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> views is available.<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Wishlist<\/strong> section is presented by fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings-1024x640.webp\" alt=\"wishlist section of the products list settings\" class=\"wp-image-49211\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/wishlist-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Wishlist Button<\/strong> \u4e00 a toggle that adds a wishlist button to the list;<\/li>\n\n\n\n<li><strong>Icon<\/strong> \u4e00 a toggle that enables fields to insert the needed icon from the library or upload an SVG file;\n<ul>\n<li><strong>Icon Position<\/strong> \u4e00 a drop-down list to set the &#8220;Left,&#8221; &#8220;Top,&#8221; &#8220;Right,&#8221; &#8220;Bottom&#8221; position;<\/li>\n\n\n\n<li><strong>Icon<\/strong> \u4e00 a field to insert the needed icon from the library or upload an SVG file.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>The appearance of the standard button and the button view after users add the product to the wishlist page can be set by hitting the &#8220;<strong>Normal<\/strong>&#8221; and &#8220;<strong>Added<\/strong>&#8221; buttons. In both cases, the <strong>Icon<\/strong> and <strong>Label<\/strong> fields can be configured:<\/p>\n\n\n\n<ul>\n<li><strong>Label<\/strong> \u4e00 a text field to insert a text to be displayed on the &#8220;<strong>Wishlist<\/strong>&#8221; button;<\/li>\n\n\n\n<li><strong>Order<\/strong> \u4e00 a field that allows setting the order of the available buttons, except the &#8220;<strong>Add to Cart<\/strong>&#8221; button, which is always first. By default, the &#8220;<strong>Wishlist<\/strong>&#8221; button is added under the &#8220;<strong>Compare<\/strong>&#8221; button. Also, setting the order for the <strong>Desktop<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile<\/strong> views is available.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-settings\"><strong>Style Settings<\/strong><\/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>The <strong>Style<\/strong> settings tab is presented by the <strong>List Item<\/strong>, <strong>Thumbnails<\/strong>, <strong>Badges<\/strong>, <strong>Content<\/strong>, <strong>Title<\/strong>, <strong>Categories<\/strong>, <strong>Price<\/strong>, <strong>Stock Statuses<\/strong>, <strong>Rating<\/strong>, <strong>SKU<\/strong>, <strong>Button<\/strong>, <strong>Quick View<\/strong>, and <strong>Not Found Message<\/strong> groups according to the items they manage.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings-1024x640.webp\" alt=\"style tab of the products list settings\" class=\"wp-image-49271\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/01\/style-tab-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Initially, after clicking the <strong>Style<\/strong> tab, the <strong>List Item<\/strong> section will be unfolded by default. The following fields are included:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings-1024x640.webp\" alt=\"ist item section of the products list settings\" class=\"wp-image-49218\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/list-item-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Vertical Alignment<\/strong> \u4e00 a drop-down list to set the listing items on the &#8220;Top,&#8221; &#8220;Middle,&#8221; &#8220;Bottom,&#8221; &#8220;Stretch&#8221;;<\/li>\n\n\n\n<li><strong>Space Between<\/strong> \u4e00 a field to set the distance between the listing items;<\/li>\n\n\n\n<li><strong>Normal<\/strong> and <strong>Hover<\/strong> \u4e00 buttons to configure the needed settings for the item in the normal mode and on hovering, correspondingly;<\/li>\n\n\n\n<li><strong>Background Color<\/strong> \u4e00 a field to set the item background\u2019s color;<\/li>\n\n\n\n<li><strong>Box Shadow<\/strong> \u4e00 a field to set the item background\u2019s color;<\/li>\n\n\n\n<li><strong>Border Type<\/strong>, <strong>Border Radius<\/strong>, <strong>Padding<\/strong> \u4e00 fields to configure the corresponding settings.<\/li>\n<\/ul>\n\n\n\n<p>Also, other sections allow configuring the corresponding<strong> Width<\/strong>, <strong>Background Color<\/strong>, <strong>Box Shadow<\/strong>, <strong>Border Type<\/strong>, <strong>Border Radius<\/strong>, <strong>Padding<\/strong>, and specific settings such as:<\/p>\n\n\n\n<ul>\n<li>The <strong>Thumbnail<\/strong> section allows setting the <strong>CSS Filters<\/strong> options (e.g., &#8220;Blur,&#8221; &#8220;Brightness,&#8221; &#8220;Contrast,&#8221; and more);<\/li>\n\n\n\n<li>The <strong>Badges<\/strong> section has the &#8220;Inline&#8221; and &#8220;Block&#8221; <strong>Display Type<\/strong> and <strong>Custom Size<\/strong> settings;<\/li>\n\n\n\n<li>The <strong>Title<\/strong> section has the &#8220;Inline&#8221; and &#8220;Block&#8221; <strong>Display Type<\/strong> settings;<\/li>\n\n\n\n<li>The <strong>Price<\/strong> section allows setting the sale price position above or below the regular price: in this case, the &#8220;Block&#8221; <strong>Display Type<\/strong> option should be selected and the needed position set in the <strong>Sale Price Position<\/strong> drop-down list;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings-1024x640.webp\" alt=\"price section of the products list settings\" class=\"wp-image-49217\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/price-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced-settings\"><strong>Advanced Settings<\/strong><\/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>The <strong>Advanced<\/strong> settings tab includes the <strong>Layout<\/strong>, <strong>Dynamic Visibility<\/strong>, <strong>JetPopup<\/strong> (if the corresponding plugin is installed and activated), <strong>Motion Effect<\/strong>, <strong>Transform<\/strong>, <strong>Background<\/strong>, <strong>Mask<\/strong>, and more.<\/p>\n\n\n\n<p>The <strong>Advanced<\/strong> settings allow the customization of the <strong>Margin<\/strong>, <strong>Padding<\/strong>, <strong>Width<\/strong>, <strong>Position<\/strong>, <strong>Z-Index<\/strong>, <strong>CSS ID<\/strong>, <strong>CSS Class<\/strong> settings, and more.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings-1024x640.webp\" alt=\"advanced section of the products list settings\" class=\"wp-image-49210\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/advanced-section-of-the-products-list-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s it. Now you know how to display <em>WooCommerce<\/em> products in an eye-catching way with the help of the <strong>Products List <\/strong>widget of the <em>JetWooBuilder<\/em> plugin for Elementor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial overviews the Products List widget settings of the JetWooBuilder plugin aiming at showcasing the WooCommerce products in attractive list layouts.<\/p>\n","protected":false},"author":12,"template":"","format":"standard","builder-category":[],"feature-category":[539],"article-category":[524],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Products List Widget Overview - Help Center<\/title>\n<meta name=\"description\" content=\"Learn how to manage the Products List widget of the JetWooBuilder plugin for Elementor to showcase the WooCommerce products and their attributes in different list layouts (simple and variable).\" \/>\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-list-widget-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Products List Widget Overview - Help Center\" \/>\n<meta property=\"og:description\" content=\"Learn how to manage the Products List widget of the JetWooBuilder plugin for Elementor to showcase the WooCommerce products and their attributes in different list layouts (simple and variable).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-26T17:04:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-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=\"12 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-list-widget-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/\",\"name\":\"Products List Widget Overview - Help Center\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-01-17T19:44:34+00:00\",\"dateModified\":\"2025-08-26T17:04:22+00:00\",\"description\":\"Learn how to manage the Products List widget of the JetWooBuilder plugin for Elementor to showcase the WooCommerce products and their attributes in different list layouts (simple and variable).\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-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 List Widget\"}]},{\"@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 List Widget Overview - Help Center","description":"Learn how to manage the Products List widget of the JetWooBuilder plugin for Elementor to showcase the WooCommerce products and their attributes in different list layouts (simple and variable).","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-list-widget-overview\/","og_locale":"en_US","og_type":"article","og_title":"Products List Widget Overview - Help Center","og_description":"Learn how to manage the Products List widget of the JetWooBuilder plugin for Elementor to showcase the WooCommerce products and their attributes in different list layouts (simple and variable).","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/","og_site_name":"Help Center","article_modified_time":"2025-08-26T17:04:22+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/products-list-widget-activation-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/","name":"Products List Widget Overview - Help Center","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-01-17T19:44:34+00:00","dateModified":"2025-08-26T17:04:22+00:00","description":"Learn how to manage the Products List widget of the JetWooBuilder plugin for Elementor to showcase the WooCommerce products and their attributes in different list layouts (simple and variable).","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-widget-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/products-list-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 List Widget"}]},{"@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\/33418"}],"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=33418"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=33418"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=33418"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=33418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}