{"id":1964839,"date":"2025-04-07T11:55:38","date_gmt":"2025-04-07T15:55:38","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?p=1964839"},"modified":"2026-04-21T23:45:22","modified_gmt":"2026-04-22T03:45:22","slug":"how-to-display-additional-fields-individually-when-using-elementor-on-single-events","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/how-to-display-additional-fields-individually-when-using-elementor-on-single-events\/","title":{"rendered":"Customizing Event Data in Elementor"},"content":{"rendered":"\n

Display Specific Additional Fields Using Shortcodes<\/h2>\n\n\n\n

Our Elementor Additional Fields widget will show all the additional fields for an event in one block. You may want to display only certain Additional Fields on an event, or display them in different areas. This guide will help you achieve just that. By using this custom code snippet, you will be able to display the event\u2019s Additional Fields by using a shortcode. Here are step-by-step instructions on how to do this.<\/p>\n\n\n\n

While this guide is specific for Elementor, the code will create a shortcode that you can use anywhere on the site where there is a single event even without Elementor.<\/p>\n\n\n\n

Step 1: Add The Shortcode Code To Your Site<\/h3>\n\n\n\n

Before you can use the shortcode in Elementor, you\u2019ll need to add the code to your website. Follow these steps:<\/p>\n\n\n\n

    \n
  1. Log in to WordPress.<\/li>\n\n\n\n
  2. Go to your Theme\u2019s functions.php<\/code> file: From the WordPress dashboard, navigate to Appearance > Theme Editor<\/strong>.<\/li>\n\n\n\n
  3. On the right, find and select the functions.php<\/code> file.<\/li>\n\n\n\n
  4. Add the code: Copy the provided PHP code below and paste it at the end of your functions.php<\/code> file.<\/li>\n<\/ol>\n\n\n\n
    \n

    Note:<\/strong> Additionally, you can read our Using Custom Code Snippets for a more detailed explanation of this.<\/p>\n<\/blockquote>\n\n\n

    \n\/\/ Define the shortcode\nfunction custom_event_custom_fields_shortcode( $atts ) {\n    \/\/ Get the current event ID\n    $post_id = get_the_ID();\n\n    \/\/ Get the custom fields for the event\n    $custom_fields = tribe_get_custom_fields( $post_id );\n\n    \/\/ Get custom field name from the shortcode attribute\n    $atts = shortcode_atts(\n        array(\n            'field' => '', \/\/ Default is empty\n        ),\n        $atts\n    );\n\n    \/\/ Initialize the output string\n    $output = '';\n\n    \/\/ Check if the custom field exists based on the attribute 'field'\n    if ( ! empty( $atts['field'] ) && isset( $custom_fields[$atts['field']] ) ) {\n        $output .= '<div class="custom-field-section">';\n        $output .= '<h3>' . esc_html( $atts['field'] ) . '<\/h3>';\n        $output .= '<p>' . esc_html( $custom_fields[$atts['field']] ) . '<\/p>';\n        $output .= '<\/div>';\n    }\n\n    \/\/ Return the output\n    return $output;\n}\n\n\/\/ Register the shortcode\nadd_shortcode( 'event_custom_fields', 'custom_event_custom_fields_shortcode' );\n\n<\/pre><\/div>\n\n\n
      \n
    1. Save the changes to the functions.php<\/code> file.<\/li>\n<\/ol>\n\n\n\n
      Step 2: Add The Shortcode In Elementor<\/h3>\n\n\n\n
      Now that the shortcode is set up, you can easily display custom fields on any Elementor page. Follow these steps:<\/p>\n\n\n\n
        \n
      1. Edit the Page in Elementor:<\/strong> Go to the page or post where you want to display the custom field in Elementor.<\/li>\n\n\n\n
      2. Add the Shortcode Widget:<\/strong> Drag the Shortcode<\/strong> widget into the section where you want the custom field to appear.<\/li>\n\n\n\n
      3. Insert the Shortcode:<\/strong> In the Shortcode widget, type the following shortcode: [event_custom_fields field=\"Custom Field\"]<\/code><\/li>\n\n\n\n
      4. Replace “Custom Field”<\/em> with the exact name<\/strong> of the custom field you want to display (e.g., “Event Website”<\/em> or “Location”<\/em>). You can find this by going to Events > Settings > Additional Fields<\/strong> and checking the label there. Whatever you named it there, is a custom field name that needs to be replaced.<\/li>\n<\/ol>\n\n\n\n
        Step 3: Customize And Display Multiple Fields<\/h3>\n\n\n\n
        You can add multiple shortcodes on the same page to display different custom fields. Just copy the shortcode widget and change the field<\/code> attribute to the name of the custom field you want to display. For example, to display a field called \u201cDress Code\u201d you can use [event_custom_fields field=\"Dress Code\"]<\/code> or to display a field called Parking, use [event_custom_fields field=\"Parking\"]<\/code> (these are just examples, you can use whatever field name you need).<\/p>\n\n\n\n
        Here\u2019s an example of me using it on my site with a field called \u201cUnique Value\u201d: (Visual Example\/Screenshot normally appears here)<\/em><\/p>\n\n\n\n
        And this is what it looks like: (Visual Example\/Screenshot normally appears here)<\/em><\/p>\n\n\n\n
        If you don\u2019t like how it looks, and you\u2019re comfortable with HTML \u2013 you can change what is outputted in this function:<\/p>\n\n\n
        \n    \/\/ Check if the custom field exists based on the attribute 'field'\n    if ( ! empty( $atts['field'] ) && isset( $custom_fields[$atts['field']] ) ) {\n        $output .= '<div class="custom-field-section">';\n        $output .= '<h3>' . esc_html( $atts['field'] ) . '<\/h3>';\n        $output .= '<p>' . esc_html( $custom_fields[$atts['field']] ) . '<\/p>';\n        $output .= '<\/div>';\n    }\n\n<\/pre><\/div>\n\n\n
        Integrating Event Tickets With Elementor: Crafting Custom Ticket Layouts<\/h2>\n\n\n\n
        Enhancing your WordPress event pages with custom ticket layouts can significantly improve user experience and boost ticket sales. By integrating Event Tickets Plus plugin with Elementor, you can design visually appealing and functional ticket sections without delving into code. This guide will walk you through the process of creating custom ticket layouts using Elementor.<\/h3>\n\n\n\n
        Prerequisites<\/h2>\n\n\n\n
        Before you begin, ensure you have the following plugins activated:<\/p>\n\n\n\n