Site logo

Archived topic

Conditional display of template tags in Page hero Element

17 replies · Started by Dan on May 7, 2020

Viewing posts 1–15 of 18

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

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.

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

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

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?

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

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.

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?

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

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().

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;
	
} );

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;
	
} );

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.

This archived topic is closed to new replies.