How To Differentiate Drafted product and Publish Product through Color?

You can actually achieve this using simple CSS. If you look at the HTML you can see that each row has some classes:

 <tr class="post-1349 type-page status-draft hentry alternate iedit author-self level-0" id="post-1349">

There you can see that there actually is a class that indicates a draft: status-draft

So now by simply adding an admin style you can easily style drafts. Just create a css file in wp-content/themes/your-theme-name/admin-style.css and add this:

.status-draft {
  background-color: red;
}

…or published posts:

.status-publish {
  background-color: green;
}

Now you need to add this to your wp-content/themes/your-theme-name/functions.php file:

add_action( 'admin_enqueue_scripts', 'wpse_175526_load_admin_style' );
function wpse_175526_load_admin_style() {
    wp_enqueue_style( 'wpse_175526_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
}

For details on how you add an admin style please head over to this answer: adding custom stylesheet to wp-admin

Related Posts: