Positioning the event info and WooCommerce Tickets boxes in our layout?

[getreadingright]

Hello. We broadcast several educational webinars per school year and have event listing pages that have quite a bit of info on them about the webinar and the presenter(s).

With the default layout for Events Calendar and WooCommerce Tickets, the event details and the WooCommerce Tickets boxes are way down at the bottom of the page where people won’t necessarily see them.

Ideally we’d like to position them further up the page, but not just at the top above everything else either. We’d like them in the body of the page, below the header, but above the presenter info.

We’re using Bootstrap and so would like to have a row, and two columns to separate the content and these boxes, and have it be responsive. I’ve drawn a little diagram to illustrate this concept… http://www.resdivina.com/img/event-calendar-demo.png

Can you please explain how we can do this, if possible?

Thanks.

[Rob]

Hi, getreadingright! Thanks for the note here, as well as your patience so far – pretty much the whole support team is out today and so threads are taking longer than normal to get addressed. I just wanted to let you know that we’ve received this and I’ve got it as a top priority ticket for one of our more dev-savvy support folks when everyone is back on Monday.

My sincere apologies for the delay and inconvenience in the interim. Please let us know if you need anything else between now and then.

[getreadingright]

Thanks Rob. Look forward to seeing what they have to say 🙂

[getreadingright]

Is anyone able to point me in the right direction?

[Barry]

Certainly – does this guide help (with moving the ticket form itself)? To achieve the exact layout you suggested would require a little more work than this alone, but if you can get it as close as possible to where you want it you can probably achieve the rest with some CSS work. The following resources may also be useful:

• Themer’s Guide
• Tutorials
• Technical Docs

I hope that helps 🙂

[getreadingright]

Yes, that guide does show how to move the ticket form. How about the event details box too? How can the loop be split up into multiple rows and columns? Is this even possible?

It would be really nice to see some more examples on how to get the ticket box positioned and displaying differently. Better yet would be a variety of layout options to choose from built in. I can’t imagine we’re the only ones that don’t want to position the details and ticket boxes at the very bottom of the event listing, nor do we want these huge wide boxes taking up the entire page width to the fold at the top of the event listing.

[Barry]

Hi!

Please do ensure you’ve read through the Themer’s Guide in the first instance as this covers the process for making template overrides.

How about the event details box too?

If you override the single-event.php template you should see the following section of code which you can reposition within the template:

<!-- Event meta -->
<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
	<?php echo tribe_events_single_event_meta() ?>
<?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>

How can the loop be split up into multiple rows and columns? Is this even possible?

Since you’re interested in customizing a single event I’m not sure which loop exactly you are referring to (technically there is indeed a loop, but it contains only one item) but you certainly have complete freedom to customize things however you would like.

I do appreciate the desire for further examples and to customize things – however, it’s impossible to cater for everyone and between this thread and the Themer’s Guide you should get a good sense as to how you can re-arrange the single event page layout. Add a little CSS and you should be able to reduce the width of the elements you are targeting and float them to the right, too 🙂

Since we can’t go into too much more detail for this specific case I’ll go ahead and close this thread, but of course if anything else crops up that you need help with please don’t hesitate to open a new thread (or threads).

Thanks!

[Author]

Posts