Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
WooCommerce - template to output all product names and their variation images. This template provides a quick way to output the titles of all products, with their variation images underneath. Useful as a quick way to check which product variations do not have an image, or to check that they are all correct.
<!doctype html>
<meta charset="utf-8">
<title>Testing document</title>
<style type="text/css">
* {
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif;
.wrapper {
position: relative;
box-sizing: border-box;
flex: 0 auto;
ul {
display: flex;
flex-flow: row wrap;
padding: 0;
ul li {
display: inline;
list-style: none;
flex-basis: 160px;
width: 160px;
border: 1px solid #CCC;
margin-bottom: 20px;
ul li span {
font-size: 14px;
display: block;
padding: 5px;
img {
max-width: 160px;
<p><strong>A temporary page used for checking and troubleshooting products.</strong></p>
<div class="wrapper">
// WP_Query arguments
$args = array (
'post_type' => array( 'product' ),
'post_status' => array( 'publish' ),
'posts_per_page' => '-1',
'order' => 'ASC',
'orderby' => 'title',
// The Query
$products = new WP_Query( $args );
// The Loop
if ( $products->have_posts() ) {
while ( $products->have_posts() ) {
$products->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php $variations = $product->get_available_variations(); ?>
foreach ( $variations as $variation ) { ?>
<img src="<?php echo $variation['image_src']; ?>"/>
<span><?php echo $variation['attributes']['attribute_pa_colours']; ?></span>
<?php }
} else {
// no posts found
// Restore original Post Data
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment