Is it possible to override Javascript in a plugin with a child theme?

Specifically I'm trying to override a portion of a WooCommerce product page - I would like to get rid of the tabbed content areas, and instead have all of the content visible with the "tabs" then being anchor links down the page.

I've figured out how to do that on a local install by deleting a portion of Javascript within the WooCommerce plugin files - but that's obviously not a workable solution longterm.

I would like to essentially dequeue the Javascript in the plugin, and enqueue my own file with the unneeded portion removed.

This is the bit of code I need to be rid of, if there's another way to go about overriding it?

.on( 'click', '.wc-tabs li a, ul.tabs li a', function( e ) {
            var $tab          = $( this );
            var $tabs_wrapper = $tab.closest( '.wc-tabs-wrapper, .woocommerce-tabs' );
            var $tabs         = $tabs_wrapper.find( '.wc-tabs, ul.tabs' );

            $tabs.find( 'li' ).removeClass( 'active' );
            $tabs_wrapper.find( '.wc-tab, .panel:not(.panel .panel)' ).hide();

            $tab.closest( 'li' ).addClass( 'active' );
            $tabs_wrapper.find( $tab.attr( 'href' ) ).show();
  • have you tried to change the CSS classes of the tabs in order that this javaScript code doesn't find them ?
    – mmm
    Sep 1 '16 at 13:42

You can disable this portion of JavaScript code with this code :

$( 'body' ).off( 'click', '.wc-tabs li a, ul.tabs li a');

.off( detach the listeners : http://api.jquery.com/off/

  • Do I just make an enqueue a JS file with that code?
    – crossbeats
    Sep 1 '16 at 13:49
  • yes and make your script dependant of wc-single-product to be sure to have it called after the code of Woocommerce
    – mmm
    Sep 1 '16 at 13:54
  • I'm sorry - I'm not sure I know/understand what that means!
    – crossbeats
    Sep 1 '16 at 14:04
  • look in the codex : developer.wordpress.org/reference/functions/wp_enqueue_script
    – mmm
    Sep 1 '16 at 14:38
  • wp_enqueue_script( 'override-wc-tabs', 'path/to/my.js', array('wc-single-product'), '1.0', true )
    – Ismail
    Sep 1 '16 at 14:38

Rather than hide them with javascript (you could also do that with CSS for that matter), the better solution would be to not generate the tabs to begin with. This is from the WooCommerce docs.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );  // Remove the description tab
    unset( $tabs['reviews'] );  // Remove the reviews tab
    unset( $tabs['additional_information'] );  // Remove the additional information tab

    return $tabs;

From there you can edit the template file to display the content however you want to view it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.