ACF banner image with Woocommerce Store

Question

Please Help, I’ve created an archive-product.php and in it I have my, php woocommerce_content().

In the global-top-banner above this, I have my usual php code to call in my theme banner image (using my usual ACF image ID). Works perfectly on all other, page.php, single.php, category.php, etc…

The button to add the picture is showing on the backend on the Store page as its seeing my ACF rule to add to all default pages, and I can obviously select the image I’d like to choose from the media library here.

However I can not find any ACF selector to display the image on this Store page??…

I’ve tried trying to add a;

Template Name: Woo Page – but that doesn’t work – as it doesn’t appear on the Store (backend) to select.

I’ve read that… even though this Store appears as a page it gets converted to a ‘Special Archive’ but I can’t tap into this using Taxonomy = Category or Taxonomy = Prod_Category…

How do I get this image to show on this page please…

<!– Main –>
<main>

<!– Top Banner –>
<div class=”thin-top-banner”>
<?php get_template_part(‘top-banners/global’,’top-banner’);?>
</div>

<!– Section One | Centered Content –>
<section class=”centered-content”>
<div class=”woo-content-container”>
<?php woocommerce_content();?>
</div>
</section>

</main>

rank rank · Accepted Answer · 2020-12-18T14:55:57

ACF gives you the possibility to add option pages with acf_add_options_page(). https://www.advancedcustomfields.com/resources/options-page/

You can put this code inside of the functions.php of your theme or in a custom plugin.

if(function_exists('acf_add_options_page')) {
  acf_add_options_sub_page(array(
    'page_title'      => 'Product Archive Settings', /* title */
    'parent_slug'     => 'edit.php?post_type=product', /* post type product */
    'capability' => 'manage_options'
  ));
}

It will create a option page for you. You can access this page in your backend admin menu as a sub page of the products.

To display fields (in your case the banner image field) you need to set the location rules in the ACF plugin.

Go to your field groups and create a new one.
Add your image field to the group and scroll down to the "Location" tab
Under "Show this field group if" in the first drop-down you select Options page. In the second drop-down you select is equal to and in the third one you pick the name of your options page, in the example it is called Product Archive Settings. Save everything.

You can now set the image inside of your options page.

To display it in your product archive you just need to use the get_field function of ACF. Remember to use the name of your field, I name it archive_image.

if ( get_field('archive_image', 'option') ) {
  $image = get_field('archive_image', 'option');
}

You now have the image saved into a variable and you can output it.

ACF banner image with Woocommerce Store

1 Answers