Enej Bajgorić

ctlt-dev

oltdev

To add tabs to you post or pages just add this shortcode:
<pre><code>[tabs]
[tab title="title1"] tab content 
tab content 
[/tab]
[tab title="title2"] 
another content tab 
[/tab]
[/tabs]
</code></pre>
Here are the some attributes that the shortcode also excepts 
// default attributes 
 [tabs collapsible=true selected=’0′ event=’click’ position=’top’ ] 
 [tab title=”title1″] 
 tab content 
 [/tab] 
 [tab title=”title2″] 
 another content tab 
 [/tab] 
 [/tabs]
<ul>
<li>collapsible = true or false – weather the tabs should be allowed to be collapsed – this doesn’t work with twitter bootstrap </li>
<li>selected = integer for example – what tab should be selected. 0 means the first tab. 1 means the second tab etc. </li>
<li>event = ‘click’ or ‘mouseover’ – does do you user need to click on the tab or just mouse over to get to the content. Tip: Don’t use mouseover if you are concerned with mobile. </li>
<li>position = ‘top’ , ‘bottom’ , ‘left’, ‘right’ on what side do you want the tabs to appear. See screenshots for an example. </li>
<li>vertical_tabs = true or false – depreciated is the same as position = left</li>
</ul>
<h3>Sample CSS</h3>
Want to style the tabs a different way.
Here is some sample css to get you started. 
Another place to look for it would be the http://jqueryui.com/themeroller/, 
The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework. 
See the FAQ on how to deal with that case.
<pre><code>/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
 padding:.2em;
 zoom:1;
 clear:both;
 background:#FFF;
 padding:0;
 margin:0;
}

.tabs-shortcode.ui-tabs-nav {
 list-style:none!important;
 padding:.2em 0 0!important;
 margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}
* html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */

.tabs-shortcode .ui-tabs-nav li {
 position:relative;
 float:left;
 border:1px solid #CCC;
 background:#EEE;
 list-style:none!important;
 z-index: 100;
 padding:0;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
 background:#FFF;
 color:#111;
}

.tabs-shortcode .ui-tabs-nav li:before {
 content:"";
}

.tabs-shortcode .ui-tabs-nav li a {
 float:left;
 text-decoration:none;
 padding:2px 1em;
 color:#333;
 border:none!important;
}

.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
 cursor: default;
}

.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
 cursor:pointer;
}

.tabs-shortcode .ui-tabs-panel {
 display:block;
 border-width:0;
 background:none;
}

.tabs-shortcode .ui-tabs-hide {
 display:none!important;
}

.tabs-shortcode.ui-tabs-panel {
 clear:both;
}
/* Position Top and Bottom */
.tabs-shortcode-top .ui-tabs-nav,
.tabs-shortcode-bottom .ui-tabs-nav{
 margin-left:0!important;
}
.tabs-shortcode-top .ui-tabs-nav li,
.tabs-shortcode-bottom .ui-tabs-nav li{
 position:relative;
 float:left;
 position:relative;
 float:left;
}

/* Position Top */
.tabs-shortcode-top .ui-tabs-nav{
 border-bottom: 1px solid #CCC;
}
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
 padding-bottom:1px!important;
 border-bottom:0;
 margin:1px .3em -1px 0!important;
}
.tabs-shortcode-top .ui-tabs-nav li {
 border-bottom-width:0!important;
 margin:1px .3em 0 0!important;
}

/* Position Bottom */
.tabs-shortcode-bottom .ui-tabs-nav{
 border-top: 1px solid #CCC;
}
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-selected {
 padding-top:1px!important;
 border-top:0;
 margin:-1px .3em 1px 0!important;
}

.tabs-shortcode-bottom .ui-tabs-nav li {
 border-top-width:0!important;
 margin:0 .3em 1px 0!important; 
}


/* Position Left and Right */
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav{
 width: 150px;
 margin: 0!important;
}

.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-left,
.tabs-shortcode-right .ui-tabs-nav li,
.tabs-shortcode-right{
 position: relative;
 overflow: hidden;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-right .ui-tabs-nav li{
 margin:0 0 0.3em 0;
 width: 100%;
}
.tabs-shortcode-left .ui-tabs-nav li a,
.tabs-shortcode-right .ui-tabs-nav li a{
 width: 100%;
}
.tabs-shortcode-left .ui-tabs-panel,
.tabs-shortcode-right .ui-tabs-panel{
 margin-left: 165px;
}

/* Position Left */
.tabs-shortcode-left .ui-tabs-nav{
 border-right: 1px solid #CCC;
 padding: 0 1px 10px 0!important;
}
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-left .ui-tabs-nav li{
 float: left;
}
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-selected {
 padding-right:1px;
 border-right:0;
 margin:0 1px 0.3em 0;
}

/* Position Right */
.tabs-shortcode-right .ui-tabs-nav{
 border-left: 1px solid #CCC;
 padding: 0 0 10px 1px!important;
}
.tabs-shortcode-right .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav li{
 float: right;
}
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-selected {
 padding-left:1px;
 border-left:0;
 margin:0 0 0.3em 1px;
}
</code></pre>

Tabs Shortcode

Lets you add tabs to your post and pages using a shortcode.

YITHEMES

With our free plugin, you can improve the classic product page and create custom tabs to add useful content for your customers. You can add a description of your shop, images, FAQs, and more. With more structured product pages and targeted information, you can answer your customers’ doubts and push them to order.
You can disable the default WooCommerce tabs (Description, Additional information, Reviews, etc.), create unlimited tabs to show in all products, and use the built-in editor to insert text, images, and shortcodes. You can also customize the order of the tabs to decide their position on the product page.
Free version options:
<ul>
<li>
Create unlimited tabs to show globally across all products
</li>
<li>
Enter and format text using the built-in editor
</li>
<li>
Insert images into tabs
</li>
<li>
Use shortcodes inside tabs
</li>
<li>
Use the drag-and-drop feature to sort tabs
</li>
<li>
Disable WooCommerce default tabs
</li>
</ul>
<a href="https://plugins.yithemes.com/yith-woocommerce-tab-manager-free/product/yith-backpack/" rel="nofollow ugc">See how it works in the live demo of the free plugin ></a>
PREMIUM options 
Want to create advanced and unlimited tabs? Go PREMIUM!
With the premium version of the plugin, you can:
<ul>
<li>
Create tabs to show only on specific products
</li>
<li>
Create tabs to show only on products from specific categories
</li>
<li>
Create tabs with image and video galleries
</li>
<li>
Create FAQ tabs to answer common customers questions
</li>
<li>
Create tabs with a contact form
</li>
<li>
Create tabs with downloadable files
</li>
<li>
Create tabs with a Google map related to your products
</li>
<li>
Add custom icons to identify the tabs
</li>
<li>
Override the content of WooCommerce tabs for each product
</li>
<li>
Hide tabs on mobile devices (smartphones, tablets, etc.)
</li>
<li>
Customize the colors of the elements inside the tabs
</li>
</ul>
<a href="https://plugins.yithemes.com/yith-woocommerce-tab-manager/product/yith-long-sleeve-sport/" rel="nofollow ugc">Check the live demo of th premium version ></a>

YITH WooCommerce Tab Manager

although the interface is barebone... I can manage with some simple h and p, does it job :)



working, just what I needed

This plugin name is misleading.  It adds a single tab globally (same content on all products) to every product. I guess its useful in some limited cases.

While I'm a fan of plugins with simple focused use cases, YITH WooCommerce *Tab Manager*, really does nothing to *manage* your  tabs.  "YITH WooCommerce Add One Custom Tab Globally" would be a better name for it.  

I'm left to the conclusion this plugin is solely to upsell people to a paid version.

Of very limited use

Improve your WooCommerce product pages by adding custom tabs and ad hoc content for your customers

Tabs Shortcode vs YITH WooCommerce Tab Manager