title: WooCommerce Long Description Nested Tab
body: <p>Answered by myself:
  Use shortcodes. These work on the product page, but cannot have objects using shortcodes built on the page via the backend.</p>
  <hr />
  <p>I have inserted a tab object into the long description of a product.</p>
  <p>It is <em>inside</em> the &quot;Description&quot; tab, which is the default functioning of the single-product page.</p>
  <p>The item in question has 4 different product size variations and I am including a tab with a spec sheet for each size.</p>
  <p>So far, I have been able to add the tab panel without any real issue. The only problems I have are:</p>
  <ol>
  <li>I cannot get the initial tab to be active. This is very important.</li>
  <li>I cannot seem to affect the styling of the tab panel or tabs. I think I might be able to figure this out and if not, it's not the end of the world.</li>
  </ol>
  <p>I am more familiar with HTML and CSS, but I am not so great with PHP and JS. I can code in C, so I'm not afraid of code and I understand PHP well enough. I just don't know the PHP code for WordPress/WooCommerce very well because I haven't read through it all.</p>
  <p>It took me only about 15 minutes to get the tab object working, but I am quite stumped for getting the initial panel open.</p>
  <p>The code I am using within the long_desc is based on a mix of the Tabs object from the WP Bakery standard tabs object and the WooCommerce classes from the &quot;Description tabs&quot;.</p>
  <p>I cannot put this information into custom tabs via functions.php (although I have added separate Shipping and Returns tabs using this method) because it needs to be inline with the content and because each set of tabs is unique to each item.</p>
  <p>I realize that this is a &quot;quick n dirty&quot; way of accomplishing things, and it's meant to be. I need to get this site rolling.</p>
  <p>For brevity's sake, I have removed the tables with the actual spec and just left a simple <code>&lt;p&gt;</code> footnote.</p>
  <p>Note that the code <em>should</em> only look correct when placed on a single-product page in WP. It borrows from libs used in tab-description.</p>
  <p>I just need to find out how to force it to load with the first tab active. On my site, it loads every time with no tabs active and the actual important information is not visible.</p>
  <p>I believe that the answer lies with creating a  portion that calls the JS to activate the first tab, but it's difficult to follow the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="woocommerce-tabs wc-tabs-wrapper " &gt;
      &lt;ul class="tabs wc-tabs" role="tablist"&gt;
              &lt;li class=" tab-title-description active"  id="tab-title-drrr" role="tab" aria-controls="tab-drrr"&gt;
                  &lt;a href="#tab-drrr" &gt;&lt;span &gt;27.5 - Standard&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="tab-title-description" id="tab-title-shhh" role="tab" aria-controls="tab-shhh"&gt;
                  &lt;a href="#tab-shhh"&gt;&lt;span &gt;27.5 - Boost&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="tab-title-description" id="tab-title-rrrr" role="tab" aria-controls="tab-rrrr"&gt;
                  &lt;a href="#tab-rrrr"&gt;&lt;span &gt;29 - Standard&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="tab-title-description" id="tab-title-zzz" role="tab" aria-controls="tab-zzz"&gt;
                  &lt;a href="#tab-zzz"&gt;&lt;span &gt;29 - Boost&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
           &lt;div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--drrr panel entry-content wc-tab active" id="tab-drrr" role="tabpanel" aria-labelledby="tab-title-drrr" style="display:block;"&gt;
           &lt;p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;"&gt;* XX1 freebody sold separately&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--shhh panel entry-content wc-tab" id="tab-shhh" role="tabpanel" aria-labelledby="tab-title-shhh" style=""&gt;
          &lt;p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;"&gt;* XX1 freebody sold separately&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--rrrr panel entry-content wc-tab" id="tab-rrrr" role="tabpanel" aria-labelledby="tab-title-rrrr" style=""&gt;
          &lt;p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;"&gt;* XX1 freebody sold separately&lt;/p&gt;           
           &lt;/div&gt;
           &lt;div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--zzz panel entry-content wc-tab" id="tab-zzz" role="tabpanel" aria-labelledby="tab-title-zzz" style=""&gt;
          &lt;p style="background-color: black; color: white; text-align: center; padding-bottom:8px; margin-top: 0px; margin-bottom: 4px;"&gt;* XX1 freebody sold separately&lt;/p&gt;       
           &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>