[Sakuna]

Hey @support:

Theme: Travel Base Pro 1.0.6
WP Travel: 3.0.9
WP Travel Utilities: 1.3.3

PAX Selector UI + UX

The PAX Selector implemented in v3.0 and above has some layout issues, particularly for media queries above 1024px.

1. Number of permitted trip attendees, which appears in parentheses is on seperate lines.

2. Display of pricing within the PAX Selector particularly when a sale price is indicated. The UI on media above 1024px renders a pricing layout that is very confusing for UX. For the user, why there are multiple prices shown is not clear. In pre-v3.0 of the plugin, the distinction between regular price and sale price was straightforward and therefore intuitive.

How do we address this? Please see the following image for Points 1 and 2.
https://drive.google.com/file/d/1mme146ElXsr_nZd-I-UWuQaKM0qx_sjr/view?usp=sharing

3. The CSS .paxpicker.is-active .pricing-categories {position: absolute;} nests the active PAX Selector behind the similar trips, which are displayed below at the end of the page above the footer.

Also, the active PAX selector on mobile devices covers the cart button, which leads to UX problems because the PAX Selector must be manually closed by the user. Consequently, if the user does not close the PAX selector on mobile, then s/he cannot see the cart button.

To fix this, I have changed the above CSS position from absolute to unset, but your team may want to revisit this problem to consider if there is a more user-friendly/intuitive approach. 😉

Translating PAX Selector
I use Loco translate for this site, but cannot identify the strings for PAX selector, so the terms therein remain in English.

Can you advise?

As always, thanks so much in advance!

[Support Team]

Hello @infosanooktiew-com,

Please find the answers regarding your queries pointwise below:

Query1:

Response: Actually when we inspected the site in our side we found the issue so we will fix the issue soon and will release the update.

For now, to resolve your issue above 1024 screen size, please add following given CSS code in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS.

@media screen and (min-width: 1024px){
 .category .pax-select-container{
   width: 87px;
 }
}

Query2:

Response: Actually, it seems that the issue has raised because you might have added additional CSS as the regular price and sale price appears in different way which is not confusing as you can see in screenshot below:
screenshot: http://prntscr.com/pzyqcc

Query 3:

Response: We will make the string translation ready in the coming updates of the plugin.

If you have any issues further then kindly let us know.

Thank you.

[Jacob]

Hello,

I have problem when I set a sale price it’s not displaying correctly

https://prnt.sc/q1nlmo
https://www.mascamino.es/itinerary/the-way-from-sarria-to-santiago-115-km/
I have disabled all plugins and tried and the result is always the same…

I send you also copy of the custom CSS I have on the site.

#wcj_product_input_fields_local_1.wcj_product_input_fields {
width: 300px;
height: 100px;
}

#wcj_product_input_fields_local_2.wcj_product_input_fields {
width: 300px;
height: 100px;
}

#main-header {
margin-bottom: 5px;
}

table.blueTable {
border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
height: 200px;
text-align: left;
border-collapse: collapse;
}

table.blueTable td,
table.blueTable th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}

table.blueTable tbody td {
font-size: 13px;
}

table.blueTable tr:nth-child(even) {
background: #D0E4F5;
}

table.blueTable thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}

table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}

table.blueTable thead th:first-child {
border-left: none;
}

table.blueTable tfoot {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}

table.blueTable tfoot td {
font-size: 14px;
}

table.blueTable tfoot .links {
text-align: right;
}

table.blueTable tfoot .links a {
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}

/* Wp travel plugin customization */

.taxonomy-description {
visibility: hidden;
}

.single-itineraries .wp-travel-trip-meta-info li:nth-of-type(3) {
display: none;
}

.datepicker–cell.-disabled- {
visibility: hidden !important;
}

.entry-meta .travel-info {
visibility: hidden;
}

.entry-meta .travel-info span {
visibility: hidden;
}

/* Hide reviews */

.home .wp-travel-average-review {
display: none;
}

.home span.rating-count {
display: none;
}

.home span.trip-category {
display: none;
}

.wp-travel-trip-meta-info ul li:nth-of-type(4),
.wp-travel-trip-meta-info ul li:nth-of-type(1) {
display: none;
}

.trip-price {
display: none;
}

.wp-travel-default-article .wp-travel-explore a {
position: relative;
top: 45px;
font-size: 17px;
}

/* END Wp travel plugin customization */

/* Search and filter */

.searchandfilter[data-sf-form-id=”9509″] > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

.searchandfilter[data-sf-form-id=”9496″] > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

.et_pb_with_border.et_pb_wc_reviews #reviews #comments ol.commentlist li img.avatar

.search-filter-reset {
text-align: center;
margin: 0px;
margin-top: 20px;
top: 21px;
}
.wp-travel-toolbar.clearfix {
display: none;
}

.searchandfilter ul {
margin-bottom: 9px;
}
/* END Search and filter */

Looking forward for your reply,

Many thanks

Jacob

[Support Team]

Hello @ventascosmomundi-com,

The issue has raised due to the incompatibility of the theme that you are using with the plugin. But as a fix you can use below given CSS bu going to Admin Panel > Appearance > Customize > Additional CSS.

del span {
    text-decoration: line-through;
}

Hope this helps.

Thank you.

[Sakuna]

@support:

Thank you for the follow up. I incorporated the CSS provided and it solved the parentheses issue.

Also, even though I am using the Travel Base Pro theme, I too needed to include the del span CSS snippet you provided to @@ventascosmomundi-com

Thanks again for the solutions.

[wensolutions]

Hello,

Glad that we could help you.

If you have any queries further, let us know.

Thank you.

[Author]

Posts