Search Result / Availability List – Custom Display Options

[Tilman]

Hi,

Is there an opportunity to customise more granular the default view options related to the availability list generated post search?

For instance, we would like to display certain key parameters on this availability form/list such as max. occupancy, size, bed type only but not the other ones such as category, amenities etc.. The current default options allow to toggle ALL details on/off only. In our case, however; i.e. a long amenities list does not look appropriate for a summary list like this. If possible at all, could their display position & order be customised as well?

We are also aware of separate view details button/page shown on that form; however in our opinion it might be beneficial for the guests to see those selected key parameters at glance in order to support for selection of multiple accommodations at once.

The same question would apply to the related widget settings where you can display i.e. special offers in certain granularity.

Theme: Luviana incl. HB Plugin: 3.7.1

Thank you very much for your cooperation
Tilman

[Andre Flores]

Hello, Tilman!

The layout of the Search Results Page itself and the appearance of accommodation types on that page can be edited via custom CSS coding.
If you have a lot of amenities, you may hide them all at once or some specific ones if needed. For example, use below code to hide in-room safety amenity:

.mphb-room-type-facilities .facility-in-room-safe {
	display: none;
}

Each amenity has its own CSS class, so you can easily hide any of them separately or several at once.

As for the Special Offers section, it uses the Accommodation Types widget – you may configure the look of the widget by adjusting its settings: https://prnt.sc/snw1te. You may hide Description, but enable Details, for example, it should take less space and look better.

Regards,
Andre

[Tilman]

Hi Andre,

many thanks – works as described for both (avail. form & widget). However, few minor related follow-up’s which came up meanwhile.

1) Where can I see/find the related code snippets / CSS class for i.e. amenities as per your advice above? Just in case to further customise.

2) On the special offers section (by accommodation types widget) the details could be also reduced; however there it shows me both: the icon & text (i.e. such as view, size etc.) which it does not on the search results page (icon only)

3) For general understanding: Does the availability search (and its results) impacts the special offer listings as well automatically? Means, in case set special offers are not available for searched time period (i.e. partially) they will be not displayed? Or are those offers “hard” listed and will be displayed all the time and the guest would need separate availability check for those?

4) On the special offers section (by accommodation types widget), depending prob. on 3) above – Why there are not the same two buttons displayed as per main form? If I click on the book button, it redirects me to the related accommodation type/details site where I have to to search again etc. Is that intended or could I add the same two buttons/functions there as well?

Many thanks again
Tilman

[Andre Flores]

Hi, Tilman!

1). You may find out any element class/ID by using Inspect Element feature in your browser: https://prnt.sc/sokt0m.

2). If you would like to hide titles in the Special Offers widget, you may add the following code under Appearance ->Customize ->Additional CSS:

.mphb-widget-room-type-attributes .mphb-attribute-title {
	display: none;
}

This is how it will look like: https://prnt.sc/sokulq.

3). The availability search and its results do not affect the Special Offers widget, you select accommodation types you would like to be displayed in the widget in widget settings. If your offers are time-limited, you will need to disable/add accommodation types manually.

4). Since the widget is not affected by the search results, the “Book” button leads to accommodation details page, where your Guests could check the availability and other required details. If you think the button text may confuse your Guests, you may change its title by editing the widget PHP code. Look for the line 210 of room-content.php file under /wp-content/plugins/motopress-hotel-booking/templates/widgets/rooms/ directory:

<?php mphb_tmpl_the_loop_room_type_book_button_form(); ?>

Replace it with the following:

<?php mphb_tmpl_the_loop_room_type_view_details_button(); ?>

Please note, that this is a temporary solution, since changes may be reverted after the plugin update.

Regards,
Andre

[Tilman]

Hi Andre,

great help here again – thanks a lot.

Finally, general question reg. impacts of plugin updates:

a) understood for those cases as you have indicated and I came across the forum so far
b) what about any custom CSS we’ve made?
c) what about any Loco translations we’ve made?

Are there any “general rules” to be considered making such custom changes? i.e. custom CSS one’s remain, custom shortcode IDs remain etc.

Thank you & Regards
Tilman

[Jan van Welie]

This reply has been marked as private.

[Andre Flores]

Hi, Tilman!

Custom CSS added under Appearance ->Customize ->Additional CSS will not be lost after any plugin/theme update, no worries at all.
As for Loco Translate changes, you should make sure to store translations in directories, other than the plugin/theme directory. You may easily check it by navigating to Loco Translate ->Plugins ->Hotel Booking – open desired language and click “Relocate” tab – you will see, where your language files are stored, make sure they are either under /languages/plugins/ or /languages/loco/plugins/ directory.
Overall, if you are planning to perform any changes to theme/plugin code, it is recommended to override the original code by using child theme, not directly in plugins files.

Regards,
Andre

[Andre Flores]

Hello, Jan!

Unfortunately, there is no option to separate search results by pages by default, however, you may use any additional plugin to do that, e.g. Load More Anything plugin – it allows to set any element class/ID, where the load more button should appear. You will be able to allow your Guests to load more results, once they reach the last (10th) accommodation type if needed: https://prnt.sc/sp86wb.
As for search results page layout, you may check this article on how to make accommodation types displayed in several columns.

Regards,
Andre

[Jan van Welie]

This reply has been marked as private.

[Andre Flores]

Hi, Jan!

You are most welcome. In case there are more similar requests from other users, we will definitely consider adding this feature in one of plugin future updates.

Regards,
Andre

[Tilman]

Hi Andre,

few related follow-up’s which I have realized meanwhile post changes made based on the trail recently.

1) Post successful suppression of certain parameters (such as category, amenities etc.) on the availability form/list and accommodation type widget, those one’s have been also suppressed on the accommodation type page (detailed view page) which was not the objective bc there is ok to be shown – any option to distinguish between those different views/pages?

2) Is there an option to a) display and b) select associated rates / rate plans as defined on the accommodation type page (detailed view page) and/or availability form/list directly? Hence, visible & selectable to guests prior to check-out page where it can be selected.

3) Is there an option to a) display and b) select associated extra service as defined on the accommodation type page (detailed view page) and/or availability form/list directly? Hence, visible & selectable to guests prior to check-out page where it can be selected.

4) On the pinned side bar/reservation for at accommodation type page (detailed view page) the two buttons are slightly overlapping once you have checked the availability per button and the book button appears (tried different browser versions) – can the spacing be modified?

5) Can the accommodation type page (detailed view page) be edited in a feasible manner without using a page builder (i.e. Elementor you suggest in forum posts)? Would like to change the i.e. image related presentation style, order and granularity of content etc.

Thank you very much again
Tilman

[Andre Flores]

Hello, Tilman!

1). Do you mean that by hiding parameters titles in the Accommodation Type widget you have also got them hidden on the accommodation type detailed pages? I have checked it and it was not the case on my end. Make sure you are using the following CSS rule to hide titles in widget specifically:

.mphb-widget-room-type-attributes .mphb-attribute-title {
	display: none;
}

2). You may have available rates displayed on any page by adding [mphb_rates] shortcode, so your Guests could see available rates for specific accommodation types. Choosing among available rates before going to checkout is not an option, unfortunately, however, you may enable “Skip search results page and enable direct booking from accommodation pages.” option under Accommodation ->Settings in order to allow your Guests to proceed to checkout right after selecting desired check-in/check-out dates. This will allow avoiding an additional step for your Guests and choosing desired rate without checking search results once again.

3). Unfortunately, this is not an option as well, however, again, you may use [mphb_services] shortcode to list all or specific services on any desired page, so your Guests could see which ones are available

4). Are you referring to these elements spacing? https://prnt.sc/sx2e7v If so, you may add more spacing there by adding the following code under Appearance ->Customize ->Additional CSS:

body.single .mphb_room_type .single-room-reservation-form .mphb-reserve-btn-wrapper {
	margin-bottom: 2.5rem;
}

5). There are several ways of eiting accommodation type (single) pages, you may check them all in this article.

Regards,
Andre

[Tilman]

Hi Andre,

thanks again for useful updates. Actually, my recent aspects were related to the aspects and conditions outlined within the trail. Let me clarify a bit.

1) Initially, it was about to display (i.e. number guests, bed type) and hide (i.e.categories and amenities) certain parameters on the search results page/form and on the accommodation type widget which works fine as per your recent advices. However, once done those proposed changes I realized that the one which I hided there, became also invisible on the detailed accommodation type pages. There it should be visible bc of the nature of such pages (more details).

2) Noted! Also, I have skipping enabled already.

Is that something which could be added to the feature list? I think, it’s quite useful and more efficient from a guest perspective having such pricing transparency and options to select straight away on both search result page & per accommodation type page, not only at end of the process on check out form, also considering the current design of the check out form which makes it really hard to read esp. when you have multiple reservations at once. On check out page there they should be still able to modify.

3) Noted! This one is logically/technically identical to 2) above, just reg. services rather then rates.

4) We hide the info ” x of accommodation. available” in general as per guidance. On the accommodation type page sidebar it looks like this for us https://prnt.sc/sx3b1n (via latest Chrome Version, Note: designation of buttons has been edited as per guidance) …but has been fixed as per your CSS advice

5) Noted! I’m well aware of that particular page. Just wanted to double check if there is any additional option as of today available, no worries.

Thank you again
Tilman

[Andre Flores]

Hi, Tilman!

1). Got your point, you may use below code instead. The idea is to add .widget_mphb_rooms_widget class before category/amenities classes in order to have the rule applied to the sidebar widget only:

.widget_mphb_rooms_widget .mphb-room-type-facilities .facility-in-room-safe {
	display: none;
}
.widget_mphb_rooms_widget .mphb-room-type-categories {
	display: none;
}

2). We have a similar feature request, I have added your up-vote to it as well, and in case there are more requests from other users, we will consider adding this option in one of plugin future updates.

3). There is no such feature request, however, we will keep this in mind for the future.

4). I am glad it helped.

5). Thanks for the feedback.

Regards,
Andre

[Tilman]

Hi Andre,

thank you for response and advice.

1) almost there 🙂 For the accommodation type widget it works now. However, the 2. aspect was reg. types listed on search results page/form in direct correlation to the accommodation types page in detailed view. Following your initial advice, if I hide via:

.mphb-room-type-facilities {
display: none !important;
}

.mphb-room-type-categories {
display: none !important;
}

…then those attributes are hidden on both views (search results page/form AND accommodation types page in detailed view). My objective is to hide on search results page/form only, and should be visible on accommodation types page in detailed view.

I have done inspection of both views/pages but could not work out successfully. I can see i.e. mphb-room-…, mphb-rooms-…, mph-loop-room-… etc.

Hope its more clear what I try to achieve.

2) – 5) understood / noted. Would be great to see those extra functionalities as indicated soon.

Best regards
Tilman

[Author]

Posts