Override Javascript in a Plugin?

Question

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 ) {
            e.preventDefault();
            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
– mmm, Commented Sep 1, 2016 at 13:42

mmm · Accepted Answer · 2016-09-01 13:47:04Z

1

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/

answered Sep 1, 2016 at 13:47

mmm

4,0593 gold badges17 silver badges22 bronze badges

Do I just make an enqueue a JS file with that code?

crossbeats
– crossbeats

2016-09-01 13:49:59 +00:00
Commented Sep 1, 2016 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
– mmm

2016-09-01 13:54:49 +00:00
Commented Sep 1, 2016 at 13:54
I'm sorry - I'm not sure I know/understand what that means!

crossbeats
– crossbeats

2016-09-01 14:04:46 +00:00
Commented Sep 1, 2016 at 14:04
look in the codex : developer.wordpress.org/reference/functions/wp_enqueue_script

mmm
– mmm

2016-09-01 14:38:24 +00:00
Commented Sep 1, 2016 at 14:38
wp_enqueue_script( 'override-wc-tabs', 'path/to/my.js', array('wc-single-product'), '1.0', true )

Ismail
– Ismail

2016-09-01 14:38:56 +00:00
Commented Sep 1, 2016 at 14:38

| Show 2 more comments

Jeremy Ross · Accepted Answer · 2016-09-01 15:54:30Z

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.

Stack Exchange Network

Override Javascript in a Plugin?

2 Answers 2

Your Answer

Hot Network Questions

Override Javascript in a Plugin?

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions