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

<!-- Plugin Accotabs - Add Tabs To Product Additional Section -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ -->

<!-- Add Tabs To Product Additional Section - Options Block -->
<!-- This block can be added before the plugin code or to any product page or to the shop header code injection -->
<script>
////////////////////////////////////////////////////////////////////////////////


// Options are the same as in the plugin instructions
const options = {
  url: 'tabs-url', // Tabs URL
  design: false,  // 'accordion' or 'tabs'
  oneTabOpen: false, // true
  openSpecificTab: 0, // number of a specific tab, for example 1
  openTabOnHover: false // true
};

// To add tabs only to products with certain categories or tags, set filterByCategory or filterByTag
// to true and add categories or tags you want to filter by in categoriesFilter or tagsFilter
const filter = {
  byCategory: false, // true
  byTag: false, // true
  categories: [
    'apple',
    'orange',
  ],
  tags: [
    'delicious',
    'soft',
  ]
}
////////////////////////////////////////////////////////////////////////////////
document.addEventListener('DOMContentLoaded', function() { addTabsToProductAdditionalSection(options, filter) });
</script>
<!-- end Add Tabs To Product Additional Section - Options Block -->

<!-- Add Tabs To Product Additional Section - Function -->
<!-- This block should be added before the plugin code -->
<script>function addTabsToProductAdditionalSection(e,t){function n(e){const t=document.querySelector(".ProductItem-additional")||document.querySelector(".ProductItem-summary")||document.querySelector(".product-description");t&&t.appendChild(function(e){const t=document.createElement("div");return t.className="js-accotabs",t.setAttribute("data-url",e.url),e.design&&t.setAttribute("data-design",e.design),e.oneTabOpen&&t.setAttribute("data-one-tab-open",e.oneTabOpen),e.openSpecificTab&&t.setAttribute("data-open-specific-tab",e.openSpecificTab),e.openTabOnHover&&t.setAttribute("data-open-tab-on-hover",e.openTabOnHover),t}(e))}function o(e="category"){const t=document.querySelector(".hentry, .product-detail"),n=[];return t.className.split(" ").forEach((function(t){-1!==t.indexOf(`${e}-`)&&n.push(t.replace(`${e}-`,""))})),n}function r(e,t){return e.filter((function(e){return t.includes(e)})).length}function c(){if(!document.querySelector(".collection-type-products.view-item"))return null;(t.byCategory&&r(o(),t.categories)||t.byTag&&r(o("tag"),t.tags)||!t.byCategory&&!t.byTag)&&n(e)}c(),window.addEventListener("mercury:load",c)}</script>
<!-- end Add Tabs To Product Additional Section - Function -->

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