Get UI elements of entry in front end

1. Use the Kint plugin to spit out the current tab to the JS debug console:

{% for tab in layout.tabs %}
    {% if tab.name == "Detaljer" %}

        {{ j(tab) }}

        {% for field in tab.getFields %}

You will see that the structure of the tab-object actually contains the UI-elements as well:

2. Instead of looping tab.getFields, loop tab.elements:

{% set layout = product.getFieldLayout() %}
{% for tab in layout.tabs %}
    {% if tab.name == "Detaljer" %}

        {% for element in tab.elements %}
            {% switch element.className() %}

            {% case "craftfieldlayoutelementsHeading" %}
                <tr>
                    <th class="field-category" colspan="2"><h5>{{ element.heading }}</h5></th>
                </tr> 

            {% case "craftfieldlayoutelementsCustomField" %}
    
                {% set field = element.getField() %}           
                {% if not product.getFieldValue(field.handle) is empty %}

                    {% switch field.className() %}
                        {% case "craftfieldsPlainText" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{{ product.getFieldValue(field.handle )}}</td>
                            </tr> 
                        {% case "craftfieldsCategories" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>
                                    {% include 'commerce/_blocks/categoryList' with { categories: product.getFieldValue(field.handle) } %}
                                </td>
                            </tr> 
                        {% case "craftfieldsDropdown" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{{ product.getFieldValue(field.handle).label}}</td>
                            </tr>           
                        {% case "craftfieldsLightswitch" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{% include 'commerce/_blocks/fieldLightswitch' with { data: product.getFieldValue(field.handle) } %}</td>
                            </tr>         
                        {% case "craftfieldsNumber" %}
                            <tr>
                                <th>{{ field.name|t }}</th>
                                <td>{{ product.getFieldValue(field.handle) }} {{ field.suffix }}</td>
                            </tr>                                                                                                        
                        {% default %}
                            <tr>
                                <th scope="col" itemprop="name">{{ field.name|t }}</th>
                                <td>{{ field.className() }}</td>
                            </tr>

                            {# todo: other non implemented fields #}
                    {% endswitch %}
                {% endif %}

            {% endswitch %}
        {% endfor %}

    {% endif %}
{% endfor %}