How to enable list view for the Search Results Page?

[eric Brabants]

I am trying to apply : https://support.motopress.com/hc/en-us/articles/360050337852-How-to-enable-list-view-for-the-Search-Results-Page

I use the Booklium theme, with a child
I ally the css with a “snippets” and the css in “Appearance > Customize > Additional CSS”

in my case, the information elements (title, description, details, buttons) are under the image/gallery. it should be next

Could you help me

[J. Davis]

Hi Eric,
The layout of the search results page is customized in the Booklium theme. The code in the article is useful for the third-party themes without a custom design of the search results page.

[eric Brabants]

In fact, I use the following code (taken from here) to display the search results page in three columns, and it works very well.

I find the list view clearer for travelers, but I don’t see how to adapt the code from the original article.

—— The PHP part——
/**
* wrap the image/gallery and the information elements (title, description, details, buttons) into different divs
*/
add_filter (‘mphb_sc_search_results_room_top’,’theme_wrap_image_sc_search_results_room_top’);

function theme_wrap_image_sc_search_results_room_top(){
echo ‘<div class=”theme-room-type-images-wrapper”>’;
}

add_filter (‘mphb_sc_search_results_before_info’,’theme_wrap_info_sc_search_results_before_info’);

function theme_wrap_info_sc_search_results_before_info(){
echo ‘</div>’;
echo ‘<div class=”theme-room-type-info-wrapper”>’;
}

add_filter (‘mphb_sc_search_results_after_info’,’theme_wrap_info_sc_search_results_after_info’);

function theme_wrap_info_sc_search_results_after_info(){
echo ‘</div>’;
}

—— The CSS part——
/* resultats de la recherche de gites disponible en 3 colonnes en association avec l’ajout de ” wrap the image/gallery and the information” dans le fonction.php */
@media (min-width:991px){
.mphb_sc_search_results-wrapper{
display:flex;
flex-wrap:wrap;
}

.mphb_sc_search_results-wrapper .mphb-room-type{
width:33%;
padding:0em 1em;
margin-top:0 !important;
}

.mphb_sc_search_results-info, .mphb-recommendation-title, #mphb-recommendation, #mphb-reservation-cart{
width:100%;
}
}

[Author]

Posts