If you want to hide all the products in WooCommerce without the image, you can achieve this using a simple action hook that reset the meta query based on the product thumbnail value. WooCommerce hide products without image code snippet in this post can be added on any WooCommerce theme and it will work seamlessly.
If you missed out on the previous tutorial on WoooCommerce hide products without price, it can be a good place to start to understand how meta queries work in WordPress and WooCommerce.
WooCommerce Hide Products Without Image
To ide the WooCommerce products without the images you need to create an action hook and a callback function that checks if the product thumbnail value is present.
If the thumbnail value is empty we reset the meta query to only show those products apart from those without the thumbnail key value.
The following is the sample code that will help to hide all the products on the shop page without the image.
add_action( 'woocommerce_product_query', 'njengah_hide_products_without_image' );
function njengah_hide_products_without_image( $query ) {
$query->set( 'meta_query', array( array(
'key' => '_thumbnail_id',
'value' => '0',
'compare' => '>'
))
);
}
You can add this code to the functions.php of your theme and you will successfully hide the products without the images.
How WordPress Meta Queries Work
If you have not worked with meta queries before, you need to learn from this useful WordPress development resource – WP_Meta_Query
Basically WP_Meta_Query is a class that is defined in wp-includes/meta.php that generates the necessary SQL for meta-related queries.
Meta Queries Accepted Arguments
The following arguments can be passed in a key=>value paired array.
- meta_key (string) – Custom field key. ( You must sanitize this yourself )
- meta_value (string|array) – Custom field value. ( You must sanitize this yourself )
- meta_type (string) – Custom field type (see type below for options).
- meta_compare (string) – Operator to test the 'meta_value' (see compare below for possible values).
- meta_query (array) – Contains one or more arrays with the following keys:
- key (string) – Custom field key.
- value (string|array) – Custom field value. It can be an array only when compare is 'IN', 'NOT IN', 'BETWEEN', or 'NOT BETWEEN'. You don’t have to specify a value when using the 'EXISTS' or 'NOT EXISTS' comparisons in WordPress 3.9 and up.
(Note: Due to bug #23268, value was required for NOT EXISTS comparisons to work correctly prior to 3.9. You had to supply some string for the value parameter. An empty string or NULL will NOT work. However, any other string will do the trick and will NOT show up in your SQL when using NOT EXISTS. Need inspiration? How about 'bug #23268'.) - compare (string) – Operator to test. Possible values are ‘=’, ‘!=’, ‘>’, ‘>=’, ‘<‘, ‘<=’, ‘LIKE’, ‘NOT LIKE’, ‘IN’, ‘NOT IN’, ‘BETWEEN’, ‘NOT BETWEEN’, ‘EXISTS’ (only in WP >= 3.5), and ‘NOT EXISTS’ (also only in WP >= 3.5). Values ‘REGEXP’, ‘NOT REGEXP’ and ‘RLIKE’ were added in WordPress 3.7. Default value is ‘=’.
- type (string) – Custom field type. Possible values are ‘NUMERIC’, ‘BINARY’, ‘CHAR’, ‘DATE’, ‘DATETIME’, ‘DECIMAL’, ‘SIGNED’, ‘TIME’, ‘UNSIGNED’. Default value is ‘CHAR’.
Conclusion
In this post, I have outlined how you can use the meta query to hide the WooCommerce products without the image by targeting the 'key' => '_thumbnail_id', the key to check if the value is empty. This is the same approach we used in this post – WooCommerce hide products without a price.
Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.