Custom Elementor Search Results Page

[Ushir Shah]

When searching for accommodation availability on the home page. (https://foressence.onlineco.co.za/)

The results get pushed out in a standard way.

I would like to customize the look of the way the results get displayed according to the style of the website, to which then they can go to the page for that accommodation to which then they book.

A MUST HAVE
1) Is possible to use elementor for the customization of the search results or does this need to be in CSS?

It will be nice to have:
2) Is it possible to design the entire site without much css coding? and just use elementor.

3) If you look at the chalet page I would like your plugin to display there instead of a custom page.

4) If you look at the home page with all the chalets listed. I would like the plugin to automatically display there.

The problem now is that the information is duplicated on both the elementor pages and within your plugin. (But if this is the only way to achieve the result we need then so be it.)

But if there is a way for mainly the info to be in the booking plugin and then display in a way that is presentable on search which then leads them to the individual pages to which then they can book that is fine as well.

Thank you.

Regards
Ushir
[email protected]

[Andre Flores]

Hello Ushir,

1). You may either edit the Search Results page via CSS or by overriding plugin functions in your child theme. You may the following articles on how to adjust the Search Results page layout:

https://support.motopress.com/hc/en-us/articles/360040164491-How-to-display-search-results-in-several-columns-
https://support.motopress.com/hc/en-us/articles/360050337852-How-to-enable-list-view-for-the-Search-Results-Page-

2). Basically, it is possible, however, there are some system pages, which need some more effort to be edited via Elementor, e.g. single accommodation type pages. Check this article on how to edit them.

3). You may simply use plugin shortcodes in order to have it displayed on an existing page, e.g. [mphb_availability id=”777″] and [mphb_availability_calendar id=”777″], where “777” is the ID of the accommodation type. These two shortcodes will add availability calendar and booking form on the page.

4). In this case it would be better to link existing chalets on your Home page to corresponding accommodation types or to your custom pages with aforementioned shortcodes inserted, so your guests could check the availability there.

As for duplicated information on your pages, you will need to hide the plugin meta blocks in order to avoid this from happening. The code to remove meta blocks is located in the article from 2)., e.g.:

remove_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
 'renderCalendar' ), 40 );

Regards,
Andre

[Author]

Posts