How to Display an ACF Field on a WooCommerce Single Product Page

WooCommerce provides several hooks that allow developers to customize the single product page. If you use the Advanced Custom Fields (ACF) plugin, you can use these hooks to display custom field values in different sections of a product page.

For example, you may want to display additional product information such as a custom price label, product specifications, warranty details, or other information stored in ACF fields.

In this tutorial, you will learn how to retrieve an ACF field value and display it on a WooCommerce single product page using PHP, without installing an additional display plugin.

1. Create a Custom Field Using ACF

First, create a custom field using the Advanced Custom Fields plugin.

For this example, we will create a field with the following details:

• Field Label: Price
• Field Name: price
• Field Type: Text
• Location: Product

Set the field group’s location rule to display the field on WooCommerce products. You can then enter a value for this field when editing a product.

ACF stores the field value against the product, and you can retrieve it using the get_field() function.

For more information about retrieving custom field values, see the official ACF get_field() documentation.

2. Display an ACF Field on the WooCommerce Single Product Page

WooCommerce provides action hooks that let you display additional content in different sections of the single product page.

For example, if you want to display the ACF field value below the product thumbnails, use the woocommerce_product_thumbnails action.

Add the following code to your child theme’s functions.php file or a custom plugin:

/**
 * Display an ACF field below WooCommerce product thumbnails.
 */
function geeker_display_acf_field_on_single_product() {

    $price = get_field( 'price' );

    if ( ! empty( $price ) ) {
        echo '<p class="product-custom-price">';
        echo 'Price: ' . esc_html( $price );
        echo '</p>';
    }
}
add_action(
    'woocommerce_product_thumbnails',
    'geeker_display_acf_field_on_single_product',
    30
);

In this example:

• get_field( 'price' ) retrieves the ACF field value for the current product.
• The woocommerce_product_thumbnails hook places the output in the product image and thumbnail section.
• esc_html() safely escapes the field value before displaying it as text.

Make sure the ACF field name in the code matches the actual field name configured in your ACF field group.

3. Display the ACF Field in Different Sections of the Product Page

You are not limited to displaying custom field values below the product thumbnails. WooCommerce provides several action hooks that let you choose where the information should appear.

For example, if you want to display the ACF field below the product title, you can use the woocommerce_single_product_summary hook with an appropriate priority.

/**
 * Display an ACF field below the product title.
 */
function geeker_display_acf_field_below_title() {

    $price = get_field( 'price' );

    if ( ! empty( $price ) ) {
        echo '<p class="product-custom-price">';
        echo 'Price: ' . esc_html( $price );
        echo '</p>';
    }
}
add_action(
    'woocommerce_single_product_summary',
    'geeker_display_acf_field_below_title',
    6
);

The priority determines the position of the callback relative to other callbacks attached to the same hook. A lower priority generally runs earlier.

4. Useful WooCommerce Single Product Page Hooks

WooCommerce provides several action hooks throughout the single product template. You can use them to display ACF field values or other custom content in different locations.

• woocommerce_before_single_product: Before the main single product content.
• woocommerce_after_single_product: After the main single product content.
• woocommerce_before_single_product_summary: Before the product summary section.
• woocommerce_single_product_summary: Inside the product summary section.
• woocommerce_product_thumbnails: In the product image and thumbnail section.
• woocommerce_before_add_to_cart_form: Before the add-to-cart form.
• woocommerce_before_variations_form: Before the variable product variations form.
• woocommerce_before_add_to_cart_button: Before the add-to-cart button.
• woocommerce_after_add_to_cart_button: After the add-to-cart button.
• woocommerce_after_add_to_cart_form: After the add-to-cart form.
• woocommerce_product_meta_start: Before the product metadata.
• woocommerce_product_meta_end: After the product metadata.
• woocommerce_share: In the product sharing section.
• woocommerce_after_single_product_summary: After the product summary section.

You can attach your callback to the hook that matches the location where you want the custom field to appear. The exact position can also depend on the priority and the theme’s WooCommerce template overrides.

For more details, refer to the official WooCommerce code reference and its single product template structure.

5. Display Multiple ACF Fields on a Product Page

You can retrieve and display more than one ACF field using the same WooCommerce action hook.

For example, suppose you have created fields named price, warranty, and product_information. You can display them together like this:

/**
 * Display multiple ACF fields on a WooCommerce product page.
 */
function geeker_display_multiple_acf_fields() {

    $price = get_field( 'price' );
    $warranty = get_field( 'warranty' );
    $product_information = get_field( 'product_information' );

    if ( $price ) {
        echo '<p><strong>Price:</strong> ';
        echo esc_html( $price );
        echo '</p>';
    }

    if ( $warranty ) {
        echo '<p><strong>Warranty:</strong> ';
        echo esc_html( $warranty );
        echo '</p>';
    }

    if ( $product_information ) {
        echo '<div class="product-information">';
        echo wp_kses_post( $product_information );
        echo '</div>';
    }
}
add_action(
    'woocommerce_single_product_summary',
    'geeker_display_multiple_acf_fields',
    35
);

This example displays the price and warranty as plain text. The product information field allows safe HTML output through wp_kses_post(), which is useful if the ACF field contains formatted content.

6. Customize ACF Repeater Fields on WooCommerce Products

ACF also supports Repeater fields, which are useful when you need to store multiple rows of related information for a product. For example, you could use a Repeater field to display product specifications, features, or warranty details.

If you need to customize Repeater fields that contain taxonomy fields, read our tutorial on customizing ACF Repeater taxonomy fields to display parent and child terms separately.

Important Notes

• Correct field name: Use the ACF field name, not its field label, in the get_field() function.
• Product context: The examples are intended for the WooCommerce single product page, where ACF can retrieve fields associated with the current product.
• Field type: Use esc_html() for plain text values and an appropriate escaping function for other field types.
• Hook priority: Change the priority value to adjust the position of your custom content within the selected hook.
• Theme compatibility: Some themes override WooCommerce templates or change the standard product layout. Test the selected hook with your active theme.
• Block-based templates: If your store uses a customized block-based product template, classic WooCommerce PHP hooks may not appear in every location. Check the template and block implementation.

Conclusion

You can display ACF custom field values on a WooCommerce single product page using the get_field() function and WooCommerce action hooks.

Choose a hook based on where you want the information to appear, retrieve the field value, and output it safely. You can use the same approach for a single ACF field or multiple custom fields, including product specifications and additional product information.