1. Acf Woocommerce Review
2. Woocommerce Product Fields
3. Advanced Product Fields For Woocommerce

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

Acf Woocommerce Review

I created a custom file field with ACF and added that to my woocommerce product page. Which works fine. I have a website in 3 languages and I (and specially my client) need to be able to upload a translated (pdf) file on each language. When I go to the WPML Woocommerce translation I see the custom field. So it is translatable. Description Advaced Product Fields allows you to add custom form fields to your WooCommerce product pages. Whether you want to create a pizza configurator or simply add extra options, this plugin has got you covered! The backend looks & works similar to ACF, so you are familiar with setting up the options without a hassle.

• 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.

Woocommerce Product Fields

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.

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:

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

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/.

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/

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

If you would like to add a new ACF location to do stuff on the WooCommerce Shop Page you can use

Providing the ability to filter products on your website is essential. A good filter will allow your customers to find the exact post or product they are looking for as quickly as possible, saving time, improving the experience, and therefore increasing conversions by directly accessing the products. WordPress comes with some limited filtering options by default, which in turn has resulted in our WooCommerce Product Filter by WooBeWoo plugin with better filtering options.
WooCommerce Product Filter by WooBeWoo allows you to filter products based on almost any parameters such as price, categories, attributes, tags, ratings, and others.
But our plugin has gone further and offers you integration (for Pro version of Product FIlter ) with the Advanced Custom Fieldplugin and full integration for Custom Post Field UI (for Pro version of Product FIlter).
Let’s say you’ve added a new field to your product, or even created a completely new product type with all kinds of new fields. It would be nice to be able to filter your product type by one or more of these fields

Advanced Custom Field

WooCommerce Product Filter by WooBeWoo is compatible (for Pro version of Product FIlter) with the Advanced Custom Field plugin.
The Advanced Custom Fields plugin gives you full control over WordPress editing screens and custom field data.
Custom fields are a great opportunity to add any required information about your products. You can also add data that cannot be added to any of the fields that come with WooCommerce by default.

Advanced Product Fields For Woocommerce

• First, you need to create a custom field that you will use to add data to the Advanced Custom Fields plugin . Navigate to custom fields and click Add New Field Group. Make sure you select the “Products” message type. This is required for the custom field to appear on the add/edit screen for your products.

• Click “Add Field”, add a label, a field name and select the desired field type. You can add the following ACF field types – ‘text’, ‘number’, ‘radio’, ‘select’, ‘button_group’, ‘checkbox’, ‘true_false’, ‘date_picker’, ‘date_time_picker’, ‘time_picker’, ‘color_picker ‘ . Let’s add a True / False field as an example.

• After you add any type of field, it will appear on the product page. Navigate to Products and click Add / Edit Product. Scroll down to the custom files created and add data and refresh/publish the product page.

• To display a custom field in a product filter, go to the filter editor. Click Add Attribute Filter and select the required field from the drop-down list.

• Now in the preview you will see a filter for this type of field.Then you can completely customize its options and design. Explore our detailed documentation to find out more

Custom Post Field

WooCommerce Product Filter by WooBeWoo PRO version is fully compatible with the Custom Post Field UI plugin.
This free plugin lets you create a taxonomy and assign it to WooCommerce products or any other type of post. Once you’ve created a custom taxonomy, it will appear on the product page with a checkbox for each taxonomy term. You can add a taxonomy term in the same way as adding categories and display it easily in the product filter.
With taxonomies, you can store and display additional product data. So, they are designed to store reusable information that can be used to group and filter products. You can create a dedicated page listing all products that have a specific custom taxonomy term. You can also use taxonomies to filter products with the WooCommerce Product Filterplugin.

Follow this guide step-by-step to create taxonomies, add them to a product, and display them in a filter:

• Installed theCustom Post Type UI
• Go to CPT UI -> Add / Edit Taxonomies
• Add labels Slug, Singular and Plural.
• Select “Products” as the post type to attach.

• Make other necessary settings. All detailed instruction you can find in the plugin documentation.
• Click Add Taxonomy. A new taxonomy will now appear on the product page.
• Then just enter the details. For example the genre of music

• Next, when creating a product filter, add a filter by Attributes, and in the field select an attribute, select your taxonomy, after which it will be displayed in the preview.

• Now in the preview you will see a filter for this type of field.Then you can completely customize its options and design. Explore our detailed documentation to find out more

Your store needs Product Filter by WooBeWoo

If you are going to create your first store or already have a store based on WooCommerce, then you need this plugin, which can filter by any product parameter, and now it is fully compatible with these excellent plugins for adding taxonomy and custom fields.
The plugins come with numerous design options that you can from colors to shapes, you can change their appearance. Moreover, you can choose from different types of filters such as slide filters, checkboxes, dropdowns, and others. The more design options you have at your disposal, the more custom websites you can create.
The WooBeWoo team works every day and makes working with WooCommerce very convenient and almost perfect for you. Nowadays it is the best plugin for filtering WooCommerce products.
Get the WooCommerce Product Filter plugin and filter your products online today through your online store. Or use the WooCommerce Product Table plugin to create a new online store and try the filters built inside. Choose the plugin you want and install it now!

• Design
• FAQ
• Filters
• Options
• General