WooCommerce product page template with ACF fields
This article was created to help beginners that are new to WooCommerce and product templates and how to customise it, add extra fields and display it on the frontend.
The WooCommerce product page usually displays the product data such as title, image, image gallery, the short description, the long description, price, discount (if there is), attributes and variations, but not custom fields.
There are a few ways to accomplish this goal, and you’ll see that displaying custom field values on a product single page is quite straightforward, and doing it without editing too much code.
What is a custom field?
Custom fields are a great way to store extra data about a post or product (which is also technically a post, just a different type)
Choose a WooCommerce products custom field plugin
As you may already know, finding the right plugin is often an arduous journey. Don’t let this stop you from building your plugin tool kit.
The most popular and the plugin we recommend to use when creating custom fields is Advanced Custom Fields (ACF). There are other plugins here and over here but we’ve found that they either cost the same or even a bit more or the plugins have limited features.
So we’ll use ACF for our method in this tutorial.
Creating Custom Fields for the WooCommerce product page.
- Download and install Advanced Custom Fields plugin.
- Visit the ‘Custom Fields’ tab in the backend Admin menu.
- Click on ‘Add New’ to add a new Field Group.
Note: Field groups are there to help you organise your fields into groups.
- You’re now presented with the ‘Add New Field Group’ screen where you can add fields.
- Use the ‘Add Field’ button to add a field, then fill in the label and a lowercase field name and select type ‘Text’ from the dropdown.
- Location, select Show this field group if Post Type is equal to Product.
- Select other ‘Settings’ you may want. Click ‘Publish’.
- For more fields just keep using the ‘Add Field’ button.
That’s all you need to do to create the fields. Next you need to add custom field values to your product(s).
Add custom field values for each product
- Visit the ‘Products’ tab in the backend Admin menu.
- In the list of products, select the product you’d like to edit to fill the values of your custom fields.
- Once on the edit product screen, scroll down until you see the custom field(s).
- Enter the custom field values. Click ‘Update’ to save the product.
- Keep doing these steps until you’ve added the custom field values to all your products.
Pro Tip: Setting a default value in your ACF Field group won’t automatically fill the custom field values for all your products. You would need to edit the product and click ‘update’ for each product.
It’s time to show the fields on the product page.
How to display custom field value on WooCommerce product page
Unfortunately neither WooCommerce or the ACF plugin come with a way to actually show the field values on the front end of your website.
For the pros and tech savvy readers: modify and add PHP code to get and display these fields, how to work with ACF fields can be read in ACF documentation.
However, there’s another way using our ACF Views plugin to show the custom fields.
ACF Views is the simple way to display posts and their ACF fields anywhere on your site using shortcodes. This means you no longer have to write any PHP code to query posts, get field values or to display it!
With ACF Views PRO you have the added feature of using repeater sub fields, therefore as an example storing multiple product documents or a list of benefits and features that are specific for each product is made possible.
How to use ACF Views to display custom field values on product pages
- Download and install ACF Views plugin.
Note: if you’re planning on using a repeater field type, then you’d need to use the ACF Views PRO plugin.
- Click ‘Add New’ to add a new View.
- You’re now presented with the ‘Edit ACF View’ screen.
- Give your View a title and short description, so you can easily find it later.
- Fields, Group, select the field group that you created earlier.
- Field, select the field and give it a label.
- Click ‘Add Field’ and repeat step 6 until you’ve added all the fields.
Tip: Use the row handle to reorder fields.
For repeater field type; Switch tab to ‘Repeater Sub Fields’, Sub Field, select your repeater field, then give it a Label.
- Click ‘Update’ to save your View.
- Copy the shortcode.
- Connect to your server via FTP and navigate to your WordPress directory, then go to wp-content/plugins/woocommerce/templates/ and copy 'single-product' folder to your theme inside a new folder called ‘woocommerce’ (so the path is wp-content/themes/your-theme/woocommerce/)
- In your WordPress admin backend, visit Appearance > Theme File Editor.
- In the top right select theme to edit -> select your-theme then go to woocommerce/single-product/short-description.php to open it in the editor window.
- Insert the shortcode by copying and pasting the code below to the bottom of your files contents and replacing the “ID” with your ACF View ID. <?php echo do_shortcode( '[acf_views view-id="ID"]' ); ?>
- View your product page to see the result.
Note: if you don’t see the custom fields on the frontend, edit the product and make sure that you’ve filled the custom fields with values.
Follow us to get notified about new articles