List view layout for “Accommodation Types Listing” block?

[Michal]

Hello,

I’m using the MotoPress Hotel Booking plugin with a custom theme (not a MotoPress theme).

I followed this tutorial to enable the list view layout on the search results page and it works correctly:
https://support.motopress.com/hc/en-us/articles/360050337852-How-to-enable-list-view-for-the-Search-Results-Page

Now I would like to display my properties in the same list view style on other pages where I use the “Accommodation Types Listing” block. At the moment, this block displays accommodations full-width, with all information stacked vertically under each other, instead of using the cleaner list view layout.

Is there a way to:

apply the same list view template/layout used for the search results page to the “Accommodation Types Listing” block, or

switch that block to a list view via a setting, shortcode attribute, or template override?

Any guidance (or code snippet) on how to achieve this would be greatly appreciated.

Thank you!

[J. Davis]

Hi,
You can add the following functions to the functions.php file of the child theme or to a third-party plugin like Code Snippets:

add_filter ('mphb_sc_rooms_item_top','theme_wrap_image_sc_rooms_item_top');

function theme_wrap_image_sc_rooms_item_top(){
echo '<div class="theme-room-type-images-wrapper">';
}

add_filter ('mphb_sc_rooms_render_title','theme_wrap_info_sc_rooms_render_title', 9);

function theme_wrap_info_sc_rooms_render_title(){
echo '</div>';
echo '<div class="theme-room-type-info-wrapper">';
}

add_filter ('mphb_sc_rooms_item_bottom','theme_wrap_info_mphb_sc_rooms_item_bottom');

function theme_wrap_info_mphb_sc_rooms_item_bottom(){
echo '</div>';
}

And add the CSS below to the style.css file of the child theme or at Appearance > Customize > Additional CSS:

@media(min-width:1024px){
.mphb_sc_rooms-wrapper.mphb-room-types .mphb-room-type {
display:flex;
flex-direction:row;
}
.mphb_sc_rooms-wrapper.mphb-room-types .mphb-room-type > div{
width:50%;
}

.mphb_sc_rooms-wrapper.mphb-room-types .mphb-room-type .theme-room-type-images-wrapper{
padding-right:1.5rem;
}
}

[Author]

Posts