Accotabs
Add the same tabs
to all products
To add the same tabs to all products, add this code before the plugin code. Then set tabs URL in tabsOptions.
<!-- Plugin Accotabs - Add Tabs To Product Additional Section --> <!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ --> <script> (function() { //////////////////////////////////////////////////////////////////////////////// var tabsOptions = { url: 'tabs-url', // Tabs URL design: false // Tabs Design ('accordion', 'tabs') }; // To add tabs only to products with certain categories, set filterByCategory // to true and add categories to categoriesFilter var filterByCategory = false; var categoriesFilter = [ 'apple', 'orange', ]; //////////////////////////////////////////////////////////////////////////////// function createTabs(tabsOptions){var tabs=document.createElement("div");return tabs.className="js-accotabs",tabs.setAttribute("data-url",tabsOptions.url),tabsOptions.design&&tabs.setAttribute("data-design",tabsOptions.design),tabs}function addTabsToAdditionalSection(tabsOptions){var additionalSection=document.querySelector(".ProductItem-additional")||document.querySelector(".ProductItem-summary")||document.querySelector(".product-description");additionalSection&&additionalSection.appendChild(createTabs(tabsOptions))}function getPostCategories(){var wrapper=document.querySelector(".hentry"),categories=[];return wrapper.className.split(" ").forEach((function(c){-1!==c.indexOf("category-")&&categories.push(c.replace("category-",""))})),categories}function filterCategories(categories){return categories.filter((function(c){return categoriesFilter.includes(c)})).length}function handler(){if(!document.querySelector(".collection-type-products.view-item"))return null;filterByCategory&&filterCategories(getPostCategories()),addTabsToAdditionalSection(tabsOptions)}document.addEventListener("DOMContentLoaded",handler),window.addEventListener("mercury:load",handler); })(); </script> <!-- Place Tabs After Additional Content --> <style> .ProductItem-additional { display: flex; flex-direction: column } .ProductItem-additional .sqs-layout { order: 0 } .ProductItem-additional .c-tabs__wrapper { order: 1 } </style> <!-- end Plugin Accotabs - Add Tabs To Product Aditional Info -->
Move Tabs Under Price
on Product Page.
To move tabs under price on a product page, add this code after the plugin code in Code Injection.
<!-- Move Tabs Under Price on Product Page --> <!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ --> <script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4/dist/ready.umd.min.js"></script> <script> function moveTabsUnderProductPrice(){ ready('.collection-type-products.view-item .c-tabs__wrapper', function(tabs) { var price = document.querySelector('.product-price'); price.parentNode.insertBefore(tabs, price.nextElementSibling); }); } moveTabsUnderProductPrice(); </script> <style> .collection-type-products.view-item .c-tabs__wrapper { order: 3; } </style> <!-- end Move Tabs Under Price on Product Page -->
Make Tabs Vertical
To make tabs vertical, add this style after the plugin code.
<!-- Make Tabs Vertical --> <style> .c-tabs__wrapper:not(.is-accordion) .c-tabs { display: flex; flex-wrap: wrap; } .c-tabs__tablist { display: flex; flex-direction: column; flex: 0 1 auto; } .c-tabs__tablist[hidden] { display: block; max-width: 200px; } .c-tabs__tablist li { margin: 0 !important; } .c-tabs__tablist::after { display: none !important; } .c-tabs__tablist + .c-tabs__content { flex: 1 1 0; } /* Disable Accordion */ @media (min-width: 641px) { .c-tabs__tablist[hidden] .c-tabs__tab { max-width: 0; } } </style> <!-- end Make Tabs Vertical -->
Remove all paddings
To remove all paddings inside a tab panel, add this code below the plugin code in Code Injection.
<style> /* Plugin Accotabs - Remove Paddings */ .c-tabs .page-section, .c-tabs .content-wrapper, .c-tabs .content { padding: 0 !important; width: 100% !important; max-width: 100% !important; min-height: 1px !important; } </style>