<p><span style="font-weight: 400">WooCommerce list view plugin helps you transform your default product catalog page into an engaging product listing page with list/grid views. Add a toggle button on shop pages to switch listing pages between list and grid view. </span></p>
<p><span style="font-weight: 400">Make it easier for customers to bulk purchase or buy multiple products with the WooCommerce product list view plugin. Enlist specific products or categories with additional product information in the list/grid view. It helps customers to add products to the cart, select quantities, or purchase multiple products with a single click. </span></p>
<p><span style="font-weight: 400">A wide array of businesses can use the plugin, from wholesale to restaurants and technical products. For example, restaurants can allow customers to order multiple dishes with simple clicks, and computer shops can prompt customers to choose specifications when customizing their machines.</span></p>
<div class="woo-sc-box normal">Increase visibility of your products by enabling customers to help your customers to select the number of products they want to see on the shop page with the <strong><a href="https://woocommerce.com/products/product-per-page-for-woocommerce/">WooCommerce product per page plugin</a></strong>.</div>
<h2>Key Features of the List View Plugin for WooCommerce</h2>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Users can see products in a List, or Grid view with a toggle button.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Order multiple products and variations with a single click.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Show product listing separately on selected pages.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display specific products or categories on the listing page.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Use a shortcode to display the listing page and cart widget.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Quickly find products with the instant search bar.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Display listings based on categories in the grid view.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Load list upon scroll, load more button, or pagination.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Select custom colors for table components.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Add multiple headings on the listing page and sort their order</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Personalize the load more button.</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Mobile Responsive.</span></li>
</ul>
<h3><strong>Enable Product Listings for Better UX</strong></h3>
<p><span style="font-weight: 400">Let customers order multiple products and variations from a single listing page. Display products in a list/grid view or switch between the views with a toggle switch.</span></p>
<p><strong>List View:</strong></p>
<p><img class="aligncenter wp-image-8494004 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/list.gif" alt="Enable Product Listings for Better UX - List View" width="600" height="376" /></p>
<p><strong>Grid View:</strong></p>
<p><img class="aligncenter wp-image-8494005 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/grid.gif" alt="Enable Product Listings for Better UX - Grid View" width="600" height="376" /></p>
<h3><b>Display products in a list or grid view</b></h3>
<p><span style="font-weight: 400">Use the WooCommerce list view plugin to showcase your products in either list or grid view on the listing page. Switch between list and grid view using the dropdown. This gives customers more information and the ability to select product quantity and add to the cart in bulk.</span></p>
<p><img class="aligncenter wp-image-18734003497354 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/6-7.png" alt="Display products in a list or grid view" width="860" height="227" /></p>
<h3><b>Enlist Products Based on Categories in the Grid View</b></h3>
<p><span style="font-weight: 400">Display products based on their categories in the grid view with the WooCommerce product list template plugin. This way customers can easily browse through all products under a specific category and select quantities to place orders.</span></p>
<p><img class="aligncenter wp-image-8494161 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/Category-Wise.png" alt="Enlist Products Based on Categories in the Grid View" width="752" height="893" /></p>
<h3><b>Add listing & cart widgets anywhere using a shortcode</b></h3>
<p><span style="font-weight: 400">The WooCommerce product list template plugin generates a shortcode to display the product listing and cart widget. Admin can paste the shortcode on any page where they want to display the cart widget or listing page.</span></p>
<p><img class="aligncenter wp-image-18734003497355 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/7-6.png" alt="Add listing & cart widgets anywhere using a shortcode" width="1176" height="255" /></p>
<h3><b>Find products with the search bar</b></h3>
<p><span style="font-weight: 400">An instant search bar is displayed at the top of the listing page so that customers can quickly find any product. Users can type the product name in the search bar, which will be filtered at the top of the product listing.</span></p>
<p><img class="aligncenter wp-image-8494066 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/Customers-Can-Use-the-Search-Bar-Too-2.png" alt="Find products with the search bar" width="787" height="547" /></p>
<h3><b>Multiple Product loading options</b></h3>
<p><span style="font-weight: 400">The wooCommerce product listing page template plugin has three different product loading choices. You can display additional products through:</span></p>
<ul>
<li style="font-weight: 400"><span style="font-weight: 400">Scroll down </span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Load more button</span></li>
<li style="font-weight: 400"><span style="font-weight: 400">Pagination</span></li>
</ul>
<p><img class="aligncenter wp-image-18734003497348 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/5-7.png" alt="Multiple Product loading options" width="760" height="424" /></p>
<h3><b>Customize the product listing table</b></h3>
<p><span style="font-weight: 400">The wooCommerce product table view plugin offers store owners extensive customization options. Admin can customize the color or font size to match their website’s theme.</span></p>
<div class="woo-sc-box normal">If you want to easily display, filter, and sort product varations, install the <strong><a href="https://woocommerce.com/products/product-variations-table-for-woocommerce/">WooCommerce variations table plugin</a></strong> on your store.</div>
<p><img class="aligncenter wp-image-18734003497346 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/4-7.png" alt="Customize the product listing table" width="684" height="568" /></p>
<h3><b>Add multiple headings on the listing page</b></h3>
<p><span style="font-weight: 400">Customize the product listing page and display additional information by including multiple headings. You can display vital product information with headings such as stock, weight, SKUs, length, subtotal, etc.</span></p>
<p><img class="aligncenter wp-image-18734003497247 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/1-13.png" alt="Add multiple headings on the listing page" width="855" height="999" /></p>
<h3><b>Hide out-of-stock products from the listing page</b></h3>
<p><span style="font-weight: 400">Display only the in-stock products on the listing page to avoid any confusion. Improve the users’ buying experience by hiding out-of-stock products and minimizing customer support over out-of-stock products.</span></p>
<p><img class="aligncenter wp-image-18734003497248 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/2-5.png" alt="Hide out-of-stock products from the listing page" width="717" height="159" /></p>
<h3><b>Customize listing page headings by sorting the order</b></h3>
<p><span style="font-weight: 400">Rearrange the headings of the listing page to create a customized listing table. Prioritize headings that are more important depending on the information you want to provide to the customer.</span></p>
<p><img class="aligncenter wp-image-18734003497249 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/3-13.png" alt="Customize listing page headings by sorting the order" width="863" height="402" /></p>
<h3>Create separate listing pages for each category using shortcodes</h3>
<p><span style="font-weight: 400">Improve the user experience of your eCommerce store by displaying categories as separate listing pages by only using shortcodes. Admin can select specific categories to show on the listing page and a shortcode will be generated for each category(s)</span></p>
<p><img class="aligncenter wp-image-18734003497314 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/image_2024_04_03T06_10_51_953Z.png" alt="Create separate listing pages for each category using shortcodes" width="1030" height="393" /></p>
<h3><b>Configure the load more button</b></h3>
<p><span style="font-weight: 400">With the WooCommerce custom product list page plugin, you can customize the “Load More” button. Admin can configure button text, background color, hove, border, and text color.</span></p>
<p><img class="aligncenter wp-image-18734003497359 size-full" src="https://woocommerce.com/wp-content/uploads/2020/09/8-6.png" alt="Configure the load more button" width="656" height="657" /></p>
<p> </p>
<h2>Compatibility</h2>
<p>Our plugins are designed to be highly versatile and also compatible with the most commonly used themes, browsers, builders, and mobile views. We understand the importance of flexibility and integration when it comes to enhancing your website’s functionality. Our plugins can effortlessly integrate with the following:</p>
<h3>Themes Compatibility</h3>
<ul>
<li>Store Front</li>
<li>Avada</li>
<li>Flatsome</li>
<li>Porto</li>
<li>Woodmart</li>
<li>WooCommerce default theme</li>
<li>Divi</li>
</ul>
<h3>Builders</h3>
<ul>
<li>Elementor</li>
<li>Bakery</li>
<li>Divi</li>
</ul>
<h3>Also Compatible with</h3>
<ul>
<li>PHP 8</li>
<li>Mobile Layouts</li>
</ul>
<h3>Get Started</h3>
<ol>
<li>Purchase <strong>Product Listing Page with List & Grid View</strong> from WooCommerce.com.</li>
<li>Download and install the extension.</li>
<li>Activate the extension.</li>
<li>Go to <strong>WooCommerce > Product Listing Page </strong> to configure this plugin.</li>
<li>Read the full installation guide <a href="https://woocommerce.com/document/2-0/product-listing-page-with-list-grid-view/">here</a>.</li>
</ol>

Product Listing Page with List and Grid View

<p>Display WooCommerce products in a list/grid view, allowing customers to order multiple products or bulk purchases!</p>

<h2 class="wp-block-heading">The original Gravity Forms integration for WooCommerce</h2>
<p>Gravity Forms Product Add-Ons has been connecting Gravity Forms to WooCommerce since 2011 — years before any alternative existed. It is the original, official integration on the WooCommerce Marketplace, maintained continuously through every major release of both Gravity Forms and WooCommerce for over 13 years.</p>
<p>Some products need more than a price and an “Add to Cart” button. Custom orders, build-your-own products, service requests, donation pages, personalized items — these all require collecting structured information from the customer before checkout. This extension bridges that gap by connecting WooCommerce directly to the form builder you already know.</p>
<p>Attach any Gravity Form to any WooCommerce product — simple, variable, or subscription — and the form becomes part of the product page. Customers fill out the form, pricing updates in real time, and every detail flows through the cart, checkout, order confirmation, and admin screens exactly where you need it.</p>
<figure class="wp-block-image size-large"><img class="wp-image-18734006414340" src="https://woocommerce.com/wp-content/uploads/2011/12/gfpa-product-page-multi-step-form.png" alt="Multi-step product configuration form with hardware options and real-time pricing" /><figcaption class="wp-element-caption">A multi-page product form with hardware configuration options and real-time price calculation.</figcaption></figure>
<h2 class="wp-block-heading">Real-time pricing that reflects every choice</h2>
<p>When customers select options that affect cost, the product price updates dynamically on the page. Use Gravity Forms pricing fields — products, options, quantities, and shipping — and the extension calculates the total in real time. Customers see exactly what they are paying for before they add anything to the cart.</p>
<p>You have full control over how pricing appears. Display the base price with a label like “Starting at $50”, hide the default WooCommerce price entirely for quote-based products, or customize the subtotal, options, and grand total labels individually. The pricing display adapts to your business model, not the other way around.</p>
<figure class="wp-block-image size-large"><img class="wp-image-18734006414341" src="https://woocommerce.com/wp-content/uploads/2011/12/gfpa-cart-with-form-data.png" alt="WooCommerce cart showing detailed form field data for a configured product" /><figcaption class="wp-element-caption">Every form selection flows into the cart as detailed line item metadata.</figcaption></figure>
<h2 class="wp-block-heading">Deep WooCommerce integration — not just a form embed</h2>
<p>This is not a shortcode that drops a form on a page. Gravity Forms Product Add-Ons is engineered to integrate at every level of the WooCommerce purchase flow:</p>
<ul class="wp-block-list">
<li><strong>Smart cart handling</strong> — Each unique form configuration is tracked as a distinct cart item. Identical configurations are automatically grouped and their quantities incremented. No duplicates, no confusion.</li>
<li><strong>Complete order data</strong> — Every field the customer fills out appears as order item metadata, visible in admin order screens, customer emails, order confirmations, and the My Account order view. Nothing is lost between the form and the order.</li>
<li><strong>One-to-one entry linking</strong> — Each order line item creates a proper Gravity Forms entry, linked directly to the WooCommerce order item. Jump from the order to the entry, or from the entry back to the order. Transaction status, payment details, and order status sync automatically as the order progresses.</li>
<li><strong>Cart editing</strong> — Let customers click an item in the cart to return to the product page with their previous selections pre-filled, then update and replace the item. No need to remove and re-add.</li>
<li><strong>Reorder support</strong> — Customers can reorder previous purchases with form data pre-populated from the original order, making repeat purchases fast and accurate.</li>
<li><strong>Inventory-aware stock management</strong> — Map a form quantity field to control WooCommerce stock deductions, so inventory stays accurate even when quantities come from form input rather than the standard quantity selector.</li>
<li><strong>Entry export with WooCommerce context</strong> — Export Gravity Forms entries with associated order number, order status, product name, and other WooCommerce fields included. Filter exports by order status to work only with completed, refunded, or any other status you need.</li>
<li><strong>Notification control</strong> — Gravity Forms notifications are suppressed by default during the add-to-cart process and only fire when the actual order is placed. Enable or disable notifications per product to match your workflow.</li>
</ul>
<figure class="wp-block-image size-large"><img height="584" width="1200" class="wp-image-18734006414342" src="https://woocommerce.com/wp-content/uploads/2011/12/gfpa-admin-product-configuration.png" alt="Product editor showing Gravity Forms configuration with expandable settings panels" /><figcaption class="wp-element-caption">Setup is simple: choose a form, then fine-tune pricing display, calculations, entries, and advanced options.</figcaption></figure>
<h2 class="wp-block-heading">Use the full power of Gravity Forms</h2>
<p>Build your product forms with the same tools you use everywhere else in Gravity Forms. Conditional logic, multi-page forms, file uploads, date pickers, address fields, calculations, conditional submit button logic — it all works. If you can build it in Gravity Forms, you can attach it to a WooCommerce product.</p>
<p>Pricing fields (products, options, totals, quantity, shipping) integrate directly with the WooCommerce cart total. Standard and advanced fields (text, dropdowns, checkboxes, radio buttons, numbers, names, email, phone, file upload, list fields, and more) pass their data through to orders and emails seamlessly.</p>
<h2 class="wp-block-heading">Broad compatibility with the tools you already use</h2>
<p>Gravity Forms Product Add-Ons works with the WooCommerce and Gravity Forms ecosystem — not against it:</p>
<ul class="wp-block-list">
<li><strong>Simple and variable products</strong> — Attach forms to any product type. For variable products, the form appears after a variation is selected.</li>
<li><strong>WooCommerce Subscriptions</strong> — Full support for subscription products, including proper entry handling on renewal orders.</li>
<li><strong>WooCommerce Bookings</strong> — Attach configuration forms to bookable products.</li>
<li><strong>WooCommerce Dynamic Pricing</strong> — When Dynamic Pricing is active, the real-time price calculation automatically factors in pricing rules alongside form option costs. Both extensions are built by Element Stark and are designed to work together.</li>
<li><strong>WooCommerce Bulk Variations</strong> — Attach a separate form specifically for the bulk order view. Also built by Element Stark.</li>
<li><strong>Gravity Perks Nested Forms</strong> — Compatible with Gravity Wiz nested form fields for complex multi-item configurations.</li>
<li><strong>Quick View Pro</strong> — Forms render and function correctly inside quick view modals.</li>
<li><strong>WooCommerce Cart and Checkout Blocks</strong> — Fully compatible with the modern block-based cart and checkout experience.</li>
<li><strong>High-Performance Order Storage (HPOS)</strong> — Built for WooCommerce’s current order storage architecture.</li>
</ul>
<h2 class="wp-block-heading">Structured data and SEO control</h2>
<p>When your product’s base price is $0 because the real price comes from form options, Google’s structured data can display incorrect pricing. This extension lets you override the structured data price range so search engines show accurate information for your configurable products — no additional SEO plugin required.</p>
<h2 class="wp-block-heading">Built for developers who need to extend it</h2>
<p>Dozens of filters and actions let you customize every aspect of the integration — cart item data, order meta display, pricing calculations, field visibility, notification behavior, validation messages, and more. Full support for Gravity Forms logging makes debugging straightforward. The codebase has been refined over 13 years of real-world store usage, and the hooks are stable and well-documented.</p>
<h2 class="wp-block-heading">See it in action</h2>
<p>Browse the <a href="https://www.elementstark.com/woocommerce-extension-demos/product-category/gravity-forms/">live demo store</a> to see Gravity Forms Product Add-Ons working with pizza builders, donation forms, configurable book products, and more.</p>
<p><strong>Requirement:</strong> This extension requires the <a href="https://www.gravityforms.com/">Gravity Forms</a> plugin (any license level). Gravity Forms is sold separately.</p>
<p> </p>

Gravity Forms Product Add-ons

<p><strong data-start="83" data-end="141">Turn Gravity Forms into powerful WooCommerce products. </strong>Capture custom data, update pricing in real time, and carry every detail through cart, checkout, and orders. Trusted, proven, and the original Gravity Forms integration for WooCommerce.</p>

Product Listing Page with List and Grid View vs Gravity Forms Product Add-ons