This guide will walk you through how to use an Add to Cart link or button instead of a registration form.
1 — Disable your registration form
Open or create your event. (If you need help creating your first event, refer to these documents: Setting up Event Espresso, Event Listings.)
On the right sidebar, set Display Registration Form to No. We want to use the Add to Cart link instead of the standard registration form, so we need to disable the registration form for this event. Attendees will still be required to fill out all the information, just later in the process.
2 — Add the shortcode
Fill out your event as you normally would. When you are done, add the following shortcode to the event description.
[ESPRESSO_CART_LINK]
In the example below, I am using the shortcode with some additional parameters. These parameters sets the link text to “Register for this Event” (default is “Add to Cart”), moves directly to the cart page after being clicked (default is to change the link text to a View Cart link, allowing users to add more events to the cart), and sets the text that displays while it’s redirecting to “Redirecting to cart…”.
[ESPRESSO_CART_LINK anchor="Register for this Event" direct_to_cart=1 moving_to_cart="Redirecting to cart..."]
Here is a screenshot of the shortcode above after it has been added to the event description area in the event editor:
Additional shortcodes for Event Espresso 3 can be found here:
https://eventespresso.com/wiki/shortcodes-template-variables/
Your event will now display the cart link instead of the registration form.
Customizing: Use a button instead of a text link
Now here’s a trick.
Using the above method, you can use an image or a button instead of text. Doing so requires some basic knowledge of HTML <img> tags.
Replace your ESPRESSO_CART_LINK with this:
[ESPRESSO_CART_LINK anchor='<img src="https://path.to.your/img.jpg" alt="Register for this Event" />' direct_to_cart=1 moving_to_cart="Redirecting to cart..."]
where 'http://path.to.your/img.jpg' is the direct URL for the image file you want to use. The result will be something like this:
If you are going to use this method, be sure you make the required changes in HTML view in the editor. The reason for this is that the single quotes ( ' ) in the <img> tag are very important, and if you do this in the visual editor, the editor will replace the single quotes ( ' ) with double quotes ( " ) and break the shortcode.
That’s it!