We are helping a client that has a WordPress WooCommerce site that was losing search engine visibility for years due to hundreds of code, configuration, and content issues from years of neglect, installed and uninstalled plugins, and dozens of themes.
With the new site launched, we’ve been observing the performance of the site and recently received the following Google Search Console message:
We were surprised that the company had products listed in WooCommerce that didn’t have a product image set. When we crawled the newly launched site, we didn’t see any problems… this was because the new theme had a placeholder image that appeared whenever an image was not set. As a result, there were no errors for images not found.
WooCommerce Products List
Our next step was to identify the products within the site where there were no images set. That’s not an easy task when there are hundreds of products to filter through. As a result, we wrote our own filter in WooCommerce products to filter the list to products with no product image set.
Now we can easily browse the list and update the product images where necessary without effort. Here’s how we did it.
Add Filter To WooCommerce Admin Products List
Within the client’s child theme functions.php page, we added the following two sections of code. First, we build the filter field:
// Add a filter on product for set product image
add_action('restrict_manage_posts', 'filter_products_by_image_presence');
function filter_products_by_image_presence() {
global $typenow;
$selected = isset($_GET['product_image_presence']) ? $_GET['product_image_presence'] : '';
if ('product' === $typenow) {
?>
<select name="product_image_presence" id="product_image_presence">
<option value="">Filter by product image</option>
<option value="set" <?php selected('set', $selected); ?>>Image Set</option>
<option value="notset" <?php selected('notset', $selected); ?>>Image Not Set</option>
</select>
<?php
}
}Here’s a step-by-step explanation of what each part of the code does:
add_action('restrict_manage_posts', 'filter_products_by_image_presence');- This line hooks into
restrict_manage_posts, which is an action triggered in the WordPress admin area, allowing you to add extra filtering options to the posts list. Here, it is used to add a new filter to the WooCommerce products list.
- This line hooks into
function filter_products_by_image_presence() { ... }- This block defines the function
filter_products_by_image_presence, which outputs HTML for a new dropdown select filter on the product admin screen.
- This block defines the function
global $typenow;- The global variable
$typenowis used to check the type of the current post list to ensure that the custom filter is only added to the ‘Products’ post type screens and not others.
- The global variable
$selected = isset($_GET['product_image_presence']) ? $_GET['product_image_presence'] : '';- This line checks if there is an active filter set by looking for the ‘product_image_presence’ parameter in the URL, which is passed as a GET request when you select a filter option and submit the filter. It stores the current selection to retain the selected state of the filter after the page reloads.
if ('product' === $typenow) { ... }- This conditional statement checks whether the current post type is ‘product’, ensuring the code inside the if-statement only runs for WooCommerce products.
- Everything between
?>and<?phpis HTML output, including the select dropdown with options for filtering by products with ‘Image Set’ or ‘Image Not Set’. PHP is interspersed to handle dynamic selection via theselected()function, which outputs theselectedattribute if the current$selectedvalue matches the option value. - The
selected()function is a WordPress helper function that compares the first argument with the second and if they match, it outputs ‘selected=”selected”‘, which is the HTML attribute needed to show an option as selected in a dropdown.
This code effectively adds a dropdown filter to the products list, enabling the admin to filter the list by products that have an image set or not. This additional filter would help users manage large catalogs, ensuring products adhere to store listing requirements, including having images assigned as part of the listing quality control.
Execute Query on WooCommerce Admin Products List
Next, we have to add a query that will execute and find the products that have no image set.
add_filter('parse_query', 'filter_products_query_by_image_presence');
function filter_products_query_by_image_presence($query) {
global $pagenow, $typenow;
if ('edit.php' === $pagenow && 'product' === $typenow && isset($_GET['product_image_presence']) && $_GET['product_image_presence'] != '') {
$presence = $_GET['product_image_presence'];
$meta_query = array(
'relation' => 'OR',
array(
'key' => '_thumbnail_id',
'compare' => 'NOT EXISTS'
),
array(
'key' => '_thumbnail_id',
'value' => '0'
)
);
if ('set' === $presence) {
$meta_query = array(
array(
'key' => '_thumbnail_id',
'compare' => 'EXISTS'
),
array(
'key' => '_thumbnail_id',
'value' => array('', '0'), // Assuming '0' or '' could be placeholders for no image.
'compare' => 'NOT IN'
),
);
} elseif ('notset' === $presence) {
$meta_query = array(
'relation' => 'OR',
array(
'key' => '_thumbnail_id',
'compare' => 'NOT EXISTS'
),
array(
'key' => '_thumbnail_id',
'value' => '0'
)
);
}
$query->set('meta_query', $meta_query);
}
}This code snippet is for modifying the main WordPress query for product listings in the admin area to allow filtering products based on whether they have an associated image. Here’s an explanation of its components:
add_filter('parse_query', 'filter_products_query_by_image_presence');- This line attaches the
filter_products_query_by_image_presencefunction to theparse_queryfilter hook, which is used to adjust the main query that WordPress uses to retrieve posts (or custom post types like products) in the admin list table.
- This line attaches the
function filter_products_query_by_image_presence($query) { ... }- This function is defined to modify the product list query based on the presence of product images. The
$queryvariable is an instance of theWP_Queryclass, passed by reference, which means any changes to this object will affect the actual query WordPress runs.
- This function is defined to modify the product list query based on the presence of product images. The
global $pagenow, $typenow;- These global variables are WordPress environment variables.
$pagenowis used to check the current admin page, and$typenowto check the current post type. - The conditional statement checks if the current page is ‘edit.php’ (the default page for listing posts and custom post types), the post type is ‘product’ (which means we’re on the WooCommerce products list), and if a filter has been set through a
GETparameter named ‘product_image_presence’.
- These global variables are WordPress environment variables.
- A new meta query array is created based on the value of ‘product_image_presence’. This array is designed to create the conditions for filtering products with or without images.
- The
relationkey set to ‘OR’ indicates that any of the conditions inside can be true for the meta query to retrieve the products. - If the filter is set to ‘set’, a new
$meta_queryis created to find products with images. Products that have a ‘_thumbnail_id’ (which means an image is set) and not an empty string or ‘0’ are included. - If the filter is set to ‘notset’, the meta query looks for products where the ‘_thumbnail_id’ meta key either doesn’t exist or is set to ‘0’, which would mean there is no image associated with the product.
- The
$query->set('meta_query', $meta_query);- This line modifies the main query by setting the ‘meta_query’ with the conditions defined in
$meta_query.
- This line modifies the main query by setting the ‘meta_query’ with the conditions defined in
This customization helps a WooCommerce store admin to quickly find products lacking images, which is crucial for inventory management, marketing, and sales strategies, as products with images are more likely to sell and provide customers with the necessary visual information. By ensuring product listings are complete with images, sales and marketing efforts can be more effective.
Related Martech Zone Content
