{"id":123513,"date":"2023-08-08T12:30:22","date_gmt":"2023-08-08T07:00:22","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=123513"},"modified":"2023-08-08T17:15:45","modified_gmt":"2023-08-08T11:45:45","slug":"product-listing-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/product-listing-widget-settings-overview\/","title":{"rendered":"Product Listing Widget Settings Overview"},"content":{"rendered":"\n<p>As an online store owner, showcasing your products effectively is crucial to boosting sales and engaging customers. A well-designed product listing page offers several benefits, such as easy navigation for customers to explore your product catalog, compare different items, and make informed purchase decisions.<\/p>\n\n\n\n<p>With the Product Listing widget from The Plus Addons for Elementor, you can show WooCommerce products in beautiful and engaging layouts.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pluslisting\/#client-logos-wgts\u00a0?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>This is a Premium feature, and you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Product Listing widget is activated, to verify this visit Plus Settings \u2192 and Search for Product Listing and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Tutorial : Manage WooCommerce Product Listing and Carousal widget of The Plus Addons for Elementor\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/UqJ9VNTeqA8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Product Listing Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1918\" height=\"913\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate.png\" alt=\"product listing activate\" class=\"wp-image-123516\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate.png 1918w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate-768x366.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate-1536x731.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-activate-600x286.png 600w\" sizes=\"(max-width: 1918px) 100vw, 1918px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multiple Product Listing Types <\/strong>&nbsp;&#8211; You can choose from multiple product listing types. Normal Page, Archive Page, Single Page Related Products, Search Listing, Upsells and Cross Sells.&nbsp;<\/li>\n\n\n\n<li><strong>Multiple Style Options <\/strong>&#8211; You can choose from multiple pre-defined styles.<\/li>\n\n\n\n<li><strong>Custom Skin<\/strong> &#8211; You can use your custom design as the product skin.&nbsp;<\/li>\n\n\n\n<li><strong>4 Layouts <\/strong>&#8211; You can choose from four layout types Grid, Masonry, Metro and Carousel.<\/li>\n\n\n\n<li><strong>Show Products by Category <\/strong>&#8211; You can show products by category.<\/li>\n\n\n\n<li><strong>Include and Exclude by Product Id<\/strong> &#8211; You can include and exclude products by product id.<\/li>\n\n\n\n<li><strong>Offset Posts<\/strong> &#8211; You can easily hide products from the beginning of the listing by setting an offset number.<\/li>\n\n\n\n<li><strong>Order Products by Different Parameters<\/strong> &#8211; You can order products by different parameters like id, date, author, title and more.<\/li>\n\n\n\n<li><strong>Show Products by Different Status<\/strong> &#8211; You can show products based on different statuses like featured, recent, on sale, out of stock etc.<\/li>\n\n\n\n<li><strong>Variable Product Price Range<\/strong> &#8211; You can show the variable product price range.<\/li>\n\n\n\n<li><strong>Display Category<\/strong> &#8211; You can easily show categories on products.<\/li>\n\n\n\n<li><strong>Display Rating<\/strong> &#8211; You can easily show product ratings.<\/li>\n\n\n\n<li><strong>Show or Hide Add to Cart Button<\/strong> &#8211; You can easily show or hide Add to cart button on products.<\/li>\n\n\n\n<li><strong>Add Product Compare Button<\/strong> &#8211; You can easily add a product compare button to compare products.<\/li>\n\n\n\n<li><strong>Add Wishlist Button<\/strong> &#8211; You can easily add a wishlist button to your product.<\/li>\n\n\n\n<li><strong>Add Quick View Button<\/strong> &#8211; You can add a quick view button to easily show the product details.<\/li>\n\n\n\n<li><strong>Category Filter <\/strong>&#8211; You can easily add a category filter for the Normal Page and Search Page product listing type.<\/li>\n\n\n\n<li><strong>More Post Loading Options <\/strong>&#8211; You can choose from different types of more product loading options such as Pagination, Load more and Lazy Load.<\/li>\n\n\n\n<li><strong>Unique Carousel ID <\/strong>&#8211; With the Unique Carousel ID, you can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-remote-sync-with-elementor-woocommerce-product-carousel\/\" target=\"_blank\" rel=\"noreferrer noopener\">connect and control the Carousel product listing with the Carousel Remote widget<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Content in the Product Listing Widget?<\/h2>\n\n\n\n<p>To add content to the Product Listing widget from The Plus Addons for Elementor, add the widget on the page or template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Layout<\/h3>\n\n\n\n<p>From the <strong>Product Listing Types<\/strong> dropdown, under the <strong>Content Layout<\/strong> tab, you have to select the listing type.<\/p>\n\n\n\n<p>Here you\u2019ll find six options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Normal Page<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/display-woocommerce-products-on-custom-page-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing products on any page<\/a>.\u00a0<\/p>\n\n\n\n<p><strong>Archive Page<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-a-woocommerce-product-archive-page-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing product listings on an archive template<\/a>. <\/p>\n\n\n\n<p><strong>Single Page Related Products<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-related-products-on-a-product-page\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing related products on a single product page<\/a>. <\/p>\n\n\n\n<p><strong>Search List<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/customize-woocommerce-search-results-page-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing product listing on the search result page<\/a>. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: For Archive Page, Single Page Related Products and Search List, you have to use them in an archive, single product template and search template, respectively, to make it work properly. If you add the widget on a page, you won\u2019t see any difference between these three options, it is only for visual purposes so you can style the listing.<\/em>&nbsp;&nbsp;&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Upsells<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-upsell-products-in-woocmmerce-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing products for upsell on a single product page<\/a>. <\/p>\n\n\n\n<p><strong>Cross Sells<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-cross-sell-products-in-woocmmerce-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing products for cross sell on a single product page<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"331\" height=\"476\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-content-layout.png\" alt=\"product listing content layout\" class=\"wp-image-123517\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-content-layout.png 331w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-content-layout-209x300.png 209w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<p>Let\u2019s keep the listing to the <strong>Normal Page<\/strong> option.<\/p>\n\n\n\n<p>From the <strong>Style<\/strong> dropdown, you can select from different predefined styles.&nbsp;<\/p>\n\n\n\n<p>You can also use your custom design as the product skin.<\/p>\n\n\n\n<p>Then from the <strong>Layout<\/strong> dropdown, you can select the layout of your product listing. Here you\u2019ll find four options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Grid<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-woocommerce-products-in-grid-layout-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing products in a grid layout<\/a>.<\/p>\n\n\n\n<p><strong>Masonry<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-woocommerce-products-in-masonry-grid-layout-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing products in a masonry grid layout<\/a>.<\/p>\n\n\n\n<p><strong>Metro<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-woocommerce-products-in-metro-layout-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">showing products in a metro layout<\/a>.<\/p>\n\n\n\n<p><strong>Carousel<\/strong> &#8211; For <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-woocommerce-product-carousel-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">creating a product carousel<\/a>.<\/p>\n\n\n\n<p>Select the appropriate layout option which fits your need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Source<\/h3>\n\n\n\n<p>From the <strong>Content Source<\/strong> tab, you can select categories as the source of your products and you can also include and exclude products by id. Here you\u2019ll find three options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Select Category<\/strong> &#8211; From here, you can select different product categories as the source.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"331\" height=\"862\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-content-source.png\" alt=\"product listing content source\" class=\"wp-image-123526\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-content-source.png 331w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-content-source-115x300.png 115w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<p><strong>Include Product(s)<\/strong> &#8211; From here, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-specific-woocommerce-product-by-product-id-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">you can include products by product id<\/a>. <\/p>\n\n\n\n<p><strong>Exclude Product(s)<\/strong> &#8211; From here, you can exclude products by product id.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can use select category, include and exclude products together but make sure the product IDs used are from the selected categories.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Select category, include and exclude options are only available with the Normal Page and Search List listing type.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>In the <strong>Maximum Posts Display<\/strong> field, you can set a maximum number of products to be displayed on a page.&nbsp;<\/p>\n\n\n\n<p>From the <strong>Offset Posts<\/strong> field, you can hide products from the beginning of the product list.<\/p>\n\n\n\n<p>Then from the <strong>Order By<\/strong> dropdown, you can order the products. Here you\u2019ll find multiple options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None<\/strong> &#8211; This will keep the list in its default order.<\/li>\n\n\n\n<li><strong>ID<\/strong> &#8211; With this, you can order the products by their ID.<\/li>\n\n\n\n<li><strong>Author<\/strong> &#8211; With this, you can order the products by post author name.<\/li>\n\n\n\n<li><strong>Title<\/strong> &#8211; With this, you can order the products by title (alphabetical order).<\/li>\n\n\n\n<li><strong>Name (slug)<\/strong> &#8211; With this, you can order the products by their slug (URL).<\/li>\n\n\n\n<li><strong>Date<\/strong> &#8211; With this, you can order the products by date.&nbsp;<\/li>\n\n\n\n<li><strong>Modified<\/strong> &#8211; With this, you can order the products based on the last modified date.<\/li>\n\n\n\n<li><strong>Random<\/strong> &#8211; This will show products in random order. So every time pages load, the products will show in a different order.<\/li>\n\n\n\n<li><strong>Comment Count<\/strong> &#8211; With this, you can order the products based on the number of comments..<\/li>\n\n\n\n<li><strong>Default Menu Order<\/strong> &#8211; With this option, you can order products by menu order number. However, the menu order option is available for pages only. If you want to use the menu order feature for products, you have to add some special code to your website&#8217;s files. This will allow you to give each product an order number, just like you can for pages.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Then from the <strong>Order<\/strong> dropdown, you can arrange the products in ascending or descending order based on the option selected in the <strong>Order By<\/strong> dropdown.<\/p>\n\n\n\n<p>From the <strong>Display Product<\/strong> dropdown, you can show products based on various statuses. Here you\u2019ll find multiple options &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>All<\/strong> &#8211; With this, you can show all the products.<\/li>\n\n\n\n<li><strong>Recent<\/strong> &#8211; With this, you can show the latest products.<\/li>\n\n\n\n<li><strong>Featured<\/strong> &#8211; With this, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/display-featured-products-in-woocmmerce-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">you can show featured products only<\/a>. <\/li>\n\n\n\n<li><strong>On sale<\/strong> &#8211; With this, you show the products which are on sale i.e. are selling on discounted price.<\/li>\n\n\n\n<li><strong>Top rated<\/strong> &#8211; With this, you can arrange products by rating.<\/li>\n\n\n\n<li><strong>Top sales<\/strong> &#8211; With this, you can arrange products by number of sales.<\/li>\n\n\n\n<li><strong>In stock<\/strong> &#8211; With this, you can only show products which are in stock.<\/li>\n\n\n\n<li><strong>Out of stock<\/strong> &#8211; With this, you can only show products which are out of stock.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Columns Manage<\/h3>\n\n\n\n<p>From the <strong>Columns Manage<\/strong> tab, you can manage the number of columns of your products on desktop, tablet and mobile separately.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: <\/em><strong><em>Columns Manage<\/em><\/strong><em> is not available with the Carousel layout.<\/em><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"571\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-columns-manage.png\" alt=\"product listing columns manage\" class=\"wp-image-123527\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-columns-manage.png 330w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-columns-manage-173x300.png 173w\" sizes=\"(max-width: 330px) 100vw, 330px\" \/><\/figure>\n\n\n\n<p>You can also manage the column gap from here.<\/p>\n\n\n\n<p>For the <strong>Metro <\/strong>layout, you can select the number of columns for desktop and tablet only, you can also select different styles for each device separately.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Extra Options<\/h3>\n\n\n\n<p>In the <strong>Extra Options<\/strong> tab, you\u2019ll find some powerful options, these options will vary depending on listing and layout types.<\/p>\n\n\n\n<p><strong>Title Tag<\/strong> &#8211; From here, you can set different HTML tags to your product title.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"974\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-extra-options.png\" alt=\"product listing extra options\" class=\"wp-image-123528\"\/><\/figure>\n\n\n\n<p><strong>Variable Product Price Range<\/strong> &#8211; From here, you show the variable product price range.<\/p>\n\n\n\n<p><strong>On Hover Image Change<\/strong> &#8211; If you have multiple images for a product, you can show different images on hover from here.<\/p>\n\n\n\n<p><strong>Display Category<\/strong> &#8211; From here, you can show product category names on products.<\/p>\n\n\n\n<p><strong>Display Rating<\/strong> &#8211; From here, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-star-rating-in-woocommerce-product-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">show product ratings on products<\/a>. <\/p>\n\n\n\n<p><strong>Cart Button Display<\/strong> &#8211;\u00a0 From here, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-add-to-cart-button-in-woocommerce-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">you can show or hide add to cart button from products<\/a>. <\/p>\n\n\n\n<p><strong>Display YITH Buttons<\/strong> &#8211; From here, you can add different YITH buttons on your product. Here you\u2019ll find three options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compare<\/strong> &#8211; With this, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-product-compare-button-for-woocommerce-products-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a product compare button on the products<\/a>. <\/li>\n\n\n\n<li><strong>Wishlist<\/strong> &#8211; With this, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-wishlist-button-for-woocommerce-products-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a wishlist button on the products<\/a>. <\/li>\n\n\n\n<li><strong>Quick View<\/strong> &#8211; With this, you can add a quick view button to quickly see the product details.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: To use the YITH Buttons you have to use the relevant YITH plugins.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Display TP Quickview<\/strong> &#8211; From here, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-quick-view-button-on-woocommerce-products-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a quick view button on products<\/a>, you can also show the details in a custom design using templates. <\/p>\n\n\n\n<p><strong>Display Image Size<\/strong> &#8211; From here, you can select different product image sizes (except in the <strong>Carousel<\/strong> layout).<\/p>\n\n\n\n<p><strong>Category Wise Filter<\/strong> &#8211; With this option, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/filter-woocommerce-products-by-category-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a beautiful category filter on your products<\/a> (only available in the <strong>Normal Page<\/strong> and <strong>Search List<\/strong> listing type, except in the <strong>Carousel<\/strong> layout). <\/p>\n\n\n\n<p><strong>More Post Loading Options<\/strong> &#8211; From here, you can add different types of options to load more products (only available in the <strong>Normal Page<\/strong> and <strong>Search List<\/strong> listing type, except in the <strong>Carousel<\/strong> layout). Here you\u2019ll find three options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pagination<\/strong> &#8211; With this, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-pagination-to-woocommerce-products-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add pagination to your product listing<\/a>. <\/li>\n\n\n\n<li><strong>Load more<\/strong> &#8211; With this, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-load-more-button-in-woocommerce-products-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a load more button to load more products<\/a>. <\/li>\n\n\n\n<li><strong>Lazy Load<\/strong> &#8211; With this option, you can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-infinite-scroll-to-woocommerce-products-list-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add an infinite loading option to your product listing as the user scrolls down<\/a>. <\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>No Posts Message<\/strong> &#8211; From here, you can customize the message if there are no products to show.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style the Product Listing Widget?<\/h2>\n\n\n\n<p>To style the Product Listing widget, you\u2019ll find all the styling options under the <strong>Style<\/strong> tab.<\/p>\n\n\n\n<p><strong>Title<\/strong> &#8211; From here, you can manage the product title typography and color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"799\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-style.png\" alt=\"product listing style\" class=\"wp-image-123529\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-style.png 330w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-style-124x300.png 124w\" sizes=\"(max-width: 330px) 100vw, 330px\" \/><\/figure>\n\n\n\n<p><strong>Price<\/strong> &#8211;&nbsp; From here, you can manage the margin, typography, and color of product price.&nbsp;<\/p>\n\n\n\n<p><strong>Badge<\/strong> &#8211; From here, you can show or hide different badges like Out of Stock, Sale and manage their typography, color, background etc.<\/p>\n\n\n\n<p><strong>Content Background<\/strong> &#8211; From here, you can manage the product content background and box shadow for both normal and hover state.<\/p>\n\n\n\n<p><strong>Product Image<\/strong> &#8211; From here, you can manage the product image border radius, background and box shadow for both normal and hover state.<\/p>\n\n\n\n<p><strong>Add To Cart Button<\/strong> &#8211; From here, manage the add to cart button padding, typography, color, background etc.<\/p>\n\n\n\n<p><strong>Box Loop Background Style<\/strong> &#8211; From here, you can add padding, border, background and box shadow to each product item in the listing.<\/p>\n\n\n\n<p><strong>Carousel Options<\/strong> &#8211; This option will be visible when you use the <strong>Carousel<\/strong> layout. Here you\u2019ll find many options to control the carousel.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Unique Carousel ID<\/strong> &#8211; With the Unique Carousel ID, you can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-remote-sync-with-elementor-woocommerce-product-carousel\/\" target=\"_blank\" rel=\"noreferrer noopener\">connect and control the Carousel product listing with the Carousel Remote widget<\/a>. <\/li>\n\n\n\n<li><strong>Slider Mode<\/strong> &#8211; From here, you can choose your slider orientation, Horizontal or Vertical.<\/li>\n\n\n\n<li><strong>Slide Speed<\/strong> &#8211; Control your slide transition speed from here.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><em>Now you\u2019ll find various device-dependent options.<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Columns <\/strong>&#8211; You can set the number of columns for the slide for desktop, tablet and mobile separately.&nbsp;<\/li>\n\n\n\n<li><strong>Next Previous<\/strong> &#8211; You can set the behaviour of your next\/previous slide movement from here. You can either move one column at a time or move all visible columns (depending on the number of columns set in the <strong>Columns<\/strong> dropdown).<\/li>\n\n\n\n<li><strong>Slide Padding<\/strong> &#8211; From here, you can adjust the padding of your slider.<\/li>\n\n\n\n<li><strong>Draggable<\/strong> &#8211; Make your carousel draggable or non-draggable from here.<\/li>\n\n\n\n<li><strong>Multi Drag<\/strong> &#8211; With this option, you can allow users to drag multiple slides at once.<\/li>\n\n\n\n<li><strong>Infinite Mode<\/strong> &#8211; You can turn your carousel into an infinite loop slider from here.<\/li>\n\n\n\n<li><strong>Pause On Hover<\/strong> &#8211; Allow the users to pause the slider on mouse hover.<\/li>\n\n\n\n<li><strong>Adaptive Height<\/strong> &#8211;&nbsp; If you have slides with uneven height with this option the carousel navigations will adjust its position automatically according to the height of the slide.<\/li>\n\n\n\n<li><strong>Animation Type<\/strong> &#8211; From here you can choose the animation type for your slider.<\/li>\n\n\n\n<li><strong>Autoplay<\/strong> &#8211; Make your carousel slider autoplay from here and adjust its speed as well.<\/li>\n\n\n\n<li><strong>Show Dots<\/strong> &#8211; From here you can add dots slider navigation and you can style them as well.<\/li>\n\n\n\n<li><strong>Show Arrow<\/strong> &#8211; You can also add arrows navigation for your carousel slider and style them from here.<\/li>\n\n\n\n<li><strong>Center Mode<\/strong> &#8211; From here, you can highlight the center slide by adding padding, scale effect or opacity.<\/li>\n\n\n\n<li><strong>Number Of Rows<\/strong> &#8211; From here, you can set the number of rows for your slider.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Post Not Found Options<\/strong> &#8211; To style the product not found message, you can use this tab. From here, you can manage the message typography, color, background etc.<\/p>\n\n\n\n<p><strong>Extra Options<\/strong> &#8211; From here, you can make a unique column alignment. Turn on the <strong>Messy Columns<\/strong> toggle you\u2019ll get options to move columns up and down up to 6 columns individually for different devices.<\/p>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/on-scroll-view-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":25,"featured_media":123532,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[526,579],"class_list":["post-123513","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-listings","docs-product-listing"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/123513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=123513"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/123513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/123532"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=123513"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=123513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}