Require input before adding to cart

[ksministries]

Hello we are using Events Tickets Plus with Events Calendar and we have an event where we are offering 3 different types of tickets. Each ticket input field is currently set to zero per the instructions below which is fine especially when offering multiple ticket types. The problem however is that the customer is able to select the Add to Cart button and because the input fields are all at zero nothing is added to the cart when picked on. I realize this is better than if all tickets were set to 1 because then the customer would end up with all 3 tickets in their cart. Is there no way to make it a required action that if they try to add to the cart without first making there selection it will ask them to please make a selection first?

https://theeventscalendar.com/knowledgebase/handling-ticket-quantities/

[Andras]

Hi ksministries,

Thanks for reaching out!

Using a javascript / jQuery approach would be best probably.

A colleague whipped up this snippet some time ago which is supposed to do what you need.

Please give it a try and let me know how it works out.

https://gist.github.com/elimn/30c533fad7ee5ce4c3cb8a0f727c7190

Cheers,
Andras

[ksministries]

Where do I place this in our function.php?

[Andras]

Hi,

Sorry, yes, in your theme’s (preferably child theme’s) functions.php file.

Andras

[ksministries]

Hello this did work for the need we had but would there be a way to remove the red outline that is created around the add to cart button? I looked in the supplied code but did not see any reference to color there? Thx

[Andras]

Hello,

Happy to hear that worked.

I checked this page of yours, but didn’t see any red outline. Can you share a URL where the issue is visible?

Thanks!
Andras

[ksministries]

Sorry about that because of the red outline we ended up not using the code thou I did just re-add it long enough to take a screenshot for you. Thank you again for your continued support.

[Andras]

Not quite sure what that is happening. If you can leave it on the live site a bit I can take a look at it tomorrow (or later today) and let you know how to fix that with css.

Or if you have a staging / test site that’s even better.

A.

[Andras]

You can try this:

.single-tribe_events .add-to-cart .tribe-button {
border: unset;
}

or like this:

.single-tribe_events .add-to-cart .tribe-button {
border: none;
}

If they wouldn’t do anything then an ‘!important’ might be necessary, like this:

.single-tribe_events .add-to-cart .tribe-button {
border: unset !important;
}

Let me know if that does the trick.

A.

[ksministries]

This reply is private.

[ksministries]

I sent you a private message with URL after trying the three examples of CSS please let me know if you did not receive it? Thanks again.

[Andras]

Thanks for the URL! I checked it and it’s actually not a border, but a box shadow. Sneaky little thing. 🙂

You should be able to get rid of it like this:

.single-tribe_events .add-to-cart .tribe-button {
box-shadow: none;
}

Hope this will fix it for good. Let me know.

Cheers,
Andras

[ksministries]

Thank you that did it.

[Andras]

Stoked to hear that helped!

Since this is marked resolved I am going to close this ticket, but if you need anything else related to this topic or another please create a new ticket and we’ll be happy to help.

Cheers,
Andras

PS: If you like our plugins, and you didn’t yet do so 🙂 we would be happy to receive a review in the wordpress.org repository. Thanks!
https://wordpress.org/support/view/plugin-reviews/the-events-calendar/
https://wordpress.org/support/view/plugin-reviews/event-tickets/

PS2: We’d be also grateful if you would give us feedback on your satisfaction with support. Just click on one of the classy looking emojis below. 🙂 If you can spare a few words, that’s even better. Doublethanks!

 

[Author]

Posts