ACF Extended Pro Ultimate Enhancement Suite. PERSONAL $49 /year. Priority support. Buy Now See All Features. POPULAR FREELANCE. WooCommerce allows us to filter woocommerceproducttabs for manipulating tabs. As argument to this filter you get an array for all tabs. The array consists of arrays for each tab with unique keys. But the array for each tab does not contain the actual output of the tab contents.
One way or another working with WooCommerce you wind up needing custom fields and preferably Advanced Custom Fields or ACF fields. This tutorial will talk about (advanced) custom fields in WooCommerce and the many way these can be used. This might wind up being a long post and lots or resources will be used and referred to so bear with me.
Table of Contents
- More to be added based on content below
Basic Single Product Page Display
What if you want to add an ACF field with your own code to the theme? Well that is just like adding any other advanced custom field type to any template really. As shown at the beginning you just need to focus on the correct product type and field type and then load the data you entered in the backend properly there.
To add an ACF field to the single product page in WooCommerce after the summary you can use a basic setup like this:
It uses the WooCommerce woocommerce_after_single_product_summary hook to add information after the product description. And there are more hooks in WooCommerce for other locations of course.
NB The actual code to load the field in the backend is not mentioned here. This as that is quite easily done using the ACF GUI.
See https://support.advancedcustomfields.com/forums/topic/acf-with-woocommerce/
ACF & Custom Tabs
You can also use advanced custom fields to add custom tabs to WooCommerce. This is actually often needed. Many products tend to require extra information in a custom tab. Liquid Web wrote adding custom tabs with ACF. What they do is create a repeater field using a custom file added to the theme. Here is a forked snippet for the repeater field:
Then they load the custom tab with another function in functions.php. This code adds the extra WooCommerce product tab and then loads the repeater field inside the tab. Here is a forked snippet for this WooCommerce product tab addition.
NB Snippets made by AJ Morrris https://gist.github.com/ajmorris for Liquid Web
Booster also allows you to add custom tabs. See https://booster.io/features/woocommerce-custom-product-tabs/ . You can choose to add tabs for all product pages or for specific ones.
ACF WooCommerce Order Form
If you would like to display additional information about your products in checkout / at the order form you can read about at WP Major. Major focusses on getting ACF fields in the order form and they use the WooCommerce Product Table plugin. But it does explain how to create them for WooCommerce products so that helps
Remember, for this tutorial we’re mainly focused on taking that custom field data and getting it into a WooCommerce order form .
Divi & Advanced Custom Fields
The Elegant Themes Divi theme as an ACF module these days. It does however not work with all the custom field types yet. It just works with single fields, tables and repeater fields.
However, since the end of 2018 Divi Builder has dynamic content:
Not only does Divi support that use of standard dynamic WordPress content, it also supports the use of custom field data. Whether you have created your own custom fields, or registered a new custom field with a plugin like Advanced Custom Fields, that dynamic data can now be used within the Divi Builder and connected to any module content area.
Advanced Custom Fields to WooCommerce Attributes
Sometimes you need to add a custom field to a product attribute.
A third and important way to group products is to use attributes. There are two uses of this data type that are relevant for WooCommerce: WooCommerce widgets and variable products
Jordan Smith came up with some nice code for that. Snippet forked and added below. This code you can add to your child theme or basic theme’s functions.php. It ads an ACF custom rule type, rule values and then ads it to product attributes.
ACF Field WooCommerce Category
Adding an advanced custom field to a WooCommerce category is similar in ways to adding one to an attribute:
NB Code course John Huebner ACF
ACF Below Product Image
To display an advanced custom field below the product image can be done with relative ease. We found a snippet at Business Bloomer by Rodolfo Melogi as a nice example:
It uses the woocommerce_product_thumbnails hook to add elements below the product thumbnails.
Product Page & Product Table Plugin
To display an ACF field on a product page you can also use ACF to create the fields and the WooCommerce Product Table Plugin. You can read all about it at Barn2 . You can use this plugin to show a lot of product data on top of standard ones.
- Product image, name, price
- Short or long description
- Categories and tags
- Attributes and variations
- Star rating from reviews
- Embedded audio and video
Product Page Admin Only Note
Sometimes the end user wants to add notes in the backend for his use only. A field that is only shown in the admin area. In the admin area for a specific product. How would you go about this? Well, you do of course not have to print / display fields in the frontend so if you do not load them there you can just create them using the advanced field interface. Another way, if somehow your theme autoloads all ACF fields, is to hide them frontend with CSS.
Acf Woocommerce Free
I would use a text area or a field as ACF field type if the note is very short. That would suffice to add a note in the backend.
WC Register Form ACF Fields
To add fields to the WooCommerce Account registration form you could use https://wordpress.org/plugins/acf-woocommerce-account-fields/ . For us it did not work well though. Seems to be outdated somewhat.
You can also add custom ones using your own code. See https://stackoverflow.com/a/49054519/460885 where the awesome LoicTheAztec use the WooCommerce hook woocommerce_register_form to add fields and where he does validation as well.
And to save the form custom fields as well we use the following below as shown in SO thread:
Acf Woocommerce Pricing
NB This is similar to https://wpvilla.in/assign-specific-role-on-registration/
WooCommerce Checkout Fields
Here is another example showing a field at the end of the WooCommerce registration form’s notes or on checkout:
Here woocommerce_after_order_notes and woocommerce_checkout_update_order_meta are the hooks used. So data is added after the order notes and the woocommerce checkout update order meta hook is used to store the extra fields. For other location see a good visual guide at https://businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/ .
Snippet source Max @ ACF Forum
Custom Checkout Fields
If you need to make tweak to fields at /checkout you can use stuff discussed at https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/ . To for example change the order comment placeholder you use:
Now if you want to add more billing fields and or add them before or after exisitng you can use something like
If you want to position them you need to know the priorities of the current ones:
- First name – 10
- Last name – 20
- Company name – 30
- Country – 40
- Street address – 50
- Apartment, suite, unit etc. (optional) – 60
- Town / City – 70
- State – 80
- Postcode / ZIP – 90
- Phone – 100
- Email – 110
Also, do not forget validation. Here a basic one for checking if a real number is entered. Good for a VAT number for example
NB source Jeroen Sormani
NBBCheckout Manager Plugin is very useful too although paid if in need of conditionals
Advanced Product Fields For Woocommerce
NBBB There is Also WooCommerce Booster https://booster.io/features/woocommerce-checkout-customization/ , but no conditionals offered.
My Account / WooCommerce Registration
Like any WooCommerce page there are multiple hooks to adjust or add things to /my-account. See https://businessbloomer.com/woocommerce-visual-hook-guide-account-pages/. Axis and allies iron blitz mac.
To adjust or add more fields things are more complicated like for the checkout, but this is also possible. Business Bloomer has a snippet to add first and last name for example:
NB Also see https://github.com/woocommerce/woocommerce/issues/7667 and https://www.cloudways.com/blog/add-woocommerce-registration-form-fields/
Acf Woocommerce Website
To work with conditionals things get more complicated and of course radio buttons or select boxes are also a bit tougher still. You could use jQuery like this for example showing a field when radio button toggled:
For code above by Business Bloomer you would need to focus on other html fields of course, but often after making choices like checkboxes or radio buttons you would like to toggle other fields.
WC Booster has some basic options including adding a user role select box https://booster.io/features/woocommerce-my-account/ . Does not seem to offer custom fields though.
There is also Yithemes Yith Woocommerce Customiz My Account Page . Does cost another €54.99. But that is really for the my-account overview for logged in users. For the WooCommerce Registration Form https://woocommerce.com/products/custom-user-registration-fields-for-woocommerce/ is recommended. It costs $49 USD.
Shop Page ACF
Acf Woocommerce
If you would like to add a new ACF location to do stuff on the WooCommerce Shop Page you can use