style the booking confirmation page

[Ciaran Connolly]

How do you style the booking confirmation page?

View post on imgur.com

View post on imgur.com

It just displays in a big list? i want to style that?

Even when i click on customize to try and do some CSS i see nothing
https://imgur.com/undefined
Thanks 🙂

[Kok Wai Lai]

Support customization request on booking confirmation page.

Especially the Price Breakdown part, i do not see there is a need to add the line like:-

1. Dates Subtotal
2. Accommodation Subtotal
2. Accommodation Taxes Subtotal
3. Fess Subtotal

Thats just make it hard to read from mobile phone. It is better to make the booking process SIMPLE and SAFE. The fewer steps the better !!

[J. Davis]

Hi Ciaran,

Thanks for your question. By default, the plugin inherits the styles (of headings, inputs, list, table) from your theme. If your theme does not offer proper styling you may add custom CSS to style it in the way you want. You just need to inspect the needed heading or another element on the page to find its class or ID and apply the other styles.
Unfortunately, your last screenshot seems to be corrupted and we can not see what styles you have tied to apply.

By the way if you want to edit, add or remove some fields from checkout form you may use Checkout Fields Editor addon https://motopress.com/products/hotel-booking-checkout-fields/

best regards,
J. Davis

[J. Davis]

Hi Lai,

Thank you for your further question. By default the price breakdown is folded and there is not much information. If you can see the price breakdown unfolded by default you should navigate to Accommodation > Settings and disable this option.
If you still do not need the mentioned information it is possible to hide that information from price breakdown applying custom CSS:

.mphb-price-breakdown-dates-subtotal, .mphb-price-breakdown-accommodation-subtotal, .mphb-price-breakdown-fees-subtotal, .mphb-price-breakdown-accommodation-taxes-subtotal{
display:none;
}

Best regards,
J. Davis

[Kok Wai Lai]

Hello John,

Thx for the note. Appreciate it.

Cheers,

Lai

[Tilman]

Hi,

thanks for advices as part of this trail so far. However, I tend to agree to fact that the Booking confirmation Page appears really hard to read currently. I’m aware of the checkout edit plugin for certain minor modifications; However, …

1) Is there a feasible opportunity to design/structure similar to this very positive sample in my opinion? https://prnt.sc/sw32xa

Especially. the horizontal view and separation / spacing / colouring between related key parts / elements is quite good.

2) Also, as shown at sample – Is there a feasible opportunity to add / embed such a classic progress bar in order to guide the guest through the 3-4 step process? I’m aware of those widgets in general but would be also possible to implement in your theme? It should be integrated with previous selections guest have made (dates, rooms etc.) and you should have the option to jump back to previous pages of selections.

Theme: Luviana incl. HB Plugin: 3.7.1

If not possible in a feasible way, I highly vote for to get on your features list.

Thank you for clarification
Tilman

[J. Davis]

Hi Tilman,

Thank you for your feedback.

1. The screenshot you sent looks like the current Booking Confirmed (Received) page which is generated by [mphb_booking_confirmation]. It is possible to move/remove the blocks of the checkout page using functions and actions. Also, it is possible to adjust the styles of each section of the checkout page adding custom CSS.

2. As for the visual steps at the top o the page so there is no inbuilt option for that. As a workaround, you may look for some third-party breadcrumb plugin that might display the path of the visitor and let them go back to any step.

Let us know if you have any further questions.

best regards,
J. Davis

[Tilman]

Hi John,

thank you for your response and advice.

1) I’d be grateful if you could share a few related tweaks having a starting point to play around. For instance, I would have the following in mind for the booking confirmation page…top to down (based on multiple reservation at once use case):

a) Booking Details Section: Should appear as separate section, means a spacing in between to following accommodation summary section rather horizontal line (same as for spacing between pricing and info form further below).

b) Booking Details Section: Existing check-in & check-out info should appear in horizontal order (aligned to current form/page width), not underneath.

c) Booking Details Section: The number of pre-selected total nights and number of pre-selected total rooms from previous steps should appear as info under (new) check-in/out info row (as per a) above) properly aligned to each other.

d) Accommodation & Service Section: As reminder while adding the guest infos, it might be helpful to display the max. occupancy/adults/guests per pre-selected accommodation, i.e. right behind “Guests” (dropdown) in brackets. I’m aware the max. number will be visible once you open the dropdown but it might be not fully transparent/clear to everyone straight away.

d) Accommodation & Service Section: The box where you could define i.e. per instance is way to large and causes misalignments i.e. for following row. Further, the border looks a bit odd and misaligned depending on length of service description and price set. Here you can see what I mean ().

Based on this sample, I’d put i.e in table (4 columns: description, price, instance, x times selection OR at least 2 columns: left much larger for service description / price / instance and right one for the selection option) and remove the borders. Option to tweak the right size of such columns might be useful.

e) Accommodation & Service Section: For each accommodation / service should appear as separate section, means a spacing in between to following section rather horizontal line (same as for spacing between pricing and info form further below).

f) Price Breakdown Section: Seems like there is a table (2 columns); I’d like to enlarge size of the left one (descriptions/details) and reduce size of right one (prices). There is plenty of blank space for the price info. I’m aware they are all aligned considering sections above and below. However, those other ones could probably be adjusted too, just in case.

g) Price Breakdown Section: Can be kept on that one form but would be useful to have a wider spacing between each of the accommodation/service summary tables and esp. for the total row at the bottom. In addition, adjusting the font size for the main category rows oppose to the breakdown rows (accommodation #1, accommodation #2 and Total) would be an option too.

2) noted, will have a look at. However, my up-vote for this kind of feature.

Would be great to get a few advices accordingly.

Thank you & Kind regards
Tilman

[Tilman]

Hi John, apologies – here the screenshot as mentioned under d) of my previous related post https://prnt.sc/sy2u4x

[J. Davis]

Hi Tilman,

Thanks for your question. You need to have advanced knowledge and experience working with CSS to apply the changes you described. There is no tool that would let you switch the layout of the checkout page or edit it visually.

best regards,
J. Davis

[Matthias Kiesinger]

Hi J. Davis,

and where would I find the files to modify [mphb_booking_confirmation]?

Thanks!

[Andre Flores]

Hi, Matthias!

In order to edit [mphb_booking_confirmation] shortcode you will need to overwrite default plugin files in your active theme. Navigate to /wp-content/plugins/motopress-hotel-booking/templates/shortcodes/ and copy the “booking-confirmation” folder to /wp-content/themes/your-active-theme/hotel-booking/shortcodes/ directory. Feel free to edit files in “booking-confirmation” folder per your desire.

Regards,
Andre

[Karen Haines-Lea]

Is it possible to hide the lines “Dates” down to “Dates Subtitle” on the Booking Confirmation?

We only sell by 3 nights and 7 nights so don’t need to show by days information.

Thanks

[Andre Flores]

Hello Karen,

You may add the following code under Appearance ->Customize ->Additional CSS:

.mphb-price-breakdown-dates, .mphb-price-breakdown-date, .mphb-price-breakdown-dates-subtotal {
	display: none;
}

Regards,
Andre

[Leonardo Villella]

hi,
for what you ask Full Guest name if after you again ask all information of guest ?
is it possible to disable field full Full Guest name?
regerds

[Author]

Posts