How to Pass Data Between PHP and JavaScript in WordPress & WooCommerce

Passing data between PHP and JavaScript can be tricky—especially when trying to avoid page reloads or dealing with dynamic content. Fortunately, WordPress and WooCommerce offer several tools to make this easier, such as wp_localize_script() and wc_enqueue_js().

In this post, we’ll explore the most common methods for passing data between PHP and JavaScript, explain when to use each one, and offer practical examples.

1. Using wp_localize_script() to Pass PHP Data to JavaScript

One of the most widely used methods in WordPress is wp_localize_script(). Originally intended for localization and translations, it’s now commonly used to attach PHP data to JavaScript files.

Here’s an example:

add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );

function enqueue_custom_script() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true );

    $data_array = array( 123, 456, 789 ); // Replace with your dynamic data
    wp_localize_script( 'custom-js', 'myData', array(
        'imageIDs' => $data_array
    ));
}

This method is ideal for larger or more complex data structures, and it integrates naturally with WordPress’s script queuing system.

2. Embedding PHP Data in HTML Data Attributes

For small or relatively static data sets, embedding PHP data directly into HTML using data attributes is a simple and effective solution. JavaScript can then retrieve this data via the DOM.

Example:

<?php
$data_array = array( 123, 456, 789 ); // Replace with your dynamic data
echo '<div id="gallery" data-image-ids="' . esc_attr( json_encode( $data_array ) ) . '"></div>';
?>

<script>
const imageIDs = JSON.parse(document.getElementById('gallery').dataset.imageIds);
console.log(imageIDs); // Access your image IDs here
</script>

This approach doesn’t require enqueuing additional JavaScript and can be more cache-friendly. It’s best suited for small, static data sets or when injecting data into specific templates.

3. Using wc_enqueue_js() in WooCommerce

When working within WooCommerce, wc_enqueue_js() is a handy tool that lets you inject JavaScript directly from PHP without needing to register or enqueue a new script.

Example:

$data_array = array( 123, 456, 789 ); // Replace with your dynamic data
wc_enqueue_js( "
    var imageIDs = " . json_encode( $data_array ) . ";
    console.log(imageIDs);
");

This is great for lightweight customizations or injecting data into existing WooCommerce templates. It avoids the need for wp_localize_script() when you’re simply echoing inline JavaScript.

Summary

Each of these methods has its strengths:

• wp_localize_script() – Best for passing large or complex datasets tied to enqueued JavaScript files.
• HTML Data Attributes – Ideal for small, static data sets that are tied to specific DOM elements.
• wc_enqueue_js() – Best for WooCommerce-specific tweaks where you want to quickly inject JavaScript without registering new files.

Choosing the right method depends on your project’s complexity, performance goals, and integration needs.