View Single Post
  #19  
Old 02-16-2017, 07:48 PM
Una Q's Avatar
Una Q Una Q is offline
Ecwid Team
 
Join Date: Nov 2016
Posts: 151
Default

Hello, Annelisa!

Thank you for contacting us. I am really sorry you faced difficulties with tabs adding! I will be happy to help.

I’ve checked the way tabs are added to the product description in a Wix website and it works properly. Also, I’ve inspected your product descriptions in your control panel and found out that you didn’t paste the right code in product description fields. I can’t examine your Wix settings, so let me just provide you with a detailed instruction.

In order to add tabs you need to follow the next steps:

1) Go to Wix HTML Editor->Pages->"Online Store” page. Then click “Settings” button, Choose “Design” tab and scroll down to Advanced settings. There is a box where you can add the code.






You need to add the following code there:

Quote:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
if (page.type == "PRODUCT") {
$( "#tabs" ).tabs();
}
})
</script>
2) Then go to your Ecwid control panel->Catalog->Products, open a product to edit and paste the below code in the description tab->HTML editor




Once you open HTML editor, add the following code there:

Quote:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab name 1</a></li>
<li><a href="#tabs-2">Tab name 2</a></li>
<li><a href="#tabs-3">Tab name 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab content 1</p>
</div>
<div id="tabs-2">
<p>Tab content 2</p>
</div>
<div id="tabs-3">
<p>Tab content 3</p>
</div>
</div>


Please remember to rename "Tab name" to the titles of your description tabs and replace the "Tab content” with your own description.

3) And the last step — go to your Ecwid control panel> Settings>Design->Edit Theme and add the following code to your current CSS theme (open the link and copy the code): http://pastebin.com/raw/u0sCiQyf Save the changes.


I’ve just added tabs to the product description in my test store on a Wix website and they all are displayed as they should:




That’s it. I really hope this helps! If you have any further questions, please feel free to ask.

Best regards,
Una Q., Ecwid Support Team
The Following 2 Users Say Thank You to Una Q For This Useful Post:
Annelisa (02-17-2017), smartMart (02-17-2017)