Support

Account

Home Forums Front-end Issues Display custom taxonomy image with elementor pro

Solving

Display custom taxonomy image with elementor pro

  • Dear ACF Community!

    I would like to ask for some help to my project. I added an image field with ACF to my custom taxonomy, which I want to display dynamically with elementor. I made a custom product loop with ele custom and I would like to add it to that, but when I add the acf field from the dynamic tags to the elementor image widget, the image is not displayed. Sadly, I’m not proficient in coding. It would help me a great deal.

    Thank you in advance for your help!

  • I’m not super familiar with Elementor Custom Skin but it sounds like you’ve made a product loop, but your ACF image field is located on a taxonomy term which means that the image itself isn’t accessible from the product loop and you’d instead need a taxonomy term loop to get that data. I wish I could tell you exactly how to do this with Elementor Custom Skin but I tend to use Loops & Logic for this kind of thing. You could add a Tangible Template widget within your product loop and write something like this to make that work:

    
    <Loop taxonomy=your_custom_taxonomy_name post=current>
      <img src="{Field acf_image=your_image_field_name field=url}" />
    </Loop>
    
  • Hi bentangible!

    Thanks for the fast reply! Yes i made a custom product loop skin for my site. Maybe i should be more specific about the thing i want to achieve with ACF.

    So as default woocommerce has a thumbnail upload option for the core Categories taxonomy, but not for tags or custom taxonomies: Image

    This image can be pulled dynamically by elementor under the Dynmic tags-> Woocommerce-> Category Image as shown: Image

    I want to replicate this dynamic image function from woocommerce, so i created a custom taxonomy for brands, to display the brand logo on the frontend. With ACF i added an image upload field for the taxonomy: Image

    So right now i am able to upload an image for each brand in the taxonomy, and i can select the image field in elementor: Image

    But after i select the acf image field, the logo doesnt show up on the frontend.

    Im a bit confused, maybe im missing some code that outputs this image field on the front end.

  • Thanks for the screenshots, that makes it much clearer what you’re trying to do.

    My assumption about why this might not be working for you is that that dynamic content setting is probably looking for that ACF field on the current product since you’ve created a product loop. But that feels doesn’t exist alongside products, it exists alongside a taxonomy term that happens to be applied to that product, so Elementor doesn’t know where to look to find that field data. I could be wrong; like I said I don’t have experience with Elementor Custom Skin to know exactly how it works in this scenario.

    This is why I’m thinking that L&L might be a solution that could work for you if you’re comfortable displaying your image by writing a line or two of HTML instead of using Elementor’s editor. The markup I shared above could be placed inside an L&L template and then that template could be run within your loop using either a shortcode or the built-in Elementor widget. Essentially what it’s doing is saying “hey WordPress, look through the taxonomy terms associated with the current post/product in the brand taxonomy and then for each term that’s applied to this post, get me the logo image field for that taxonomy term.” Considering the actual field/taxonomy names you showed in your screenshot, that might look something like this in your case:

    
    <Loop taxonomy=brand post=current>
      <img src="{Field acf_image=logo field=url}" />
    </Loop>
    

    Can’t help you much beyond that, but there’s a good chance that this template above will just work out of the box if you place it inside your loop using any of the methods I linked above. I hope that’s helpful for you, let me know how this goes!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.