Adding ACF fields inside pages

You are here:
Estimated reading time: 1 min

There are various ways of adding Advanced Custom Fields inside pages, for example:

LinkUsing Rey’s Dynamic Tags

Read more about Dynamic Tags .

LinkUsing Rey’s ACF fields elements in Elementor

While in Elementor edit mode, you can make use of Rey’s ACF field elements eg: https://d.pr/i/QZwReA .

This however is locked to content built with Elementor, which means that it’s not possible by default on product pages, archives etc. (autogenerated pages).

You will either need to create Rey Custom Templates to override these kinds of autogenerated pages, or inject Global Sections (explained next).


LinkUsing ACF fields elements in Elementor, added through Rey’s Global Sections

Basically you can make use of Rey’s ACF field elements eg: https://d.pr/i/QZwReA , but add them inside a Generic Global section, which can be embedded anywhere in the site through shortcodes eg: https://d.pr/i/dPFOSe .

For example, given any product page, you can add this kind of Generic Global section shortcode (or just the ACF’s shortcode explained below):

  • Inside the product short description;
  • before or after the Add to cart button block in Customizer > WooCommerce > Product page – Components eg: https://d.pr/i/14ssxO . More on this topic here .
  • Into the product description;
  • Into the product information block/tab (in Customizer > WooCommerce > Product page – Tabs/Blocks);
  • Or using the “After Content” global sections in Customizer > WooCommerce > Product page – Content eg: https://d.pr/i/l4CI1A .

However if you plan on much more customisations, i may suggest using Rey’s Custom Templates to build the product page.


LinkUsing ACF shortcode:

ACF has a built-in shortcode for displaying the fields eg:

[acf field="field_name" post_id="123"]

More on this topic on ACF’s documentation .


LinkUsing Elementor Pro’s Dynamic Tags:

In case you’ve bought an Elementor Pro license, you can also use its awesome Dynamic Tags feature.

More on this topic on Elementor’s documentation .


LinkHow to create Advanced Custom Fields

First thing you will need is to access ACF Custom Fields menu in the backend (eg: https://d.pr/i/7yyjhp ) and create a Field Group which will contain the fields you need to publish. There are tons of options and display conditions, but it’s probably best to visit one of the tons of video tutorials .

Was this article helpful?
Dislike 0
Views: 1281

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!