Using Advanced custom fields plugin ACF, I added an image field to the product category and can't get it to display after the main content (below products) using the code below:

add_action( 'woocommerce_after_main_content', 'wc_add_lower', 100 );
function wc_add_lower() { 
    
    ?>
        <?php the_field('lower'); ?>
    <?php
}

How to display the image (from ACF field) in WooCommerce product category archive pages?

Using Advanced custom fields plugin ACF, I added an image field to the product category and can't get it to display after the main content (below products) using the code below:

add_action( 'woocommerce_after_main_content', 'wc_add_lower', 100 );
function wc_add_lower() { 
    
    ?>
        <?php the_field('lower'); ?>
    <?php
}

How to display the image (from ACF field) in WooCommerce product category archive pages?

• php
• woocommerce
• product
• advanced-custom-fields
• hook-woocommerce

• Your question is unclear and it seems that you didn't really search… See: Adding Fields to a Taxonomy Term, ACF get image from product term and Display ACF field/image below the product title in WooCommerce archive pages – LoicTheAztec Commented Mar 17 at 22:35

1 Answer 1

There are some mistakes in your code and some considerations:

1. The woocommerce_after_main_content is a global hook. It means it runs on multiple WooCommerce pages: archive-product.php and single-product.php. So without a conditional check like is_product_category() your custom field will also display on single product page.

2. You use the_field() which is good for simple and plain text or HTML, but if you use image, you might consider using get_field() instead. It all depends on how the field is set up (please see this answer). Here are also references to get_field() and the_field().

The below code will display the ACF image field after the main content, on woocommerce Archive/Category pages, the following way:

• Hook into woocommerce_after_main_content on category pages only.

• It will dynamically target the correct category on which the field is being displayed, by using: get_queried_object().

• It ensures that the ACF function fetches the correct data tied to the current category, by passing get_field() to a variable.

• Conditional check, if the ACF field is not empty, and otherwise not output anything.

• It will display the image as santizied output, using esc_url() and esc_attr() .

/*Adding ACF custom metadata field after the main content woocommerce product category page*/
add_action( 'woocommerce_after_main_content', 'wc_add_lower', 100 );
function wc_add_lower() {
    // Execute the code only on WooCommerce product category pages
    if ( is_product_category() ) {
        // Get the current product category object
        $term = get_queried_object();
        // Store ACF field 'lower' for the current product category (taxonomy term)
        $lower_image = get_field('lower', $term);
        // Check if the field has a value and output sanitized image & alt text
        if ( $lower_image ) {
            echo '<img src="' . esc_url( $lower_image['url'] ) . '" alt="' . esc_attr( $lower_image['alt'] ) . '">';
        }
    }
}

Related questions and sources:

• Display ACF field/image below the product title in WooCommerce archive pages

• Woocommerce category ACF field not showing

• Display random Images in product category page

• Adding Fields to a Taxonomy Term