Show ACF Custom Fields on WooCommerce Shop Page

Want to display Advanced Custom Fields (ACF) values on your WooCommerce shop page? This quick guide will show how to output ACF data using the woocommerce_before_shop_loop_item_title hook. Let’s walk through it.

Step 1: Add Custom Fields to Products via ACF

Ensure you’ve assigned the required custom fields to products using ACF. If you haven’t already, use the ACF interface to create a field group and link it to the “Product” post type.

Step 2: Add Code to Your Theme or Plugin

Insert the code below into your theme’s functions.php file or a custom plugin to show the field on the shop page:

// Display ACF value before shop loop item title
function custom_display_product_acf_value_before_title()
{
    // Check if on the shop page
    if (is_shop()) {
        global $product;

        // Get the custom field value using ACF function
        $custom_field_value = get_field('custom_field_name', $product->get_id());

        // Display the custom field value
        if ($custom_field_value) {
            echo '<div class="custom-field-value">';
            echo 'Custom Field Value: ' . $custom_field_value;
            echo '</div>';
        }
    }
}
add_action('woocommerce_before_shop_loop_item_title', 'custom_display_product_acf_value_before_title');

Step 3: Test Your Custom Field Output

After saving the code, go to your shop page. You should now see the custom field data displayed before each product title. This approach ensures cleaner integration via hooks, avoiding direct template edits.

Conclusion

Using this method, you can display useful custom data—like specs, labels, or extra product info—on the WooCommerce shop page. It’s clean, dynamic, and update-safe.