<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>

<div class="woo-sc-box">
<h2>Top Features:</h2>
<ul class="wccom-tick-list-primary">
<li>Add multiple options to product pages</li>
<li>18 types of fields to create extra product options</li>
<li>Add color and text swatches</li>
<li>Show or hide any fields based on user input using conditional logic</li>
<li>Separate each field with a line on frontend using separator</li>
<li>Option to choose default selected option for select, radio button, color & text swatch field</li>
<li>Sort the order of created options for selectbox, radio button, color & text swatch field</li>
<li>Customize product options form such as color, text, text weight etc.</li>
<li>Display selected product options with cart items or in a popup</li>
<li>Create multiple rules for product options</li>
<li>Easy rules management from the back office</li>
<li>Sort the order of options</li>
<li>Apply each rule to specific product or categories</li>
<li>Set the price for each field</li>
<li>Import/Export Product Options Rules</li>
<li>Duplicate the existing rule</li>
<li>Preview the created rule</li>
</ul>
<p><a class="wccom-button is-primary" style="font-weight: 400;text-decoration: none;width: 130px" href="https://woocommerce.com/?add-to-cart=8199096" target="_blank" rel="noopener"><span class="wccom-button__text">Buy Now</span></a></p>
</div>
<hr style="clear: both" />
<h1>Add Extra Custom Product Options & Addons With 18 Field Types</h1>
<p><strong>Woocommerce extra Product options plugin</strong> allows you to create multiple custom options for products based on customer needs.</p>
<p>For example, if you are selling a computer, customers have different requirements they customize like, ram, hard disks, LCD screen sizes, USBs, mouse types, etc. These extensive options cannot be offered with default variations.</p>
<p><strong>WooCommerce product addons </strong> helps you create product options using 18 field types such as text field, text area, radio buttons, select box, multi-select box, checkbox, file upload, color swatch, text swatch etc.</p>
<p>You can set the price for each field or provide it for free. Set conditions to show or hide fields based on user input and choice. You can attach options with multiple products or categories at once to save time. Customize the layout of options to match them with your website theme.</p>
<hr style="clear: both" />
<h2>Features Details:</h2>
<h3><strong>Add Multiple Extra Product Options</strong></h3>
<p><strong>WooCommerce extra product options plugin </strong> allows you to add as many options as you want with the help of various field types.</p>
<p><img class="aligncenter wp-image-8859729 size-full" src="https://woocommerce.com/wp-content/uploads/2021/06/Product-Options-Gifz.gif" alt="WooCommerce Product Options" width="600" height="887" /></p>
<h3><strong>Use Text and Color Swatch</strong></h3>
<p>WooCommerce product addons plugin also allows you to create text and color swatches to improve the visibility of your product variations.</p>
<p><img class="aligncenter size-full wp-image-18734000627476" src="https://woocommerce.com/wp-content/uploads/2021/06/swatch-gif-2.gif" alt="woocommerce extra product options" width="924" height="628" /></p>
<p> </p>
<h3><strong>18 types of fields</strong></h3>
<p>WooCommerce custom product fields plugin enables 18 types of fields to create product options such as text field, text area, radio buttons, select box, multi-select box, checkbox, file upload, color swatch, text swatch, and more.</p>
<p><img class="aligncenter size-full wp-image-18734004204768" src="https://woocommerce.com/wp-content/uploads/2021/06/18-types-of-fields-1.png" alt="WooCommerce extra product options plugin" width="980" height="472" /></p>
<h3><strong>Set price for each field</strong></h3>
<p><strong>WooCommerce extra product options extension</strong> allows you to increase the cost of the product by setting a price for fields.</p>
<p><img class="aligncenter size-full wp-image-18734004204769" src="https://woocommerce.com/wp-content/uploads/2021/06/Set-price-for-each-field-2.png" alt="WooCommerce extra product options plugin" width="980" height="470" /></p>
<h3><strong>Conditional/dependable fields</strong></h3>
<p>You can create conditional fields which show or hide the specific fields based on user input or choice.</p>
<p><img class="aligncenter size-full wp-image-8696387" src="https://woocommerce.com/wp-content/uploads/2021/06/condi.gif" alt="wocommerce product options" width="592" height="252" /></p>
<h3><strong>Custom Radio Button Images</strong></h3>
<p>You can also display custom images for radio buttons that will make it easier for customers that what he is going to choose.</p>
<p><img class="aligncenter size-full wp-image-8696377" src="https://woocommerce.com/wp-content/uploads/2021/06/radi.gif" alt="wocommerce product options" width="572" height="368" /></p>
<h3>Add Tool tip for each option</h3>
<p>You can also add tool tip for each option to convey required guideline regarding this option.<img class="aligncenter size-full wp-image-18734005928645" src="https://woocommerce.com/wp-content/uploads/2021/06/tooltip-product-page-kurta.png" alt="woocommerce extra custom product options plugin" width="980" height="515" /></p>
<h3><strong>Assign to multiple product or categories</strong></h3>
<p><strong>WooCommerce extra product fields</strong> plugin saves you time as you can attach options to multiple products or categories.</p>
<p><img class="aligncenter size-full wp-image-18734004204770" src="https://woocommerce.com/wp-content/uploads/2021/06/Assign-to-multiple-product-or-categories-1.png" alt="WooCommerce extra product options plugin" width="980" height="407" /></p>
<h3><strong>Create multiple rules</strong></h3>
<p>You can add multiple rules for product options which helps you to create different options for specific products.</p>
<p><img class="aligncenter size-full wp-image-18734004204771" src="https://woocommerce.com/wp-content/uploads/2021/06/Create-multiple-rules-2.png" alt="WooCommerce extra product options plugin" width="980" height="418" /></p>
<h3><strong>Sort the order of options</strong></h3>
<p><strong>Extra Custom Product Options for WooCommerce</strong> plugin enables you to sort the order of created product options.</p>
<p><img class="aligncenter size-full wp-image-18734004204772" src="https://woocommerce.com/wp-content/uploads/2021/06/Sort-the-order-of-options.png" alt="WooCommerce extra product options plugin" width="980" height="436" /></p>
<h3><strong>2 Ways to Displays Options on Cart Page</strong></h3>
<p><strong>WooCommerce product addons </strong>plugin enables you to display selected options simply with cart items.<img class="aligncenter size-full wp-image-18734005924848" src="https://woocommerce.com/wp-content/uploads/2021/06/with-out-popup-cart-page-data.png" alt="woocommerce extra product options plugin" width="980" height="481" /></p>
<p> </p>
<p>You can also enable “View Details” button on cart page which displays extra options in a popup on click.</p>
<p><img class="aligncenter size-full wp-image-18734004204776" src="https://woocommerce.com/wp-content/uploads/2021/06/2-Ways-to-Displays-Options-on-Cart-Page-with-popup.png" alt="WooCommerce extra product options plugin" width="980" height="459" /></p>
<p><img class="aligncenter size-full wp-image-18734004204780" src="https://woocommerce.com/wp-content/uploads/2021/06/2-Ways-to-Displays-Options-on-Cart-Page-with-popup-show-data-1.png" alt="WooCommerce extra product options plugin" width="980" height="463" /></p>
<h2>Import/Export Product Options Rules</h2>
<p>You can also export the product options rules created by you in a CSV file for backup. You can import it to another site which means you don’t have to create the rules again.</p>
<p><img class="aligncenter size-full wp-image-18734004204781" src="https://woocommerce.com/wp-content/uploads/2021/06/Import-Export-Product-Options-Rules-1.png" alt="WooCommerce extra product options plugin" width="980" height="418" /></p>
<h3><strong>Duplicate the Rule</strong></h3>
<p>With WooCommerce extra product addons plugin, you can make a copy of any rule with duplicate the rule feature.</p>
<p><img class="aligncenter size-full wp-image-18734004204784" src="https://woocommerce.com/wp-content/uploads/2021/06/Duplicate-the-Rule-1.png" alt="WooCommerce extra product options plugin" width="980" height="437" /></p>
<hr style="clear: both" />
<h2><strong>Advantages </strong></h2>
<ul class="wccom-tick-list-secondary">
<li>Extra options help you to sell customizable products.</li>
<li>Increase order value by creating options.</li>
<li>Increases the conversion rate.</li>
<li>Improves your customers’ user experience.</li>
</ul>
<hr style="clear: both" />
<h2>How to Get started</h2>
<ol>
<li>Get <strong>Extra Custom Product Options for WooCommerce</strong> from <a href="https://woocommerce.com/products/extra-product-options-for-woocommerce/?add-to-cart=8199096">WooCommerce.com</a>.</li>
<li>Download and install the extension.</li>
<li>Activate the extension.</li>
<li>Go to <strong>WooCommerce > Product Options </strong>to add rules to create extra product options.</li>
<li>Read the full installation guide <a href="https://woocommerce.com/document/extra-product-options-for-woocommerce/"><strong>here</strong></a></li>
</ol>
<hr style="clear: both" />
<p><a class="wccom-button is-primary" style="font-weight: 400;text-decoration: none;width: 130px" href="https://woocommerce.com/?add-to-cart=8199096" target="_blank" rel="noopener"><span class="wccom-button__text">Buy Now</span></a></p>

Extra Custom Product Options

<p>Use custom product addons to create product options either free or paid by using <strong>18 types</strong> of fields. Create <strong>conditional fields </strong>to show/hide fields based on customer selections.</p>

Product Listing Page with List and Grid View vs Extra Custom Product Options