Need to display custom ACF (Advanced Custom Fields) data on the WooCommerce shop page? This guide shows how to hook into woocommerce_before_shop_loop_item_title and inject custom field values into the product grid.
Step 1: Set Up ACF Fields for Products
Create and assign ACF fields to your WooCommerce products. Use the ACF interface to add a field group, then assign it to the Product post type in WordPress.
Step 2: Insert Code to Output Field Values
// 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');
Add this snippet to your theme’s functions.php file or a custom plugin to render the ACF value above the product title:
Step 3: Save and View Results
Once saved, navigate to the WooCommerce shop page. You’ll now see your custom ACF value above each product title, styled within a div container for easy customization.
Conclusion
With this method, you can highlight custom attributes or important information right on the shop page, improving UX and product clarity. No template overrides needed!
