Elementor makes it easy for you to work with WordPress custom fields whereby you can display the custom fields on any area on a page without dealing with PHP code thanks to its visual editor. ACF (Advanced Custom Fields), Pods, and JetEngine are examples of custom field plugins that are supported by Elementor. But what if you are experiencing an error when working with custom fields in Elementor?
One of the common issues when working with custom fields in Elementor is that the custom fields not showing up in the canvas area in the editor whereas they do show up on the live page (when you preview the page). This is ridiculous as you won’t be able to style up the text of fields. There are two solutions you can try to fix the issue:
Solution 1: Change the Preview Setting
Chances are, you experience the issue when trying to add a custom field on a page instead of a custom template. According to a discussion on GitHub, many believe that it’s a bug on the new version of Elementor. But when we tried to add a custom field on a custom template instead of a page, everything went back to normal after we change the preview setting. You can try to do it too.
Create a new custom template by going to Templates -> Theme Builder. Create a new template (e.g. single post template). On the Elementor editor, click the gear icon on the bottom-left corner. On the Preview Settings block, select the content type you want to assign the template to and select an existing content. Click the APPLY & PREVIEW button.
Next, add a Text Editor widget to the canvas area. Click the dynamic icon on the content editor and select ACF Field (or Pods Field in you use Pods). On the ACF Field, click the wrench icon and select the key (custom field) you want to display.
Solution 2: Switch Back to the Older Version of Elementor
As we mentioned above, it’s probably a bug on the newer version of Elementor that you can’t add a custom field to a page. That being said, you can switch back to the older version of Elementor. To do so, go to Elementor -> Tools and click the Version Control tab. Select the older version of Elementor Free on the Rollback Version option and Elementor Pro on the Rollback Pro Version option and click the Reinstall button. Don’t forget to click the Save Changes button to apply the change.
You can try the available versions until the problem is solved.