WooCommerce Product Category Banners with ACF

[inventiveweb]

Hi, I’m looking to display a banner on WooCommerce Categories using advanced custom fields however I cannot get the image to display.

Could you advise the code I need to add to the template to allow the ACF custom fields to show? Any help is greatly appreciated. I’ve created an image field type.

[thai]

Hi @inventiveweb,

Please change the Return Value option to Image URL:

And the image banner HTML should be like this:

<img src="[acf field='field_name']" />

Let us know how it goes!

[inventiveweb]

Hi Thai,

Thanks for that - that’s the problem I’ve ran across. WooCommerce strips out HTML from the description field so I can’t put that HTML in, so in the below screenshot, when I press save, the HTML is removed.

Can you advise where else I would add this?

[rad]

Hi @inventiveweb,

I checked the code of your provided URL and seems to be working, the issue is that you added it as PHP code instead of shortcode.

Could you try adding it as a shortcode?

I also tried it on my installation and added an HTML code to the description and it works okay.

Thanks!

[inventiveweb]

@thai

<img src="[acf field=‘field_name’]" />

Hi @Rad - Apologies I’m trying to fix it as I go, which is why you saw that bit of PHP. When I add the HTML, this is now what I’m getting:

The SRC is unknown now, any ideas?

[rad]

Hi @inventiveweb,

Question is, where did you add the custom field and its value? Example, in a post, a custom field is added and will only be displayed on the same post, or by using an ID. Example, let’s same image_field is added to Hello World post which has an ID of 7837, then you must add it as

[acf field="image_field" post_id="7837"]

Now, what I’m not sure is why you need to add ACF on category description when you can just directly add the image URL. Like <img src="http://example.com/image.jpg">, that change is only in effect to that category not affecting the other so ACF is not needed. Unless it’s meant to be dynamic that changes by managing other posts, in that case, use ACF shortcode along with post ID.

Thanks!

[inventiveweb]

Hi Rad,

I was planning to use ACF on WooCommerce Categories to help the backend run easier as I didn’t want clients having to enter/amend HTML, I would rather them just pick an image.

So what would the ID be on WooCommerce categories? Here’s the URL for the category I’m amending:

/term.php?taxonomy=product_cat&tag_ID=33&post_type=product

[rad]

Hi @inventiveweb,

Please check this https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/ and https://theme.co/apex/forum/t/setup-how-to-locate-category-ids/60. It’s for post category but similar and look for product category ID.

Thanks!