[Resolved] Conditional display of template tags in Page hero Element

[Dan]

Hi,
I’m using the page hero element to display a header (featured image + content)via the template tags using custom fields. Some pages won’t have the content just the image. The problem is that on pages which I didn’t add content for the template tags the output is:
{{custom_field.hero-title}}
{{custom_field.hero-subtitle}}

Is there a conditional tag to check if these fields are empty – don’t display them? like a php if statement?

Thanks
Dan

[David]

Hi there,

the only time that would normally happen is if you’re displaying that header element on an Archive page or another page that is created by a function where Custom Field meta boxes are ignored.

Can you link me to a page where i can see the issue if that is not the case.

[Dan]

Hi David, that is exactly the case, it’s on the shop archive page.
Is there a way to ovveride this?
I can’t send you a link because the site is currently local in production.

Thanks
Dan

[David]

You would need to create a shortcode and add this to a Header that is specifically set to the Product Archive. Tom provides the PHP snippet here to create the shortcode:

https://generatepress.com/forums/topic/custom-fields/#post-958533

[Dan]

Hi David
I created the shortcodes per the recommendations, but still having trouble displaying them in the hero section:

add_shortcode( 'hero_title', function() {
    $term = get_queried_object();

    $hero_title = get_field( 'hero-title', $term );

    return $hero_title;
} );

add_shortcode( 'hero_subtitle', function() {
    $term = get_queried_object();

    $hero_subtitle = get_field( 'hero-subtitle', $term );

    return $hero_subtitle;
} );

The ACF field is: hero-title

In the header element I have:

<div class="inner-hero-text">
<h2>[hero_title]
</h2>
<h3>[hero_subtitle]
</h3>
</div>

The only output I see is:

<div class="inner-hero-text">
<h2>Blog
</h2>
<h3>
</h3>
</div>

Any thoughts why it’s not pulling in the custom fields and only outputtng “Blog”?

Thanks
Dan

[Tom]

Hey Dan,

What happens if you var_dump the custom field variables the line after they’re defined?:

var_dump($hero_title);

Does it output the correct value?

[Dan]

ok, I think I understand the issue.
The blog was actually a page (set up in settings > reading) as a page.
In that page the custom fields are working correctly as expected.
If I go to a blog category (taxonomy), I do see the custom fields outputed correctly as the shortcodes. So all is working there.
The var_dump is correct too (thanks).
Question remains: how do I target the shop page archive?

Thanks!
Dan

[Dan]

it Seems like that for “special” pages – i.e. the shop page and the blog page the element’s header items are not displaying correctly.
They are both configured as pages (via the settings>reading for blog and woocommerce > shop for woocomerce) the custom fields are working for the blog but not for the shop, the featured image is not working for both of them.

[David]

When you say they don’t work for the shop – is it just the Custom Fields that are missing ? Or is the entire Element missing?

[Dan]

Hi David, it’s showing the fallback featured image, not the one selected and not showing the custom fields.

[Tom]

Does get_field() allow you to specify the page ID?

Custom fields and archive pages (shop, blog) typically don’t go together.

You’d have to do something like this:

$id = get_the_ID();
$id = ( function_exists( 'is_shop' ) && is_shop() ) ? get_option( 'woocommerce_shop_page_id' ) : $id;
$id = ( is_home() ) ? get_option( 'page_for_posts' ) : $id;

Then use $id inside get_field().

[Dan]

Sorry, couldn’t get it to work on shop pages/ archives.
This is the shortcode created for displaying the custom fields:

//Shortcode for hero titles on archive pages
add_shortcode( 'hero_title', function() {
	
    $term = get_queried_object();

    $hero_title = get_field( 'hero-title', $term );

    return $hero_title;
	
} );

[Tom]

How are you adding custom fields to archives?

The shop page will need the code I provided above:

add_shortcode( 'hero_title', function() {
	
    $term = get_queried_object();
    $term = ( function_exists( 'is_shop' ) && is_shop() ) ? get_option( 'woocommerce_shop_page_id' ) : $term;

    $hero_title = get_field( 'hero-title', $term );

    return $hero_title;
	
} );

[Keisuke]

Hi, there
I found another fix way on this issue by using CSS3 selector.

If
<div class="subtitle">{{custom_field.hero-subtitle}}</div>

CSS
.subtitle:empty { display: none }

For your reference.

[Tom]

Now it’s best to use a Block Element Page Hero: https://docs.generatepress.com/article/block-element-page-hero/

It handles stuff like this automatically 🙂

[Author]

Posts