[Resolved] Image field on term not available as a selection in Elementor

[Author]

Posts

[Nigel]

I am trying to assign a banner image to categories in WooCommerce that is different from the default feature image. When I go to select the field in Elementor the selection box doesn't show the available field from the category.

The Elementor template I'm working on is an archive page for WooCommerce.

I expected to to be able to select the image field I setup as can be seen in numerous tutorials and videos - though they are usually demonstrating it with custom post types rather than taxonomies.

Can you please confirm if it is supposed to work on archive pages? If it doesn't work then can you suggest a work around? I know there is the ability to select a shortcode and from there I can get the correct image to be displayed. I'm not sure how to return that back to Elementor though to use.

[Waqar]

Hi Nigel,

Thank you for contacting us and I'll be happy to assist.

If your goal is to get the image from the product category's term field, inside an Elementor's product category archive template, you can use the Type Field API shortcode, as explained at:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

For example, suppose that you have a term custom field with slug "product-category-banner".
( screenshot: hidden link )

To get its image in the template, you'll use the following shortcode in the Elementor's shortcode widget:
( screenshot: hidden link)

[types termmeta="product-category-banner"][/types]

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[Nigel]

Not quite. I've uploaded 2 screenshots to help explain the issue.

One of them shows the "Toolset Image Field" selected but the field is missing from the selection box.

The other one shows using a shortcode instead where your provided shortcode does not work - I assume because using it in this context is returning something Elementor isn't expecting?

Ideally I would simply be able to select it as you would expect. If that is a bug (or feature request?), however, then I'm happy to use a shortcode in the meantime

Does that help clear things up?

[Waqar]

Hi Nigel,

Thanks for writing back and for sharing these screenshots.

As you noted, currently it is not possible to use the image from the term meta field for setting a background for an Elementor section.

To add this support, you're welcome to submit this as a feature request at:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Meanwhile, to show that banner image you can use the Toolset shortcode inside a regular shortcode widget or a text editor widget.

regards,
Waqar

[Nigel]

The suggested shortcode was not an option as it needed to be setup as a background image. I ended up writing my own Elementor tag to achieve what I wanted. For reference - in case it helps others - this is what I did:

add_action( 'elementor/dynamic_tags/register_tags', function( $dynamic_tags ) {
	class Custom_Gallery_Tag extends Elementor\Core\DynamicTags\Data_Tag {

		public function get_name() {
			return 'sw-category-image';
		}

		public function get_categories() {
			return [ \Elementor\Modules\DynamicTags\Module::IMAGE_CATEGORY ];
		}

		public function get_group() {
			return [ 'site' ];
		}

		public function get_title() {
			return 'Category Banner Image';
		}

        protected function get_value( array $options = [] ) {
		    $url = '';
		    $term = get_queried_object();
            if ( ! empty( $term->term_id ) ) {
                $imageUrl = get_term_meta( $term->term_id, 'wpcf-category-banner-background-image', true );
                if($imageUrl) {
                    $url = $imageUrl;
                }
            }
            if(!$url) {
                $defaultImage = wp_get_attachment_image_src(4077, 'full');
                $url = $defaultImage[0];
            }
            return [
                'url' => $url
            ];
        }
    }
	$dynamic_tags->register_tag( 'Custom_Gallery_Tag' );
} );