- This topic has 5 replies, 2 voices, and was last updated 1 year, 9 months ago by
.
-
Posts
-
Greetings:
travel base pro is producing problems on the checkout page of the wp travel plugin. this theme and plugin are sold as compatible by both the theme creators (your team) and the plugin authors, so I definitely want to have this addressed ASAP.
the wp travel plugin authors reviewed the issue and instructed me to reach out to your support team, sharing the theme is causing the issue.problem: on the checkout page on mobile devices, the customer input area and the trip confirmation are side by side. this is wider than the viewport width of a mobile device so the page breaks.
the theme has not received an update in an extended period of time discouraging license renewal.
please advise.
Hello @SANOOKTIEW, Please add this CSS in the Additional CSS
.page .order-wrapper {
padding: 10px;
}
.page .order-wrapper table {
display: inline-table;
}
@media (max-width: 991px) {
.page .checkout-page-wrap {
grid-template-columns: 100% !important;
}
}Go to Customizer >> Appearance >> Additional Css, paste the above CSS there, and published the site.
Regards,
ThemepalaceAppreciate this fix, which I employed when you shared it. I discovered though that this places the checkout review box below the checkout process itself, which is an illogical ordering. Meaning, a customer would only encounter this checkout review area if they scrolled past the checkout input and submit fields.
Please advise.
Kind regards,
SakunaHi Support:
Appreciate the follow up. Checkout review box typically displays before the final checkout process. Your solution above fixed the broken layout; thank you for this. Only issue is that it places the checkout review box below the submit button at the bottom of the checkout page rather than at the top of the page.
Can we set this to display before the final checkout phase?
Kind regards,
SakunaHello, Sakuna
Please add this CSS
.checkout-page-wrap > div {
grid-area: 2/1;
}
.checkout-page-wrap .wp-travel-checkout-section {
grid-area: 3/1;
}
@media screen (min-width:1024px) {
.checkout-page-wrap > div {
grid-area: unset;
}
.checkout-page-wrap .wp-travel-checkout-section {
grid-area: unset;
}
}
- You must be logged in to reply to this topic.
