Ticket Display on Event Pages
Ticket Display on Event Pages
When a visitor lands on an event page, they need to quickly understand what the event is, where it happens, and how to get tickets. Tickets Please injects a structured layout into the event page content via the the_content filter, arranging event details and ticket options in a logical order without requiring you to build the layout manually.
Page Layout Order
The full event page displays these sections from top to bottom:
- Breadcrumbs — navigation trail back to the events archive
- Series banner — shown only for recurring events, linking to the full series
- Event details — date, time, cost summary, website link, and status badge
- Venue details — venue name (linked to venue page), address, embedded map (if enabled), video embed
- Organizer details — organizer name(s) and contact information
- Ticket section — all available tickets with purchase or RSVP options
- Related events — up to 3 similar events based on category
- Footer navigation — links to previous and next events
The ticket section is the core of the page for most visitors. Everything above it sets context; everything below it encourages further browsing.
Ticket Section Layout
The ticket section displays each ticket type linked to the event. The presentation depends on the ticket type and its current state.
Paid Tickets
Each paid ticket shows:
- Ticket name
- Description (if the Show Description toggle is enabled)
- Price — with sale price styling when a sale is active (original price struck through, sale price highlighted)
- Remaining capacity (e.g., “42 remaining”) unless capacity is unlimited
- Add to Cart button
Clicking Add to Cart sends an AJAX request via add-to-cart.js that adds the ticket to the visitor’s WooCommerce cart. The button updates to confirm the addition without a full page reload.
RSVP Tickets
Each RSVP ticket shows:
- Ticket name
- Description (if enabled)
- Remaining capacity (or no count for unlimited)
- Register button (a collapsible
<summary>element)
Clicking Register expands the inline RSVP form. The visitor fills in their name, email, and quantity, then submits. The form handles everything via AJAX — see RSVP System for the full submission flow.
Hidden Tickets
Hidden tickets do not appear on the event page under normal circumstances. When a visitor accesses the event page with a valid ?ticket_token= parameter, the hidden ticket appears in the ticket section alongside public tickets. It displays with the same layout as a public ticket of the same type (paid or RSVP).
See Hidden Tickets for details on access tokens and private URLs.
Sold-Out Tickets
When a ticket’s capacity is exhausted, the ticket still appears in the section but with changes:
- A Sold Out badge replaces the price or capacity indicator.
- The Add to Cart or Register button is disabled and grayed out.
- Visitors can see that the ticket exists but cannot interact with it.
Sale Window Messaging
Tickets respect their configured sale start and end dates. The display adapts based on the current time:
| State | Display |
|---|---|
| Before sale start | ”On sale: {start date}” message, no purchase button |
| During sale window | Normal ticket display with active button |
| After sale end | ”Sales ended” message, disabled button |
| No dates configured | Always available (as long as capacity allows) |
If a sale price is active during the sale window, the pricing shows both the original and discounted amounts.
Styling
Tickets Please injects frontend CSS via the get_frontend_css() static method. The styles are minimal and designed to work with most themes without conflicts. They cover:
- Ticket section container and card layout
- Price typography (regular, sale, strikethrough)
- Capacity badges and sold-out states
- RSVP form layout and button styles
- Responsive adjustments for smaller screens
If you need to customize the appearance, you can override the plugin’s CSS in your theme’s stylesheet. All elements use namespaced CSS classes that are stable across updates.
Related Events
Below the ticket section, Tickets Please displays up to 3 related events. Related events are pulled from the same category as the current event. Each related event shows its title, date, and featured image, linked to its event page.
The number of related events is configurable via the tickets_please_related_events_count filter (default: 3). To disable related events entirely, use the tickets_please_show_related_events filter and return false.
Customizing the Display
Several filters let you modify the event page output without editing templates:
| Filter | Description |
|---|---|
tickets_please_frontend_event_details | Modify the event details array before rendering |
tickets_please_show_related_events | Return false to hide related events |
tickets_please_related_events_count | Change the number of related events (default: 3) |
For deeper layout changes, override the template files in your theme’s tribe/events/v2/ directory. The plugin checks for theme overrides before using its own templates.
Common Questions
Can I move the ticket section above the event details?
The section order is controlled by the template. Copy the single-event template to your theme’s tribe/events/v2/ directory and rearrange the sections as needed.
Can I hide the venue or organizer sections? Yes. If no venue or organizer is attached to the event, those sections are omitted automatically. To hide them even when data exists, use the corresponding template override or CSS.
How do I change the “Add to Cart” button text?
Use the tickets_please_add_to_cart_label filter to return a custom string. For example, “Buy Tickets” or “Reserve Now.”
Can I show ticket prices without the purchase button? Override the ticket card template and remove the button markup. The price, description, and capacity information render independently of the button.
Why does the RSVP form not appear?
Check that the RSVP ticket is published, linked to the correct event, has a price of 0, and is within its sale date window (if dates are set). Also verify that the ticket’s visibility is set to public (or that you are using the correct access URL for hidden tickets).
Do the styles conflict with my theme? The plugin uses namespaced CSS classes to minimize conflicts. If you see layout issues, inspect the ticket section elements and add overriding styles in your theme. The plugin’s CSS uses low specificity intentionally so that theme styles take precedence.
Can I disable the inline CSS and use my own stylesheet?
Dequeue the plugin’s frontend styles using wp_dequeue_style() with the handle tickets-please-frontend and enqueue your own replacement.
How do I show tickets on a page that is not the event page?
Use the [tec_tickets_rsvp event_id="123"] shortcode for RSVP tickets. For paid tickets, the Event Tickets block can be placed on any page in the block editor.
Next Steps
- Ticket Types & Configuration — set up the tickets that populate this display
- Capacity Management — understand how availability states (available, low stock, sold out) are determined
- RSVP System — details on the inline RSVP form behavior