How to Display ACF Value on the WooCommerce Shop Page

If you want to display a custom field or an Advanced Custom Field (ACF) value on the WooCommerce shop page, you can achieve this by modifying the woocommerce_before_shop_loop_item_title hook. Follow the steps below:

Step 1: Add Custom Fields to Your Products Using ACF

Before you proceed, make sure you’ve added the necessary custom fields to your products using Advanced Custom Fields (ACF). If you haven’t set this up yet, please follow the ACF documentation to create and assign custom fields to your WooCommerce products.

Step 2: Modify Functions.php or Create a Custom Plugin

Add the following code to your theme’s functions.php file or create a custom plugin to display the custom field value 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: Save and Test Your Changes

Once you’ve added the code, save the changes to your functions.php file or custom plugin. Now, the ACF field value will be displayed for each product on the WooCommerce shop page, just before the product title.

This method utilizes the woocommerce_before_shop_loop_item_title hook, which is a cleaner approach compared to modifying the archive-product.php template directly. By doing this, you ensure that your changes remain intact even after theme updates, and avoid any potential conflicts.

Conclusion

By following these steps, you can easily display custom ACF field values on the WooCommerce shop page. Whether you’re adding product specifications, custom attributes, or any other data, this method keeps your WooCommerce store organized and informative for customers.