Troubleshooting //
How to Output a WooCommerce Product Category Thumbnail on the Frontend

How to Output a WooCommerce Product Category Thumbnail on the Frontend

Question

How to display a WooCommerce Product Category image?

Answer

Do you aim to pull the Product Category thumbnail to the frontend? 

WooCommerce product category image

These thumbnails are located in the Products > Categories directory and there are two ways to display them in the front.

Using the Dynamic Image widget

Add the widget to the desired Listing Grid and choose the “Post Thumbnail” option as the Source. Afterward, input the thumbnail_id value into the Custom meta field/repeater key text area. The image will be pulled up right away.

dynamic image widget settings in Elementor

Using a Dynamic Tag

You can add the picture to the frontend through a simple Image widget but with the help of a Dynamic Tag. To learn more about dynamic tags, read the following tutorial: https://crocoblock.com/knowledge-base/articles/using-the-pre-designed-section-templates-to-display-dynamic-content/

Add the Image widget to the Listing Grid layout of yours, click on the Dynamic Tags icon, and pick the “Term Image” option from the JetEngine section.

jetengine term image option picked

Press the wrench icon near the Term Image, choose “Product categories” in the Taxonomy drop-down, and then type the thumbnail_id value in the Meta Field row.

dynamic tag settings in Elementor
Was this article helpful?
YesNo
Still need help?
Submit a request