We are using Amelia to sell (virtual) tickets to classes on our website and want to limit the number of tickets a person can buy for an event to 1 for each order. We have connected it to WooCommerce.
I know I can hide the location and capacity number using this html code on the page which displays the Amelia Events:
But I was wondering if there is a similar type of code which can hide the option to book an event for more than 1 person so that each time it would automatically be only for 1 person?
Unfortunately there isn't a builtin feature that would allow you to do this but it can be done using some custom CSS.
I can explain how to find and copy the selectors you need to use to hide something.
Right-click on the part you wish to hide and inspect the element:
Then, when you hover over the code, that section will be highlighted in the modal. Right-click on the code that highlights the entire div, and go to copy/copy selector:
Paste that selector, and add "display: none !important;", like this for example if you want to hide something
#tab-extras {
display: none !important;
}
So, now Extras field is hidden:
Certain selectors can't be combined, so if it doesn't work when you separate them with a coma, simply add another selector below }
If this doesn't help either, we can recommend these services for customization
Many thanks for your detailed reply. Using your instructions I managed to find the item with Inspector as seen in the attached screenshot. When I copied it the following selector was copied:
When I added display none in order to hide it, the selector field to choose the number of people was hidden, but the label 'Number of persons' was still shown. And even worse, it was for this specific event (number 25) only.
Is there a way to hide this section (including the label) for all events in general?
We are using Amelia to sell (virtual) tickets to classes on our website and want to limit the number of tickets a person can buy for an event to 1 for each order. We have connected it to WooCommerce.
I know I can hide the location and capacity number using this html code on the page which displays the Amelia Events:
<style> div.am-event-data > div.am-event-info > div:nth-child(2) > div:nth-child(1) {display: none !important;} </style>But I was wondering if there is a similar type of code which can hide the option to book an event for more than 1 person so that each time it would automatically be only for 1 person?
Hi Marc
Thank you for reaching out to us.
Unfortunately there isn't a builtin feature that would allow you to do this but it can be done using some custom CSS.
I can explain how to find and copy the selectors you need to use to hide something.
Right-click on the part you wish to hide and inspect the element:
Then, when you hover over the code, that section will be highlighted in the modal. Right-click on the code that highlights the entire div, and go to copy/copy selector:
Paste that selector, and add "display: none !important;", like this for example if you want to hide something
#tab-extras { display: none !important; }So, now Extras field is hidden:
Certain selectors can't be combined, so if it doesn't work when you separate them with a coma, simply add another selector below }
If this doesn't help either, we can recommend these services for customization
https://codeable.io/?ref=l1TW1
https://wpkraken.io/?tms-plugins
Hi Blaženka,
Many thanks for your detailed reply. Using your instructions I managed to find the item with Inspector as seen in the attached screenshot. When I copied it the following selector was copied:
#am-event-25 > div:nth-child(2) > div.am-event-book-cta.open > div:nth-child(2) > form > div:nth-child(1)
When I added display none in order to hide it, the selector field to choose the number of people was hidden, but the label 'Number of persons' was still shown. And even worse, it was for this specific event (number 25) only.
Is there a way to hide this section (including the label) for all events in general?
You can see the list of events here: https://agileleadershipschool.nl/trainings-workshops/
Hi Marc.
Sorry for the late response.
If you only want to hide the number of persons - you don't need custom CSS, but to edit the event:
When you disable those two check-boxes, they won't appear on the front-end:
Let me know if this helps.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Oh my Aleksander, you just made my day and I can’t even imagine how I missed something so obviously simple.
This is perfect, thank you so much !
You're welcome, Marc, glad I could help!
If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables