Want to run a JavaScript function just before a WooCommerce product is saved or published? This is a useful technique for adding custom validation, confirmation dialogs, or triggering any custom logic at the moment the “Publish” button is clicked in the WordPress product editor.

In this tutorial, I’ll show you exactly how to hook into the WooCommerce product save action using a properly enqueued JavaScript file — the right way, without hardcoding paths.

When Would You Need This?

There are several practical use cases for this technique:

  • Custom validation – check that a required custom field is filled before allowing the product to save
  • Confirmation dialog – ask the admin “Are you sure?” before publishing a product
  • Trigger an external event – fire an API call or analytics event when a product is created
  • Prevent accidental publishing – intercept the save action for review before it goes live

Step 1: Enqueue Your Custom JavaScript File

The first step is to tell WordPress to load your custom JavaScript file, but only on the product add/edit screen in the admin — not on every page.

Add the following code to the end of your child theme’s functions.php file:

function admin_queue( $hook ) {
    global $post;

    if ( $hook == 'post-new.php' || $hook == 'post.php' ) {
        if ( isset( $post->post_type ) && 'product' === $post->post_type ) {
            wp_enqueue_script(
                'custom-product-script',
                get_template_directory_uri() . '/js/custom.js',
                array( 'jquery' ),
                '1.0',
                true
            );
        }
    }
}
add_action( 'admin_enqueue_scripts', 'admin_queue' );

Step 2: Create the custom.js File

Now create a new file named custom.js inside your theme’s /js/ folder. If the /js/ folder doesn’t exist in your theme, create it.

The full path will look something like:

/wp-content/themes/your-theme-name/js/custom.js

You can create this file via:

  • FTP client (FileZilla, Cyberduck, etc.)
  • cPanel File Manager in your hosting control panel
  • Appearance > Theme File Editor in WordPress dashboard

Step 3: Add Your JavaScript Code

Open the custom.js file you just created and add the following code:

jQuery( document ).ready( function($) {
    $( '#publish' ).click( function() {
        alert( 'Hello World!' );
        return false;
    });
});

Save the file.

What this does: When the admin clicks the Publish button on any WooCommerce product page, the JavaScript intercepts the click event and fires your custom code — in this case, a simple alert() dialog. The return false at the end prevents the form from submitting until your code has run.

Customization Examples

Show a confirmation dialog before saving:

jQuery( document ).ready( function($) {
    $( '#publish' ).click( function() {
        var confirmed = confirm( 'Are you sure you want to publish this product?' );
        if ( ! confirmed ) {
            return false;
        }
    });
});

Validate a custom field before saving:

jQuery( document ).ready( function($) {
    $( '#publish' ).click( function() {
        var customField = $( '#your_custom_field_id' ).val();
        if ( customField === '' ) {
            alert( 'Please fill in the required field before publishing.' );
            return false;
        }
    });
});

Wrapping Up

Executing JavaScript before a WooCommerce product is saved opens up a wide range of possibilities — from simple confirmation dialogs to complex custom validation workflows. The key steps are:

  1. Enqueue your JS file properly using admin_enqueue_scripts — only on the product screen
  2. Create your custom.js file in your theme’s /js/ directory
  3. Hook into the #publish click event and run your custom logic

This is a clean, WordPress-standard approach that won’t conflict with WooCommerce updates or other plugins.

Frequently Asked Questions

Will this slow down my WordPress admin?

No. The script is only loaded on the product add/edit screen (post-new.php and post.php for the product post type). It won’t be loaded anywhere else in the admin or on the front end.

Does return false permanently block the product from saving?

Only if your code always returns false. In the basic example, the return false prevents the default form submission so your code can run first. In the confirmation dialog example, if the user clicks “OK”, the save proceeds normally. You control the logic.

Can I target the “Save Draft” button as well?

Yes, the Save Draft button has the ID #save-post. You can target both buttons like this:

$( '#publish, #save-post' ).click( function() { ... });

What if my theme doesn’t have a /js/ folder?

Simply create one. In your theme’s root directory (via FTP or File Manager), create a new folder named js and place your custom.js file inside it. The wp_enqueue_script call in Step 1 will find it there.

Should I use a child theme for this?

Yes, always. If you add the functions.php code to your parent theme, it will be overwritten the next time the theme updates. A child theme keeps your customizations safe permanently.

Can I do this without creating a separate JS file?

Yes you can use wp_add_inline_script() to add JavaScript inline instead of creating a separate file. However, for anything beyond a few lines of code, a separate file is cleaner and easier to maintain.