Free and Premium WordPress Plugins & Themes Forums WordPress Plugins Hotel Booking style the booking confirmation page
- This topic has 17 replies, 9 voices, and was last updated 1 month, 1 week ago by
J. Davis.
- AuthorPosts
- March 20, 2020 at 5:06 pm #932909
Ciaran Connolly
ParticipantHow do you style the booking confirmation page?
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 🙂March 26, 2020 at 10:17 am #934758Kok Wai Lai
ParticipantSupport 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 SubtotalThats 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 !!
March 30, 2020 at 2:46 pm #936391J. Davis
KeymasterHi 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. DavisMarch 30, 2020 at 3:00 pm #936408J. Davis
KeymasterHi 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. DavisMarch 30, 2020 at 11:20 pm #936536Kok Wai Lai
ParticipantHello John,
Thx for the note. Appreciate it.
Cheers,
Lai
June 8, 2020 at 7:04 pm #964218Tilman
ParticipantHi,
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
TilmanJune 11, 2020 at 7:08 am #965376J. Davis
KeymasterHi 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. DavisJune 11, 2020 at 6:24 pm #965705Tilman
ParticipantHi 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
TilmanJune 11, 2020 at 6:28 pm #965715Tilman
ParticipantHi John, apologies – here the screenshot as mentioned under d) of my previous related post https://prnt.sc/sy2u4x
June 15, 2020 at 6:25 am #966815J. Davis
KeymasterHi 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. DavisJune 29, 2020 at 8:55 pm #973103Matthias Kiesinger
ParticipantHi J. Davis,
and where would I find the files to modify [mphb_booking_confirmation]?
Thanks!
July 1, 2020 at 6:35 am #973653Andre Flores
ModeratorHi, 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,
AndreNovember 18, 2020 at 10:23 pm #1032034Karen Haines-Lea
ParticipantIs 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
November 19, 2020 at 9:19 am #1032220Andre Flores
ModeratorHello 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,
AndreJanuary 22, 2023 at 1:16 pm #1404623Leonardo Villella
Participanthi,
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 - AuthorPosts
- You must be logged in to reply to this topic.