> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/integrations/themes/flatsome/displaying-custom-fields.md).

# Displaying custom fields in the Flatsome theme

Using [*Layouts*](/advanced-views/getting-started/first-layout.md) from Advanced Views, you can display any custom fields in [Flatsome](https://themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/5484319). Smart templates [give you complete control](/advanced-views/getting-started/key-aspects.md) over the markup and display logic without extra hassle. 

{% hint style="success" %}
Advanced Views natively supports fields from multiple providers:

1. [WordPress fields](/advanced-views/fields/wordpress-fields.md) (like page title, excerpt, user name, etc)
2. [Advanced Custom Fields](/advanced-views/fields/meta-plugins/advanced-custom-fields.md) (any field type)
3. [MetaBox fields](/advanced-views/fields/meta-plugins/meta-box-fields.md) (any field type)
4. [Pods fields](/advanced-views/fields/meta-plugins/pods-fields.md) (any field type)
5. [WooCommerce Product fields](/advanced-views/fields/woo-product-fields.md) (like price, SKU, height, etc)

To display [other fields](/advanced-views/fields/other-fields.md) made by your theme or plugins, just [customize the default Layout template](/advanced-views/layouts/code-fields/custom-template.md).
{% endhint %}

## 1. How to display custom fields on a single page

{% hint style="info" %}
The steps below apply to the Flatsome UX builder. If you edit pages using the Gutenberg editor, refer to our [Gutenberg editor guide](/advanced-views/integrations/editors/gutenberg/displaying-custom-fields.md) instead.
{% endhint %}

In Advanced Views, *Layouts* are embedded using native WordPress shortcodes, which you can paste in any place in the Flatsome UX builder: 

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FAhmXiblu8w9WTHoDMg6h%2Flayout-in-flatsome.png?alt=media&amp;token=72366ec5-2eb4-4d06-97b6-04c17f42150b" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Edit the target page with the Flatsome UX builder
5. **Within Flatsome**: Click on the plus and add an [HTML element](https://demos.flatsome.com/elements/)
6. **Within the HTML element:** Paste the Layout embedding shortcode
7. Save the page and visit it to see the result

To change the default field appearance, open the created *Layout* and [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md).&#x20;

{% hint style="success" %}
By default, *Layout* displays chosen fields of the current page. You can display fields from other sources by tuning the [Layout shortcode arguments](/advanced-views/layouts/embedding-shortcode.md).&#x20;
{% endhint %}

## 2. How to display custom fields in a UX Block

Using Advanced Views, you can also display custom fields in the Flatsome [UX Blocks](https://docs.uxthemes.com/article/57-blocks-custom-post-type):

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FctMDQ5rZcueFv0CpywSX%2Fflatsome-ux-blocks.png?alt=media&amp;token=9a0cca30-e45e-4ad1-85bf-0eb257041420" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FYDAodFJQhUDRHj8wMwag%2Fflatsome-ux-block.png?alt=media&amp;token=b753a7ab-a236-41d6-a192-4c6b0fb83cc1" alt=""><figcaption></figcaption></figure>

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the Flatsome UX Blocks (Dashboard → UX Blocks)
5. Choose any Block (or add a new one)
6. **Within Flatsome**: Click on the plus and add an [HTML element](https://demos.flatsome.com/elements/)
7. **Within the HTML element:** Paste the Layout embedding shortcode
8. Save the Block and visit the target page to see the result

When the Block is rendered, the embedded *Layout* automatically displays the custom fields for the current page, post, or other content item using that Block.

{% hint style="success" %}
*Layout* IDs are unique string identifiers, not WordPress post IDs. Unlike post IDs, they remain unchanged when *Layouts* are exported and imported, ensuring consistent references across different environments, such as staging and production.
{% endhint %}

## 3. How to display custom fields in the Header/Footer

{% hint style="info" %}
A common use case is [displaying custom fields from an Options page](/advanced-views/field-sources/options-page.md) in the site footer.&#x20;
{% endhint %}

In Flatsome, Header and Footer templates can be customized by assigning a UX Block. The integration process is the same as for any other UX Block. The only difference is the shortcode modification: you need to add the `object-id` argument to load fields from the Options page:

1. [Create a *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add target fields in the *Fields* tab and save the *Layout*
3. Copy a [Layout embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Open the Flatsome UX Blocks (Dashboard → UX Blocks)
5. Choose the Header/Footer Block (or add a new one)
6. **Within Flatsome**: Click on the plus and add an [HTML element](https://demos.flatsome.com/elements/)
7. **Within the HTML element:** Paste the Layout embedding shortcode
8. Save the Block and visit the target page to see the result

{% hint style="warning" %}
If you created a new UX Block for Header/Footer, make sure you have assigned it in the Dashboard → Appearance → Customize → Header/Footer → Custom block option:
{% endhint %}

<figure><img src="https://2293383029-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN2nAC4pTDjEmDu8ZkLB2%2Fuploads%2FCO6f8I9UnPCkrlTdSX8q%2Fflatsome-custom-footer.png?alt=media&amp;token=03c0746a-7076-4b75-af1b-b0af2fe0f0ea" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Unlike page-specific custom fields, custom fields from an Options page are site-wide. As a result, the same values are displayed on every site page.
{% endhint %}