Accotabs

---

Añadir las mismas pestañas a todos los productos

Mover las pestañas debajo del precio en la página del producto

Mostrar las pestañas en vertical

Eliminar todos los espacios de relleno

---

Añadir las mismas pestañas «
» a todos los productos

Para añadir las mismas pestañas a todos los productos, añade este código antes del código del plugin. A continuación, configura las opciones de las pestañas.

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

---

Mueve las pestañas debajo del precio «
» en la página del producto.

Para desplazar las pestañas debajo del precio en la página de un producto, añade este código después del código del plugin en «Inyección de código».

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

---

Mostrar las pestañas en vertical

Para que las pestañas se muestren en vertical, añade este estilo después del código del complemento.

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

---

Eliminar todos los espacios de relleno

Para eliminar todos los espacios de relleno dentro de un panel de pestañas, añade este código debajo del código del complemento en «Inyección de código».

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