Skip to content

Instantly share code, notes, and snippets.

Embed
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>
<html>
<head>
<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;
}
</style>
</head>
<body>
<p><strong>A temporary page used for checking and troubleshooting products.</strong></p>
<div class="wrapper">
<?php
// 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>
<ul>
<?php $variations = $product->get_available_variations(); ?>
<?php
foreach ( $variations as $variation ) { ?>
<li>
<img src="<?php echo $variation['image_src']; ?>"/>
<span><?php echo $variation['attributes']['attribute_pa_colours']; ?></span>
</li>
<?php }
?>
</ul>
<?php
}
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
?>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment