Support

Account

Register Login

Home › Forums › Front-end Issues › Custom Field Not Displaying in Front End

Solved

Custom Field Not Displaying in Front End

  • Custom Field Background not displaying on template.

    I’ve created a Custom Field to display a background image in a WooCommerce Category page (archive-product.php):

    Field Label: Background Image
    Field Name: category_background_image
    Field Type: Image

    Return Value: Image URL

    Rules: Taxonomy Term = Product Categories

    In the Products Category, I was able to successfully add the image.

    In the archive-product.php template I’ve added this:
    <?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>
    <div style=”background-image: url(‘<?php the_field(‘category_background_image’); ?>’);”>
    <h1 class=”page-title”><?php woocommerce_page_title(); ?></h1>
    </div>
    <?php endif; ?>

    The value that is returned:
    <div style=”background-image: url(”);”>
    <h1 class=”page-title”>Products</h1>
    </div>

    Not URL. No image.
    What am I missing?

  • You need to specify the “$post_id” value when getting fields from a term.

    The post ID to use is "$taxonomy_$term_id" The taxonomy name I know, it is “product_cat” but you need to get the term id for the currently displayed category and them put them together.

    Something like this might work, but you may need to work on it

    
$queried_object = get_queried_object();
$post_id = $queried_object->taxonomy.'_'.$queried_object->term_id;

    the you can supply the correct post id when getting the acf field

    
<div style="background-image: url('<?php 
    the_field(‘category_background_image', $post_id); ?>');">

    this is all covered under getting values from other places here http://www.advancedcustomfields.com/resources/get_field/

  • I think I got it figured out:

    <?php
		$queried_object = get_queried_object(); 
		$taxonomy = $queried_object->taxonomy;
		$term_id = $queried_object->term_id;  
	?>
   		<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

			<div class="catback" style="background-image: url('<?php the_field('category_background_image', $taxonomy . '_' . $term_id); ?>');">
    
				<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>
            
      		</div>

		<?php endif; ?>

    I’ve only tested it with one category, though. So I’ll be testing with more categories to see if it works.

  • This works great for the Category Pages. Now I’m trying to implement a header background image for the product pages. The product pages are only going to use ONE image per category. So say a product that is under the Fan category would need to use a background image and all of the other products under that same category would use the same image.

    A different product under a different category would use a different image and all other products under that same category would use the same image.

    Is there any way to do this type of condition for product pages and post the code in the ‘single-product.php’ page?:

  • You need to first use wp_get_post_terms() to get the term and then you can use that to get the term id to get the field from the category https://codex.wordpress.org/Function_Reference/wp_get_post_terms

    
$queried_object = get_queried_object(); 
$post_id = $queried_object->ID;
// now you can use this post id with wp_get_post_terms()

  • Okay. You’re dealing with an idiot here.

    I’ve added another field under the Category Background Image Custom Field so when the user chooses the Category Background image, they can also add the Product Background image (the settings are the same as the Category Background Image field) so all products under that one category will share the same image. This is logical.

    But I’m wondering if that makes a difference in the call in the template.

    I’m using the same code, but changed to post the ‘product’ image field:
    <div class=”catback” style=”background-image: url(‘<?php the_field(‘products_background_image’, $taxonomy . ‘_’ . $term_id); ?>’);”></div>

    But it comes up blank. Why would it make much difference which field I’m calling if it’s for a specific taxonomy?

  • No, it shouldn’t, you just need to do a little more work to get the term id

    
<?php 
  $taxonomy = 'product_cat';
  $queried_object = get_queried_object(); 
  $post_id = $queried_object->ID;
  $terms = wp_get_post_terms($post_id, $taxonomy, array('fields' => 'ids'));
  $term_id = $terms[0];

  • THAT works great! Thank you for taking the time to help me solve this.

    I can see that the taxonomy had to be specific, the post_id is based on the object that is being queried, the terms is based on the post ID, taxonomy, and then it creates the array of ids. So then the ‘$term_id’ variable is a loop, right?

  • Well, you could make it a loop, but since you can only show one image even if a product is in multiple categories $term_id = $terms[0]; just gets the value of the first one.

  • Well it seems this has quit working:

    <?php 
  $taxonomy = 'product_cat';
  $queried_object = get_queried_object(); 
  $post_id = $queried_object->ID;
  $terms = wp_get_post_terms($post_id, $taxonomy, array('fields' => 'ids'));
  $term_id = $terms[0];
  ?>
   
			<div class="catback" style="background-image: url('<?php the_field('products_background_image', $taxonomy . '_' . $term_id); ?>');"></div>

    I’m not sure why.
    I have a Category image assigned and Products image assigned under the Category. The image no longer appears.

    Would upgrading to PRO have caused this to stop working?

  • Narrowing it down:
    There is one category that the images are working correctly with the logic that if there is no “products_background_image” then it would take the category’s image.

    With another category, I selected the same images (for testing). All of the items under that category are NOT adopting the category image, leaving a blank space.

    Where shall I look next?

  • updating to pro may have changed something, check the field settings for the image field to make sure it’s set to returning the url. Other than that there is no difference in the way the image fields work.

  • Okay. I think I may have found something:

    I have a series of subcategories. My understanding was that the subcategories would have adopted the parent category if there was no Product or Category image assigned to that subcategory. But the code doesn’t work like that. So what I wound up doing is assigning a Category and Product to each subcategory, and everything works from there.

  • The original code was only taking the first category, and depending on how the terms are sorted then it may have chosen one without an image. If you wanted to always use the top level category then you’d need to loop through the list of terms and find the one with the parent of 0.

  • @toad78 Would you mind sharing your final code? My head is about to explode trying to figure this out. I followed the steps for the Category pages and that worked great! I also need to add custom fields to the main shop page and product pages. Thanks in advanced for your help guys.

  • 
<?php 
  $taxonomy = 'product_cat';
  $queried_object = get_queried_object(); 
  $post_id = $queried_object->ID;
  $terms = wp_get_post_terms($post_id, $taxonomy, array('fields' => 'ids'));
  $term = false;
  
  // find a term that is at the top level this will fail 
  // if no top level terms are assigned to the post
  if (count($terms)) {
    foreach ($terms as $term) {
      if (!$term->parent) {
        // parent is 0 = top level term
        break;
      }
    }
  }
  // the above loop will exit with term = a top level term 
  // or the last term or false if there are no terms 
  // assigned ot the post
  
  // the next section will get the top level term
  // of the first term assigned to this post
  // if the term from the above loop is not
  // a top level term
  if (count($terms) && $term->parent) {
    // parent is not 0 and there are terms
    $term = $terms[0];
    $parent = $term->parent;
    while ($parent != 0) {
      $term = get_term_by('id', $parent, $taxonomy);
      $parent = $term->parent;
    } // end while $parent == 0
  }
  // this section will exit with either
  // a top level term or false
  
  // test for term == false before using it
  if ($term) {
    $image = get_field('products_background_image', $taxonomy . '_' . $term_id);
  }
?>
<div class="catback"<?php 
    if ($image) {
      ?> style="background-image: url('<?php echo $image; ?>');"<?php 
    }
  ?>></div>
Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Custom Field Not Displaying in Front End’ is closed to new replies.