|
rpicker
|
July 27, 2024 at 2:38 pm
After the last big update to EE the checkout/cart experienced changed and the qty is tucked out of view on mobile devices unless you slide to the right of the price.
I’m loosing $ because people get an error message. They think the class if full or get frustrated and give up.
What can I do to resolve this?
I can send you screenshots or you can see for yourself here on any phone: https://studiosprout.com/events/makers-workshop-8-2-930
|
|
rpicker
|
July 27, 2024 at 4:35 pm
Looking at this closer what’s happening is the column width for “Details” is pushing the “Qty” off the screen and keeping it hidden if you are looking at a phone vertically. If you turn the screen horizontal it shows up. All the info that shows in the “Add to cart” stage of registration is forced into a box and not responsive to mobile screen size.
Even if you leave the “Details” of the event empty it still doesn’t show.
The qty also defaults to 0 so when a customer adds to cart an error message comes up. If it could default to 1 then the customer could at least adjust ticket qty in the cart.
Please please please fix this bug or tell me how to hack it. I’m loosing business over this.
|
|
Sam
|
July 29, 2024 at 1:12 am
Hi Rebecca,
I’ve checked the website on the mobile device and can see something like this with no issue:
https://tinyurl.com/27ca7gmq
Can you please let me know which mobile you are testing on so that if possible I can check the same to reproduce the issue?
|
|
Rio
|
July 29, 2024 at 1:13 am
You can use CSS to modify those things.
Go to your WP dashboard -> Appearance -> Customize -> Additional CSS then paste this code.
@media only screen and (max-width: 600px) {
#content-area table td.tckt-slctr-tbl-td-price.jst-rght {
padding: 0;
margin: 0;
font-size: 18px;
}
}
The qty also defaults to 0 so when a customer adds to cart an error message comes up. If it could default to 1 then the customer could at least adjust ticket qty in the cart.
This is not a bug, but if you want to change the default to one, then you can mark the ticket as required https://monosnap.com/file/ytYdvacRwO9KGIp7cJXmxBSRbmQLPr
The other option is through a custom code. Check this article here.
https://eventespresso.com/wiki/setup-default-value-1-ticket-selector/
Remember to create a custom plugin for that.
https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/
thanks
|
|
rpicker
|
July 29, 2024 at 7:27 am
Rio thank you for all this info. I will give it a try.
Sam, I deleted all the “details” in that event ticket to see how much I could shrink that column. On my iphone 14 Pro (not pro Max) I still cannot see the qty even with nothing in the details column.
I’m curious. Is there a reason why this is programmed in a table? It seems like the right thing to do is for mobile to have each item move down to it’s own row.
|
|
Sam
|
July 29, 2024 at 8:36 am
Hi Rebecca,
Okay, I can see the issue now.
You can try this CSS to adjust the size to see that in the mobile device:
@media screen and (max-width: 767px)
.tkt-slctr-tbl th {
font-size: 17px;
}
td.tckt-slctr-tbl-td-price.jst-rght {
font-size: 15px;
}}
Hope that helps.
|
|
rpicker
|
July 29, 2024 at 2:30 pm
I’d put in the custom css.
I’m on my iphone 14 pro the Qty was still pushed over to the right and cut off when I have a text in the details field that are longer then 6 characters. When I remove all the text from the details then the qty shows up next to add to cart.
So this has be wondering if there is css that I can add to remove that entire Details column. Header and all.
That might also help the next set of info (Event Title, start and end date, time and location) that gets displayed to align all the left edge of the table. Currently it looks to be wedged in some column in the middle.
|
|
Rio
|
July 29, 2024 at 5:55 pm
If you want to hide the Detail Column in mobile, you can target the element
https://monosnap.com/file/jfalC167MYjPhSzaDtoQmcOkNDciKs
@media only screen and (max-width: 600px) {
.tckt-slctr-tbl-tr td.tckt-slctr-tbl-td-name {
display: none;
}
}
Be sure that media queries is included so it will only work on the mobile.
That might also help the next set of info (Event Title, start and end date, time and location) that gets displayed to align all the left edge of the table. Currently it looks to be wedged in some column in the middle.
the default should be look fine, but because WP is open source and you can use any theme you like and each theme can affect the styling in the table. the EE is set to be customize by CSS.
Thanks
|
