How to Use an Image from Custom Fields for Product Category Results

Overview

In this article, we will cover a specific case - how to use a custom image for product categories search results that is pulled from a specific custom field associated with each product category.

The Advanced Woo Search plugin has an option to search and display product categories.

If a product category has an image added via the default WordPress interface, it will be displayed as well.

Product categories results with images

But what if we want to show a custom image instead, where the URL is stored inside a product category custom field? No problem - it is possible, and below we will cover how to do that.

Use value from custom field as image for product categories results

Here, we will cover how to get the image URL from a product category custom field and display it instead of the default category image in search results.

For example - each of our product categories has a custom field image_url that contains the URL of the desired image.

In this case, to display this image inside the search results, all you need to do is use the following code snippet:

add_filter( 'aws_search_tax_result_item', function ( $result, $term, $taxonomy ) {
    $image = get_term_meta( $result['id'], 'image_url', true );
    if ( $image ) {
        $result['image'] = $image;
    }
    return $result;
}, 10, 3 );

After adding this code snippet, please go to the plugin settings page -> Performance tab and click the Clear Cache button.

Now, your search results for product categories will display the value of the image_url field as the image for terms results.

Product categories results with custom images

Bonus: Set custom image for any other taxonomies results

In the previous example, we covered how to set custom images for product categories results - but what about other taxonomies that are searchable with the Advanced Woo Search plugin?

The great news is that you can set custom images for any other taxonomy's search results - you just need to enable that taxonomy's search from the plugin settings page and then use a code snippet like in the previous example.

add_filter( 'aws_search_tax_result_item', function ( $result, $term, $taxonomy ) {
    if ( $taxonomy === 'my_custom_tax' ) {
        $image = get_term_meta( $result['id'], 'image_url', true );
        if ( $image ) {
            $result['image'] = $image;
        }
    }
    return $result;
}, 10, 3 );

The difference here is that we set a condition - show the image from the image_url custom field only for my_custom_tax taxonomy results. You can set any other taxonomy slug here.

Bonus: Use value from ACF field

Here is an additional example for those who are using the Advanced Custom Fields (ACF) plugin.

The Advanced Woo Search plugin already has advanced integration with ACF, but here we will cover a specific case of using an ACF field to get the value for a custom image and use it as a custom image for product categories results.

As in the previous examples, all we need is to use some custom code snippet.

add_filter( 'aws_search_tax_result_item', function ( $result, $term, $taxonomy ) {
    $image = get_field('image_url', 'product_cat_' . $result['id']);
    if ( $image ) {
        $result['image'] = $image;
    }
    return $result;
}, 10, 3 );

Note: this code will work for the image_url ACF field. That field must return a string that contains the image URL - you can use text, URL, or image (with image URL output) field types for that.

FAQ

Can I use custom image only for certain taxonomies and default for all other?

Sure. Just set additional conditions based on the value of the $taxonomy variable.

Can I use different custom fields for different taxonomies?

Yes, you can adjust the code snippet to check the taxonomy type and pull the custom image from different fields accordingly.

What happens if the custom field is empty?

If the custom field is empty or not set, the plugin will display the default category image, or no image if none is available.

Is it necessary to clear the cache after adding the custom code?

Yes, it is recommended to clear the cache after adding or modifying the code snippets to ensure the changes appear in the search results.