The display-selected-service and display-selected-provider elements will be invisible by default.

application/views/components/booking_header.php

@@ -15,10 +15,10 @@
         </span>
         
         <div class="d-flex justify-content-center justify-content-md-start">
-            <span class="display-selected-service me-2">
+            <span class="display-selected-service me-2 invisible">
                 [<?= lang('service') ?>]
             </span>
-            <span class="display-selected-provider">
+            <span class="display-selected-provider invisible">
                 [<?= lang('provider') ?>]
             </span>
         </div>

assets/js/pages/booking.js

@@ -600,9 +600,15 @@ App.Pages.Booking = (function () {
             }
         });
 
-        $(document).find('.display-selected-service').text($selectService.find('option:selected').text());
+        $(document)
+            .find('.display-selected-service')
+            .text($selectService.find('option:selected').text())
+            .removeClass('invisible');
 
-        $(document).find('.display-selected-provider').text($selectProvider.find('option:selected').text());
+        $(document)
+            .find('.display-selected-provider')
+            .text($selectProvider.find('option:selected').text())
+            .removeClass('invisible');
 
         $('#appointment-details').empty();