Event Page Tickets Styling

[Christian]

Hi there

I’m using Event Tickets Plus with Events Calendar Pro. Avada Theme.

On my Event Page the Tickets section is a bit wonky in layout. Here is a ticketed event:

http://theweblounge.org/event/global-woman-summit-a-new-paradigm-for-changing-the-world/

I wonder if you have a quick CSS fix to make the Event Title, Ticket No & Event Description look a little more tidy?

Many thanks indeed.

Christian

[Geoff B.]

Good morning Christian and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

I see what you mean. Here a couple of CSS rules that I believe would help:

.tribe-events-single-event-title {font-size: 22px !important;}
table.tribe-events-tickets td {
display: inline-block;
}

Let me know how that goes.

Best regards,
Geoff B.

[Christian]

Hi Geoff

Thanks for coming back to me so quickly.

Unfortunately, those rules don’t seem to alter the ticketing sidebar. It still looks the same as the screenshot.

Might you have any other options?

Thanks

Christian

[Geoff B.]

Good afternoon Christian,

Perhaps there was a caching issue on your website ?

The reason I am saying this is because I just went on your site and the tickets are displaying very well on Chrome, Firefox and Safari.

Could you tell me if that’s the case on your end too or perhaps what browser you are using ?

Best regards,

Geoff B.

[Christian]

Hi Geoff

Thanks for the reply. I removed the . from .table.tribe-events-tickets td { and the CSS worked.

I’m wondering about a couple of other issues because of course event ticket products are slightly different from normal WooCommerce products and it would be great to get some direct advice.

1. Single Event Page

– Is it possible to change the location of the Ticket/Add to Cart section from the bottom of the sidebar to e.g. the top above Details/Venue etc?

– Is there an option to place the Add to Cart section under the event image on this page?

– Would it be tricky to style the TICKETS header in the same way as DETAILS and VENUE?

2. Event List View

In Event List view there is a Find out More link and a corner spot for the event price.

– Is it possible to add an Add to Cart button in List View, or

– Is it easy to change the ‘Find our more’ link text to ‘Find out more and Book Event’?

3. Calendar buttons

Can you please give me the CSS to target the Google Calendar and iCal Export buttons in standard and hover state? I’d like style them like the e-commerce buttons.

—

Sorry for all the questions but I’m trying to make sure I’ve covered all the options in the event ticket purchasing journey and checking I haven’t missed any display options.

Thanks very much in advance

Christian
Weblounge

[Geoff B.]

Good evening Christian,

You are sooo right about correcting the CSS, my bad (I just updated it myself for future readers benefit).

I’ll gladly answer your other questions:

1. Single Event Page
– Is it possible to change the location of the Ticket/Add to Cart section from the bottom of the sidebar to e.g. the top above Details/Venue etc?
– Is there an option to place the Add to Cart section under the event image on this page?

Yes, you can absolutely do that with the following snippet (make sure to uncomment the line you are interested in): https://theeventscalendar.com/knowledgebase/moving-the-ticket-form/

However, provided that you are already using a custom (non-standard) template, it might require tweaking to work.

– Would it be tricky to style the TICKETS header in the same way as DETAILS and VENUE?

No, not at all. Simply add the following CSS to your WordPress theme

.tribe-events-style-full.tribe-events-style-theme h2.tribe-events-tickets-title {
background-color: #363839;
padding: 9px 15px;
color:#fff !important;
font-size: 16px !important;
font-family: Proxima-300 !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: 0px !important;
}

2. Event List View
In Event List view there is a Find out More link and a corner spot for the event price.
– Is it possible to add an Add to Cart button in List View, or

Yes, you could do that, but that’s a template customization.

Just to set expectations, as you might know, the scope of our support is mostly to get our customers started on the right track and to help them in case of issues. We unfortunately do not provide complete support for customization.

That being said, you could read our Themer’s guide to get a sense of how that works OR you could contact your theme’s author OR hire one of our recommended customizers to do the customization for you.

– Is it easy to change the ‘Find our more’ link text to ‘Find out more and Book Event’?

Yes, you could change that using the following snippet: https://theeventscalendar.com/knowledgebase/change-the-wording-of-any-bit-of-text-or-string/

3. Calendar buttons

Can you please give me the CSS to target the Google Calendar and iCal Export buttons in standard and hover state? I’d like style them like the e-commerce buttons.

Sure thing. Look for the following elements:

• .single-tribe_events .tribe-events-cal-links
• #tribe-events .tribe-events-button
• .single-tribe_events a.tribe-events-gcal
• .tribe-events-gcal
• .single-tribe_events a.tribe-events-ical
• a.tribe-events-ical

Let me know if that helps.

Have a great day!

Geoff B.

[Christian]

Many thanks Geoff!

[Geoff B.]

Hey Christian,

I am stoked that my answers were helpful to you!

You are welcome back on our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts