<h2></h2>
<p>Responsive design is today’s web standard. But default WooCommerce product detail tabs are horizontal and not responsive. This plugin transforms tabs into beautiful vertical/accordion tabs.</p>
<ol>
<li>After the plugin is installed, please enable vertical tabs for product details by going to WooCommerce –> Settings –> Products –> Vertical Product Tab.</li>
</ol>
<p><img class="size-medium wp-image-6564808 aligncenter" src="https://woocommerce.com/wp-content/uploads/2020/10/screenshot-localhost-2020.10.02-21_22_57.png?w=620" alt="" width="620" height="430" /></p>
<p>2. Enabling this will create vertical/accordion tabs.</p>
<p><img class="size-medium wp-image-6564833 aligncenter" src="https://woocommerce.com/wp-content/uploads/2020/10/WooCommerce-vertical-tabs-for-product-details.png?w=620" alt="" width="620" height="129" /></p>
<p>3. Customers can find information more efficiently on mobile devices.</p>
<p><img class="size-medium wp-image-6564848 aligncenter" src="https://woocommerce.com/wp-content/uploads/2020/10/WooCommerce-accordion-tabs-for-product-details.png?w=620" alt="" width="620" height="199" /></p>
<h2><strong>Benefits</strong></h2>
<ol>
<li>Transform old horizontal product detail tabs into vertical/accordion tabs.</li>
<li>The responsive design means that customers can find information easily on mobile and tablet devices.</li>
<li>Product detail tabs can also be used as an accordion on desktop.</li>
<li>The feature is very useful when products have many tabs.</li>
<li>Admins can choose to customize active tab background colors, font colors, inactive tab colors, etc.</li>
</ol>
<h2>Usage</h2>
<p>Once you enable “Vertical And Accordion Product Detail Tabs,” you can see that your product detail page tabs now transform to vertical and accordion tabs.</p>
<h3>Vertical Tabs View</h3>
<p><img class="alignnone size-medium wp-image-2748759" src="https://woocommerce.com/wp-content/uploads/2020/10/WooCommerce-Vertical-accordion-product-details-tabs-screen.png?w=367" alt="" width="367" height="550" /></p>
<h3>Accordion Tabs View</h3>
<p><img class="alignnone size-medium wp-image-2748760" src="https://woocommerce.com/wp-content/uploads/2020/10/WooCommerce-Vertical-accordion-product-details-tabs-screen-responsive.png?w=375" alt="" width="375" height="550" /></p>
<p> </p>
<h3>Requirements</h3>
<p>Minimum PHP version: 5.2</p>
<p>Transform old horizontal product detail tabs to vertical/accordion tabs.</p>
<h2><strong>For More Info</strong></h2>
<div class="post-theme-info" style="padding: 10px 0 8px;text-align: center">
<p><a class="button green" href="https://www.i13websolution.com/wp-test/product/beanie/">Demo</a>  <a class="button green" href="https://woocommerce.com/document/2-0/vertical-and-accordion-product-detail-tabs/">View Documentation</a></p>
</div>

Vertical & Accordion Product Detail Tabs

<p>This plugin transforms old horizontal product detail tabs to vertical/accordion tabs.</p>

<ul class="wccom-tick-list-primary">
<li>Add official EU Energy Labels to your WooCommerce products.</li>
<li>Display labels on both shop and individual product pages.</li>
<li>Enable tooltip previews on hover for product labels.</li>
<li>Supports both current and legacy EU Energy Label formats.</li>
<li>Customize label placement per product or globally via settings.</li>
<li>Optional image upload for custom tooltips.</li>
</ul>
<hr class="wccom-product-heading__hr" />
<h2>Add EU Energy Labels to Product and Shop Pages</h2>
<p>Products that consume energy — such as appliances, electronics, lighting, and vehicles — are required by EU law to display specific energy labels. These labels provide transparent information about energy consumption and efficiency. The <strong>EU Energy Label for WooCommerce</strong> plugin helps store owners comply by generating and displaying official EU labels directly on their online products.</p>
<h2><strong>Overview</strong></h2>
<p>The <strong>EU Energy Label for WooCommerce</strong> plugin allows you to generate and manage EU-compliant energy labels for your products. You can display both new and legacy versions of the label as needed. The plugin also includes label rating support and tooltip functionality.</p>
<p>The EU energy label is a powerful tool to help consumers make informed and eco-friendly purchasing decisions.</p>
<h2><strong>Enable and Manage EU Energy Labels</strong></h2>
<p>Flexible admin settings allow you to activate labels on product, category, tag, archive, and individual product pages with just a few clicks.</p>
<h3><strong>How does it work?</strong></h3>
<ul class="wccom-tick-list-secondary">
<li>Enable labels globally for product and shop pages via the plugin’s settings page.</li>
<li>Set label position using dropdown options in the plugin settings.</li>
<li>Customize or override label settings at the individual product level.</li>
</ul>
<h2><strong>Assigning Labels to Products</strong></h2>
<p>To set a label for a product, open the product edit screen and use the dedicated “EU Energy Label” tab:</p>
<ol>
<li>Navigate to the product edit screen and click on the EU Energy Label tab.</li>
<li>Enable the label and choose between single or dual label types.</li>
<li>Select the appropriate label category and optionally upload a custom image or tooltip.</li>
</ol>
<p><img class="alignnone wp-image-18734004992924 size-medium" src="https://woocommerce.com/wp-content/uploads/2021/09/Screenshot-2025-03-04-134614.png?w=896" alt="Energy Label for WooCommerce Product Page Setting" width="896" height="356" /><br />
<img class="alignnone wp-image-18734004992926 size-medium" src="https://woocommerce.com/wp-content/uploads/2021/09/Screenshot-2025-03-04-134626.png?w=896" alt="Energy Label for WooCommerce Label Type Selection" width="896" height="352" /></p>
<h2><strong>Front-End Display</strong></h2>
<h3><strong>Shop Page</strong></h3>
<p>EU energy labels appear on shop and archive pages. The label color varies based on product category, consistent with EU standards.</p>
<p><img class="aligncenter wp-image-8506734 size-full" style="border: 1px solid #674399" src="https://woocommerce.com/wp-content/uploads/2021/08/item-page-1.png" alt="Energy Label Shop Page Display" width="1621" height="869" /></p>
<h3><strong>Tooltips</strong></h3>
<p>Hovering over the label icon reveals a tooltip showing the full energy label. This enhances usability on shop and category pages.</p>
<p><img class="alignnone wp-image-8506754 size-full" style="border: 1px solid #674399" src="https://woocommerce.com/wp-content/uploads/2021/08/item-page-2.png" alt="On Hover Label Display EU" width="1637" height="777" /></p>
<h2><strong>Product Page</strong></h2>
<p>By default, energy labels display on the right side of the product image, with alternative positioning available in settings.</p>
<p><img class="aligncenter wp-image-8326817 size-full" style="border: 1px solid #674399" src="https://woocommerce.com/wp-content/uploads/2021/07/screen-6.png" alt="Product Page Eu Label Display" width="1393" height="673" /></p>
<h3><strong>Compatible With Popular Themes & Builders</strong></h3>
<ul class="wccom-tick-list-secondary">
<li>Elementor Builder</li>
<li>WPBakery Builder</li>
<li>Divi Builder</li>
<li>Storefront Theme</li>
<li>Enfold Theme</li>
<li>Avada Theme</li>
<li>Woodmart Theme</li>
<li>Divi Theme</li>
<li>Flatsome Theme</li>
<li>Porto Theme</li>
<li>XStore Theme</li>
<li>Shopkeeper Theme</li>
</ul>
<h3><strong>Translation Ready</strong></h3>
<p>The plugin includes a .POT file for easy translation and is fully compatible with multilingual plugins such as WPML and Polylang.</p>

EU Energy Label

<p>Easily add official EU Energy Labels to WooCommerce products. Stay compliant with EU regulations, improve transparency, and boost customer trust. Simple setup and fully customizable display.</p>

Vertical & Accordion Product Detail Tabs vs EU Energy Label