Creating a Dynamic Product Screen in WordPress WooCommerce

Photo by the blowup on Unsplash

Creating a Dynamic Product Screen in WordPress WooCommerce

Keep Track of Product History!

Hello there! As you might know I'm a bit of a Python Developer and you might wonder, what's a Python guy doing in the WordPress world? Well, that's the magic of being in tech—you're never confined to one box!

So, why did I delve into WordPress and WooCommerce? Simple: I wanted to create a solution that could provide transparency and accountability within the WooCommerce ecosystem. Knowing who did what and when can be vital for many online businesses. Plus, I wanted to offer a simple way to implement this, and what better way than through the snippets plugin for WordPress?

Let's dive into the specifics, shall we?

What You Will Need:


What Does the Code Do?

This script will add a section to your product edit screen in WooCommerce. The section will include two things:

  1. When the product was created and by who.

  2. A list that displays the date, time, and username of anyone who edited the product.


The Code: What's Happening Under the Hood?

Before getting into the code, let's break it down, bit by bit.

Adding the Product Screen Element

To add an element to the product screen, we'll hook into the WooCommerce API and define a function that adds our custom section.

// Hook to add the product data tab
add_filter( 'woocommerce_product_data_tabs', 'add_custom_product_data_tab' , 99 , 1 );

Here, we use the add_filter function to add our custom tab using the woocommerce_product_data_tabs hook.


Displaying Product Creation Info

We'll need to fetch details about the product creation date and the user who created it.

// Get Product created details
$product_id = $post->ID;
$product = wc_get_product($product_id);
$product_created = $product->get_date_created();
$author_id = get_post_field ('post_author', $product_id);

Here, we fetch the product ID, and use WooCommerce functions to get the date it was created ($product_created). We also use WordPress functions to get the ID of the author ($author_id).


Displaying Product Edit History

To track edits, we'll hook into WordPress's save_post action.

// Hook when the product is saved to save edit history
add_action( 'save_post', 'save_product_edit_history', 10, 3 );

Here, we use the add_action function to call our custom function save_product_edit_history every time a product is saved. This allows us to keep track of edits.


How to Add This to WordPress Using Snippets Plugin

  1. Open your WordPress dashboard and navigate to the Snippets plugin.

  2. Create a new snippet and copy-paste the entire code into it.

  3. Save and activate the snippet.


The Complete Code

// Hook to add the product data tab
add_filter( 'woocommerce_product_data_tabs', 'add_custom_product_data_tab' , 99 , 1 );
function add_custom_product_data_tab( $tabs ) {
    $tabs['custom_tab'] = array(
        'label' => __( 'Product History', 'my_text_domain' ),
        'target' => 'custom_product_data',
    );
    return $tabs;
}

// Show product created details and history of edits
add_action('woocommerce_product_data_panels', 'custom_product_data_fields');
function custom_product_data_fields() {
    global $post;

    // Get Product created details
    $product_id = $post->ID;
    $product = wc_get_product($product_id);
    $product_created = $product->get_date_created();
    $author_id = get_post_field ('post_author', $product_id);
    $author = get_the_author_meta( 'display_name', $author_id );

    echo '<div id="custom_product_data" class="panel woocommerce_options_panel hidden">';
    echo '<strong>Created On:</strong> ' . $product_created;
    echo '<br>';
    echo '<strong>Created By:</strong> ' . $author;
    echo '<br>';

    // Show edit history
    $edit_history = get_post_meta($product_id, '_edit_history', true);
    if ($edit_history) {
        echo '<strong>Edit History:</strong>';
        echo '<ul>';
        foreach ($edit_history as $edit) {
            echo '<li>' . $edit['time'] . ' by ' . $edit['username'] . '</li>';
        }
        echo '</ul>';
    }
    echo '</div>';
}

// Hook when the product is saved to save edit history
add_action( 'save_post', 'save_product_edit_history', 10, 3 );
function save_product_edit_history( $post_id, $post, $update ) {
    if ($post->post_type == 'product') {
        $current_user = wp_get_current_user();
        $edit_history = get_post_meta($post_id, '_edit_history', true);
        if (!$edit_history) $edit_history = array();
        $edit_history[] = array('time' => current_time('mysql'), 'username' => $current_user->user_login);
        update_post_meta($post_id, '_edit_history', $edit_history);
    }
}

And there you have it! A complete guide to adding a dynamic product screen to your WordPress WooCommerce site. Give it a try and see how it adds another layer of transparency to your online business. Cheers! 🚀

Did you find this article valuable?

Support Theo van der Sluijs by becoming a sponsor. Any amount is appreciated!