Joel Joel - 4 years ago 388
Javascript Question

WooCommerce tabs not working in Divi theme

I have a website using an old version of the Wordpress Divi theme and a woocommerce store. Toward the bottom of the product page is a "description" and a "review" tab. It should be populated like on this page:
http://rattletree.com/wordpress2/product/joy-ep/

There is css there that says this:

<div class="panel entry-content wc-tab" style="display: block;">


When the tab is selected, it has
display: block;
and when a different tab is selected, it changes to
display: none;
.

That's how it should work. I'm building our new website and using a newer version of Divi, and the contents of the tab are not visible. I can see in the code, that they are staying on
display: none;
.

Here is the site that is not working:
https://learnmarimba.com/product/joy-ep/

Since this is a dynamic change, I guess this is being handled with javascript and not css, so I don't really know what I need to do to fix this? Any help would be greatly appreciated!

I have tried disabling all plugins and clearing cache, and noting has fixed the issue. I saw this thread: https://wordpress.org/support/topic/woocommerce-review-description-tabs-not-working, and it looks like my issue, but changing the function per that thread did not fix the problem.

Answer Source

UPDATE:

In wp-content/themes/Divi/js/custom.js:2644 change false to true. It might fix your problem. If it does, it's a known and reported to Divi bug that will most likely be fixed in their next release.

As line numbers are prone to change, this is where you should make the change:

//...
if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) {
    return false;
}
//...

Most probably this is due to a mismatch between your product template and the WooCommerce plugin. At some point, the class for tabs has been changed from woocommerce_tabs to woocommerce-tabs. From the looks of it, it seems like the template is ahead of the plugin. Either replace the woocommerce-tabs with woocommerce_tabs in your template file (if, for some reason, you don't want to update WC) or update WC (recommended).

From the info you provided, I can't be sure this will work, but it's worth a try.

Apart from this, one of your plugins is minifying and caching .js files rendering them undebugable. Maybe you should disable it during development?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download