Accotabs

---

Add the same tabs to all products

Move Tabs Under Price on Product Page

Make Tabs Vertical

Remove all paddings

---

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>