Display ‘Prices Start From’ on accommodation page

[C Green]

Hi there

I’m looking to override the display:none in the accommodation search box but I can’t quite figure out what css needs to change.

I have a child theme, but I guess I also need to change the plugin here rather than the theme?

I *think the css I need to add is this (or similar). Certainly changing the css to display:block works fine when I do it on a loaded page

body.single .site-main>.type-mphb_room_type .mphb-regular-price strong {display:block;}

Would you be able to tell me which css I need to alter here – or if there is a better way to do this

Screenshot attached

View post on imgur.com

TYIA

Corrine

[C Green]

I should say I am using the Booklium theme

[Andre Flores]

Hello there!

The CSS rule is correct, feel free to use it in order to display “Prices start at:” text. You should add this CSS rule under Appearance ->Customize ->Additional CSS in order to overwrite the original rule.

Regards,
Andre

[C Green]

Yeah it doesn’t work there. Not does it work in style.css in the child theme. It looks like it’s set in the hotel-booking.css under booklium/css

So I guess I need to copy that folder / file structure over to my child theme too?

[C Green]

Nope I’m stuck on how to add a child version of the hotel-booking.css and enqueue it properly. I’ve even tried amending the theme css directly and it still doesn’t work.

I can get it to work by reverting to the main theme and adding the css there. But that’s not what I want to do long term, as I want to write a couple of small extra functions to style the footer etc.

Here’s my functions.php

<?php

add_action( 'wp_enqueue_scripts', 'booklium_child_enqueue_styles' );
function booklium_child_enqueue_styles() {
    $parenthandle = 'booklium';
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    
}

And my style.css (note all other css is being applied!)

/*Style the site logo */
.site-branding .custom-logo-link img {
max-width: 150px;
}
.site-header{
width:170px;
}

/*Display 'Prices start from' on accommodation page */
body.single .site-main>.type-mphb_room_type .mphb-regular-price strong {display:block !important;}

/* style WP Forms submit button */
div.wpforms-container-full .wpforms-form button[type=submit] {background-color: #131; color:#ffffff;}

/* Style for cookie banner button*/ 
.cn-button.bootstrap
{
background-color: #2c9c49;
color: black;}

/* Set background colour for font awesome icon set */
.i, .fa, .far, .fas {
  color: #206a39;
	padding:5px;
}

[C Green]

^^ edit: the killer reason I really want to do this in a child theme is because I want to add google recaptcha to the booking form (and I believe I’ll need to write a custom function or amend existing) to do this.

Adding recaptcha integration in Settings would be an awesome feature by the way 😉

[Andre Flores]

Hi, Corrine!

Try adding an !important declaration to the CSS rule, so it looks as follows:

body.single .site-main > .type-mphb_room_type .mphb-regular-price strong {
	display: block !important;
}

This should overwrite the original rule in hotel-booking.css file.

Regards,
Andre

[C Green]

Nope still doesn’t work – already tried that. And from other child themes I’ve written !important shouldn’t be needed (just sometimes in the Additional CSS section if you’re adding it there). It’s very annoying!

[Andre Flores]

Hi, Corrine!

Looks like the issue has been resolved in ticket #29015. For other users, who may be interested in what caused the issue, it occurred because you were trying to change styles, which are not in the parent stylesheet, but in another custom stylesheet (hotel-booking.css). Usually the child theme stylesheet is loading before custom stylesheets of the parent theme, this is the reason changes in hotel-booking.css file were not overwritten in the child theme style.css file.

Regards,
Andre

[Author]

Posts