Support

Home Forums Event Espresso Premium Customizing Event Pages

Customizing Event Pages

Posted: October 1, 2015 at 11:28 pm


Petr Tichy

October 1, 2015 at 11:28 pm

I am having trouble trying to customize single event pages. I would like to change the “add to event cart” button to say Register. I would also like to be able to move the ticket selection and the button towards the bottom of the event with the details above. Does this all need to be custom coded? I have provided the link below. Any advice would be greatly appreciated. Thank you in advance!

http://wp.4dhockey.com/events/christmas-camp-mi/


Lorenzo Orlando Caum

  • Support Staff

October 2, 2015 at 12:56 pm

Hi there Petr,

We are working on a drag and drop solution that will let you rearrange the the event elements. This option will be available in the WP dashboard and require no coding.

On the button text, it can be changed but that is expected. Here is what happens:

If you are using Event Espresso 4, then it says Register Now.

If you are using Event Espresso 4 with the Multiple Event Registration add-on then it says Add to Event Cart.

This is because events are queued to the shopping cart so you can complete registration checkout once. If you would still like to change the text, then please try this sample code in your child theme’s functions.php file or a site specific plugin:

https://gist.github.com/lorenzocaum/a81b68810c46c137f349


Lorenzo


Petr Tichy

October 2, 2015 at 1:23 pm

Thank you for the support Lorenzo! I was able to change the button text after doing some more digging. The only other issues I am having trouble with is that I would like to remove the “details” portion on the event display page and be able to move the register button to the bottom. I was testing this with a site specific plugin and had some success but am still trying to arrange this to my liking.


Lorenzo Orlando Caum

  • Support Staff

October 2, 2015 at 1:30 pm

Hi Petr,

We can help you with those changes but you’ll need to use an SFTP / FTP client such as cyberduck or filezilla to reposition the content.

Have you used either of those before?


Lorenzo


Petr Tichy

October 6, 2015 at 7:59 pm

Lorenzo,

Yes, I use cyberduck. I am also trying to remove the ical icon as well.


Lorenzo Orlando Caum

  • Support Staff

October 7, 2015 at 8:40 am

Hi Petr,

Add the code snippet from this link to your child theme’s functions.php file or a site specific plugin:

https://eventespresso.com/wiki/useful-php-code-snippets/#disable-ical

That will remove the ical button.

For the details area, are you referring to the event description or the details link in the ticket selector?

If you are referring to the ticket selector, then go to WP-admin –> Events –> Templates. Scroll towards the end of the page and then turn off the options for the ticket selector and then save changes.


Lorenzo


Petr Tichy

October 8, 2015 at 10:40 am

Hello Lorenzo,

I Would like to move the camp fee, price, qty and the Register button below the Event date and description.

http://wp.4dhockey.com/events/thanksgiving-camp-mi/


Petr Tichy

October 8, 2015 at 10:41 am

Hello Lorenzo,

I Would like to move the camp fee, price, qty and the Register button below the Event date and description.

Also, I am having trouble finding out where I can style the text that appears in the “Upcoming Events” widget. I would like to make the title of the event slightly larger and a different color to distinguish it from the date of the event.

http://wp.4dhockey.com/events/thanksgiving-camp-mi/


Lorenzo Orlando Caum

  • Support Staff

October 8, 2015 at 11:20 am

Hi Petr,

You can add the sample code here into your child theme’s functions.php file or a site specific plugin:

https://gist.github.com/lorenzocaum/a33405557a2a065779ea

Note that we are working on a drag and drop option that will allow changing of the order without any coding.

The other styling changes that you asked about could be done with CSS. You could use a free tool like Chrome developer tools, Safari developer tools, or Firebug to see the CSS that is in use:

https://www.youtube.com/watch?v=Yhtr53eTHNQ

Here is the CSS for the heading:

h5.ee-upcoming-events-widget-title-h5 a

So you could use something like this to increase the size and change the color to green:

h5.ee-upcoming-events-widget-title-h5 a {font-size:20px; color:green;}


Lorenzo


Petr Tichy

October 9, 2015 at 3:45 pm

The sample code only moved the event description to the top.

I would like the order to go as follows:

-Event Name & Date/Time
-Location
-Event Description
-Google Map (which I am having trouble getting displayed. I do have it turned on in the general settings)
-Ticket Prices and Register button.

Thank you for the CSS help as well.


Lorenzo Orlando Caum

  • Support Staff

October 12, 2015 at 8:24 am

Hi Petr, that can be done with some customizations to the template files.

Please take a look at this page to see how the templates work together:

https://gist.github.com/lorenzocaum/0a35fe4997992fdb1dc5

Next, remove the filter that I shared in my prior reply.

Go ahead and create a child theme from your current theme:

https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

Next, follow these steps:

https://gist.github.com/lorenzocaum/a33405557a2a065779ea#gistcomment-1379311

Note: if you are not comfortable with the coding changes above, then I recommend holding off for our drag and drop option for repositioning the event elements.


Lorenzo


Lorenzo Orlando Caum

  • Support Staff

November 18, 2015 at 8:40 am

Hello again Petr,

As of Event Espresso 4.8.21, there is a custom display re-order option available in the WordPress dashboard.

Backup your WordPress and update your software

https://eventespresso.com/wiki/how-to-back-up-your-site/

You can see the change log for Event Espresso 4 here:

https://eventespresso.com/wiki/ee4-changelog/

Remove existing filters for adjusting the order

If you have used some of the suggested filters to adjust the order of your event elements, then you’ll want to first remove those from your website and they may have been added to your child theme’s functions.php file or a site specific plugin.

Set a custom order through the Templates screen

Afterwards, go to your WP dashboard (WP-admin) –> Event Espresso –> Events –> Templates. The Use Custom Display Order options in the Templates screen can be used to reorder the events elements on the single event page as well as the events listing page.

Again, be sure that any of the filters for adjusting the order have been removed from your site specific plugin or your child theme’s functions.php file before turning on the template reorder option. Otherwise, you may see duplicate content.

Thanks


Lorenzo

The support post ‘Customizing Event Pages’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso