Display ACF custom fields in the Quick View lightbox
This guide shows how to display an Advanced Custom Fields (ACF) field inside the WooCommerce Quick View Pro lightbox using the available Quick View Pro hook. This is useful in order to display extra product data.
- Hook used: wc_quick_view_pro_quick_view_product_details
- Prerequisite: ACF plugin active and an ACF custom field assigned to the product post type
What this does
The sample code below fetches an ACF field named custom_data from the current product and outputs it inside the Quick View lightbox. Output is escaped using wp_kses_post() so allowed HTML is preserved and unsafe HTML is removed.
Code snippet
get_id();
$custom_data = get_field('custom_data', $product_id); // Replace 'custom_data' with your ACF field name
if ($custom_data) {
echo '';
// Use wp_kses_post() to allow safe HTML; replace with appropriate escaping if needed
echo wp_kses_post($custom_data);
echo '';
}
}
Where to add the code
If you're not familiar with using code snippets, please see our guide.
Notes and best practices
- Replace 'custom_data' with the actual ACF field name you want to display.
- If the ACF field is a complex field (repeater, group, image, etc.), adapt the code to handle the field structure (for example, loop through rows for repeaters, use wp_get_attachment_image() for image fields, etc.).
- Prefer escaping functions appropriate to the field type:- Plain text: esc_html()
- URLs: esc_url()
- HTML allowed: wp_kses_post() or wp_kses() with a custom allowed tags array.
- Avoid inline styles in production - instead, add styles to your theme or plugin CSS and target .quick-view-custom-data.
- Test with various product IDs and field values to ensure output appears correctly in the Quick View lightbox.
Example: handling an image field (optional)
If your ACF field is an image (returning an ID), use:
$image_id = get_field('my_image_field', $product_id);
if ($image_id) {
echo '';
echo wp_get_attachment_image($image_id, 'medium', false, array('alt' => esc_attr(get_post_meta($image_id, '_wp_attachment_image_alt', true))));
echo '';
}
Use this pattern to adapt for other ACF field types.
If searching the knowledge base hasn't answered your question, please contact support.