<p>The Products by Attributes & Variations plugin gives you two ways to showing variations on listing pages: 1) displaying product variations as simple products, or 2) displaying product attributes on listing pages. Improve your user experience by allowing customers to find relevant variations from shop pages and add products to their cart without having to visit the product detail page.</p>
<p><img class="aligncenter wp-image-18734005635358 size-full" src="https://addify.store/adv-banners/addify-store.gif" alt="" width="900" height="141" /></p>
<h2>1.  Show variations as single products:</h2>
<p>This feature empowers you to show variations as simple products on shop, category, and other listing pages. Customers can find relevant product variations from listing pages and add products directly to their cart, and the variations are compatible with product filters and search. This makes your catalog look bigger and improves the user experience.</p>
<p><img class="alignnone size-full" src="https://woocommerce.com/wp-content/uploads/2019/10/WooCommerce-Show-Single-Variations-.png" width="958" height="1178" /></p>
<h3>Key settings</h3>
<ul>
<li>Display variations of all or specific items as simple products</li>
<li>Exclude any variations from showing as simple product</li>
<li>Option to hide the main product from listing pages</li>
</ul>
<p><img class="alignnone size-full wp-image-5822577" src="https://woocommerce.com/wp-content/uploads/2019/10/WooCommerce-Show-Single-Variations-Setting-page.png" alt="" width="925" height="898" /></p>
<p><strong>Exclude specific variation & customize sorting order</strong></p>
<p>From <strong>Product Edit > Variations</strong>, you can exclude individual variations from displaying them as simple products on listing pages. You can also give a custom menu sorting order for each variation.</p>
<p><img class="alignnone size-full wp-image-5710915" src="https://woocommerce.com/wp-content/uploads/2019/10/Variations-Settings-2.png" alt="" width="958" height="1212" /></p>
<p><strong>Exclude entire attribute:</strong></p>
<p>You can exclude any attribute and display products by only one attribute. For example, if you have color and size as attributes, you can exclude size and display products by color only. You can exclude this from the product edit sheet on the backend.</p>
<p><img class="alignnone size-full wp-image-7957711" src="https://woocommerce.com/wp-content/uploads/2019/10/Exclude-Attribute.png" alt="" width="960" height="512" /></p>
<hr />
<h2>2.  Display attribute selections on listing pages</h2>
<p>This lets you add product attributes to listing pages so customers can select their desired variations and add products to their carts from a listing page. This makes shopping easier — customers will no longer need to visit individual product pages to make selections.</p>
<p>The attributes are displayed in the same format as on the product detail page. For example, if you are using color swatches or a third party plugin to show size options in a dropdown menu and are showing color options with checkboxes, the same dropdown and checkboxes will be displayed on listing pages</p>
<p>You can also utilize the toggle mode option to keep your products listing compact. Customers can click on the show/hide button to see the variations.</p>
<p><img class="alignnone size-full wp-image-5710916" src="https://woocommerce.com/wp-content/uploads/2019/10/Variations-Dropdown-2.png" alt="" width="980" height="1168" /></p>
<h3>Key settings</h3>
<ul>
<li>Display attributes of all or selected products</li>
<li>Option to display quantity box</li>
<li>Toggle mode option to keep the listings compact</li>
</ul>
<p><img class="alignnone size-full wp-image-5000645" src="https://woocommerce.com/wp-content/uploads/2019/10/woocommerce-Show-variations-on-shop-page-.jpg" alt="woocommerce Show variations on shop page" width="954" height="939" /></p>
<h3>FAQs:</h3>
<p><strong>Can I use both features at the time?</strong></p>
<p>Yes, you can convert your variations into products, and at the same time show attribute selections under the parent product.</p>
<p><strong>Can I change variation product titles?</strong></p>
<p>Yes, you can customize the title for each product by variation.</p>
<p><strong>Is it compatible with product filter and layered navigation?</strong></p>
<p>Yes, both features are 100% compatible with default sortings, product filters, and layered navigation.</p>
<p> </p>

Products By Attributes & Variations

<p>This plugin enables you to 1) display product attributes on listing pages for easy selection and 2) display variations as simple products.</p>

<h2>Create custom fields for products using the extensive capabilities of WS Form PRO</h2>
<p><a href="https://wsform.com">WS Form PRO</a> is a powerful form development plugin for WordPress.</p>
<p>This extension allows you to create customizable products using <a href="https://wsform.com/knowledgebase_category/field-types/" target="_blank" rel="noopener noreferrer">60+ field types</a>, <a href="https://wsform.com/knowledgebase/conditional-logic/" target="_blank" rel="noopener noreferrer">conditional logic</a>, <a href="https://wsform.com/knowledgebase/repeatable-sections/" target="_blank" rel="noopener noreferrer">repeaters</a>, <a href="https://wsform.com/knowledgebase/tabs/" target="_blank" rel="noopener noreferrer">multiple steps</a> and more!</p>
<p>You can use this extension to request additional information about a product before it is added to the cart. Furthermore, it works with popular WooCommerce extensions such as QuickView, Wishlist and Dynamic Pricing.</p>
<div class="woo-sc-box normal">This extension requires you to own the <a title="WS Form PRO" href="https://wsform.com/" target="_blank" rel="noopener noreferrer">WS Form PRO</a> plugin.</div>
<h2>Example Use Cases</h2>
<ul>
<li><a href="https://woocommerce.wsform.com/product/t-shirt/" target="_blank" rel="noopener noreferrer">Interactive product configurators</a></li>
<li><a href="https://woocommerce.wsform.com/product/make-a-donation/" target="_blank" rel="noopener noreferrer">Donation or ‘name your price’ products</a></li>
<li><a href="https://woocommerce.wsform.com/product/repeatable-sections/" target="_blank" rel="noopener noreferrer">Repeatable sections of fields</a></li>
<li><a href="https://woocommerce.wsform.com/product/woocommerce-field-types/" target="_blank" rel="noopener noreferrer">Placing ‘Add to Cart’ in a desired location</a></li>
<li><a href="https://woocommerce.wsform.com/product/multi-tab/" target="_blank" rel="noopener noreferrer">Multi-step product configurators</a></li>
<li><a href="https://woocommerce.wsform.com/product/calculations/" target="_blank" rel="noopener noreferrer">Complex price calculations</a></li>
<li><a href="https://woocommerce.wsform.com/product/file-upload/" target="_blank" rel="noopener noreferrer">File uploads</a></li>
<li><a href="https://woocommerce.wsform.com/product/google-map/" target="_blank" rel="noopener noreferrer">Google maps</a></li>
<li><a href="https://woocommerce.wsform.com/product/color-swatches/" target="_blank" rel="noopener noreferrer">Color swatch selectors</a></li>
</ul>
<p>… and more! Visit the <a href="https://woocommerce.wsform.com/" target="_blank" rel="noopener noreferrer">demo website</a> to see more examples.</p>
<h2>Key Features</h2>
<ul>
<li>A fully integrated solution that fits seamlessly into your product pages</li>
<li>Assign forms to individual products, all products, product categories and tags</li>
<li>Use any <a href="https://wsform.com/knowledgebase_category/field-types/" target="_blank" rel="noopener noreferrer">WS Form PRO field type</a></li>
<li>Create dynamic product pricing by using the <a href="https://wsform.com/knowledgebase_category/field-types-ecommerce/" target="_blank" rel="noopener noreferrer">WS Form e-commerce field types</a> with real-time price updates</li>
<li>Customize the position of ‘Add to Cart’, ‘Quantity’ and other WooCommerce product page elements in your form</li>
<li>Customize the WooCommerce ‘Add to Cart’ button and price format</li>
<li><a href="https://wsform.com/knowledgebase/calculated-fields/" target="_blank" rel="noopener noreferrer">Calculated fields</a></li>
<li><a href="https://wsform.com/knowledgebase/conditional-logic/" target="_blank" rel="noopener noreferrer">Conditional logic</a></li>
<li><a href="https://wsform.com/knowledgebase/tabs/" target="_blank" rel="noopener noreferrer">Multi-step forms</a></li>
<li>Run <a href="https://wsform.com/knowledgebase/introduction-actions/" target="_blank" rel="noopener noreferrer">WS Form actions</a> when an order is paid (e.g. Send a product customization to a <a href="https://wsform.com/knowledgebase/slack/" target="_blank" rel="noopener noreferrer">Slack</a> channel, or <a href="https://wsform.com/knowledgebase/run-wordpress-hook/" target="_blank" rel="noopener noreferrer">run a WordPress hook</a>)</li>
</ul>
<h2>How it Works</h2>
<p><img class="size-full wp-image-5281625 aligncenter" src="https://woocommerce.com/wp-content/uploads/2019/10/ws_form_pro_product_add_ons_woocommerce_add_form.jpg" alt="Adding a form to a product" width="980" height="559" /></p>
<p>Adding a form to a WooCommerce product is easy! Simply click on the WS Form tab under ‘Product data’ and choose a template or choose an existing form. You can also start with a blank template and create a fully customized form for your product.</p>
<p><img class="size-full wp-image-5281627 aligncenter" src="https://woocommerce.com/wp-content/uploads/2019/10/ws_form_pro_product_add_ons_woocommerce_form_assigned.jpg" alt="Assigned form" width="980" height="385" /></p>
<p>Managing your product customization is easy. Simply click ‘Edit Form’ to make changes to your form.</p>
<p><img class="size-full wp-image-5281634 aligncenter" src="https://woocommerce.com/wp-content/uploads/2019/10/ws_form_pro_product_add_ons_woocommerce_layout_editor.jpg" alt="Layout Editor" width="980" height="615" /></p>
<p>Use the powerful features of the WS Form PRO <a href="https://wsform.com/knowledgebase/the-layout-editor/" target="_blank" rel="noopener noreferrer">layout editor</a> to edit your product customization.</p>
<p><img class=" wp-image-5281628 aligncenter" src="https://woocommerce.com/wp-content/uploads/2019/10/ws_form_pro_product_add_ons_woocommerce_fields.gif" alt="WooCommerce Fields" width="421" height="212" /></p>
<p>Use the WooCommerce field types to fully customize where product components are positioned on your product page.</p>
<p><img class="size-full wp-image-4796928 aligncenter" src="https://woocommerce.com/wp-content/uploads/2019/09/5.-T-Shirt-customization.jpg" alt="T-Shirt Customization" width="980" height="559" /></p>
<p>Create product customizations that dovetail seamlessly into your website.</p>
<p><img class="size-full wp-image-4796926 aligncenter" src="https://woocommerce.com/wp-content/uploads/2019/09/3.-Your-product-is-customized-with-the-form.jpg" alt="Multi-Tab Forms" width="980" height="559" /></p>
<p>Create multi-step product customizations using all of the features available in WS Form PRO!</p>
<p><a class="woo-sc-button custom" href="https://woocommerce.wsform.com" target="_blank" rel="noopener noreferrer">View a demo of the WS Form Product Add-Ons extension</a></p>

WS Form PRO Product Custom Fields Add-Ons

<p>Create custom fields for products with 60+ customization field types. Customize product pages with tabs, conditional logic, repeaters, calculations, multi-step and more!</p>

Products By Attributes & Variations vs WS Form PRO Product Custom Fields Add-Ons