Woocommerce product tabs

<!-- wp:paragraph -->
<p>This block renders the Woocommerce tab system.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It has three possible designs</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="designs-for-tabs">Designs for Tabs</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="tabs-for-woocommerce">Tabs for woocommerce</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2931,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/tabs-1024x247.jpg" alt="" class="wp-image-2931"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="toggles-for-woocommerce">Toggles for woocommerce</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This type of design can be useful if you don't have too much content on the page or you want to have an emphasis on images, so you need something more compact for tabbed content</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2932,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/tabs3-1024x441.jpg" alt="" class="wp-image-2932"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="sections-for-woocommerce">Sections for Woocommerce</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This type shows tabs as unstyled sections without scripts. All content is visible at once in a stacked view. You have full freedom to style tiles, sections, borders, shadows, backgrounds of panels</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2933,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/tabs4-1024x554.jpg" alt="" class="wp-image-2933"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="section-with-links">Section with links</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is combination of tabs and sections. In short, you have tabs links at top, but all items are visible on page and link in tab will scroll to proper section. You can also use "Section" and "Links" items separately on page</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="separate-section">Separate section</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want to show separate section on page, use this option. This way allows you to put specific section outside tabs. For example, you can put specification near product description. Also, you can disable default tabs in tab block. For example, you can put all tabs in one place, but disable there rating tab and put it in another place.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="design">Design </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Each element in tabs can be configurable via Design component</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-792a9a7","width":["300px",null,null,null],"originalWidth":530,"originalHeight":670,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2023/05/tabsdesign.png","mediaid":4550,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-792a9a7" id="gspb_image-id-gsbp-792a9a7"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/tabsdesign.png" data-src="" alt="" loading="lazy" width="300px" height="670"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="managing-custom-tabs">Managing custom tabs</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Woocommerce has no inner system to add custom tabs, so we added such an option in Woocommerce - settings - Greenshift tools</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2934,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/tabs2-1024x769.jpg" alt="" class="wp-image-2934"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It's working simply. Add the title of the tab and content. You can use HTML for content and shortcodes. By the way, you can make a reusable template with dynamic fields from Woocommerce or query addon and copy the shortcode of the reusable template in this area. In this way, you will have dynamic content for tabs. Anyway, you can use also shortcodes from third-party plugins</p>
<!-- /wp:paragraph -->