How to Add ACF Fields to the WooCommerce Product Loop

In this guide, we will walk you through the process of adding Advanced Custom Fields (ACF) to the WooCommerce product loop. This is a useful feature when you want to display additional custom information about your products on your shop and archive pages.

Prerequisites

Before we begin, make sure you have the following:

1. A WordPress website with WooCommerce installed and activated.
2. The Advanced Custom Fields (ACF) plugin installed and activated.

Step 1: Create a Custom Field Group and Field in ACF

First, we need to create a custom field group and add a custom field to it. In our example, we’ll create a field called “product_highlight” to display a short highlight text for each product.

1. In your WordPress admin dashboard, navigate to Custom Fields > Field Groups.
2. Click on Add New to create a new field group.
3. Give your field group a title, like “WooCommerce Product Fields”.
4. Click on Add Field to create a new custom field.
5. Enter the field label, for example, “Product Highlight”, and the field name will be auto-generated as “product_highlight”.
6. Choose the field type, such as “Text” or “Textarea”.
7. Configure any additional field settings as needed.

Step 2: Assign the Custom Field Group to the WooCommerce Product Post Type

To make the custom field available for WooCommerce products, we need to assign the field group to the WooCommerce product post type.

1. In the field group settings, scroll down to the Location section.
2. Set the rule to “Post Type” “is equal to” “Product”.
3. Click on Publish to save the field group.

Step 3: Add Custom Field Values to Your Products

Now, you can add custom field values to your products.

1. Navigate to Products in your WordPress admin dashboard.
2. Edit an existing product or create a new one.
3. Scroll down to the “Product Highlight” field and enter a value.
4. Update or publish the product.

Step 4: Add a Snippet to Display the ACF Field in the WooCommerce Product Loop

To display the custom field in the WooCommerce product loop, add the following snippet to your theme’s functions.php file or read our post about on how to customize WooCommerce with snippets.

add_action( 'woocommerce_after_shop_loop_item_title', 'pedro_add_acf_field_to_product_loop', 15 );

function pedro_add_acf_field_to_product_loop() {
    global $product;

    // Get the product ID
    $product_id = $product->get_id();

    // Get the ACF field value
    $product_highlight = get_field( 'product_highlight', $product_id );

    // Check if the ACF field value exists and display it
    if ( ! empty( $product_highlight ) ) {
        echo '<div class="product-highlight">' . esc_html( $product_highlight ) . '</div>';
    }
}Code language: PHP (php)

This snippet hooks into the woocommerce_after_shop_loop_item_title action, which is triggered after the product title in the loop. The custom ACF field value is retrieved using the get_field() function and then displayed within a div with the class “product-highlight”.

Don’t forget to replace ‘product_highlight’ with the actual field name you created in ACF.

Step 5: Customize the Output and Styling

You can customize the output and styling of the ACF field as needed. For example, you can add custom CSS rules to your theme’s stylesheet to style the “product-highlight” div.

.product-highlight {
    font-size: 1.2em;
    font-weight: bold;
    color: #f00;
}Code language: CSS (css)

Conclusion

Now, the ACF field should be displayed in the WooCommerce product loop on your shop and archive pages. You can follow the same process to add more custom fields to your products and enhance your WooCommerce store with unique and engaging information.