Checkout button next to / instead of Add to Cart?

[Debora]

Hi guys,

Thanks for all your help on our WooTickets issues. I tried to find answers for this next question in the Guide but haven’t tracked it down yet.

I want to swap or (preferably) create a CHECKOUT button next to ADD TO CART. I have a good amount web design experience but I’m not 100% sure where to accomplish this.

Thoughts? Or links to the right page in the Guide?

Thanks
Debora

[Nico]

Hi Debora,

Glad to hear our team could help you out on your previous issues, and thanks for searching for an answer for this one before posting!

I think the best way to achieve this customization is the perform a template override -the general process is described in our Themer’s guide. I’ll outline the steps for this customization here:

– Make a copy of the file ‘tickets.php’ located at ‘wp-content\plugins\wootickets\src\views\wootickets\’.
– Inside you theme folder create the following folders ‘tribe-events\wootickets\’.
– Drop the copied filed into the just created folder.
– At line 89 of the file you’ll find the ‘Add to cart’ button, you can replace it or add the ‘Checkout’ button as well.

Please let me know if you can get this working,
Best,
Nico

PS: Next time please post to the WooCommerce Tickets forum, instead of doing so in the Pre-Sale one. Thanks 🙂

[Debora]

Thank you Nico.

I located the file and found the line you are referring to. I tried it but no luck. Here’s the entire code for that button as I see it:

<button type=”submit” name=”wootickets_process” value=”1″ class=”button alt”><?php esc_html_e( ‘Add to cart’, ‘tribe-wootickets’ );?></button>

As it stands now, the button (I’m guessing) adds the tickets to the cart but the user is not directed to a checkout page at that point. It just remains on that event page. I can’t find any way of accessing a shopping cart or checkout page anywhere. It’s probably right in front of me but I don’t see it.

Whatever you can do to help is appreciated

Debora

[Nico]

Hi Debora,

Thanks for your follow-up!

I get you now, redirecting the user to the checkout after adding the product to the cart then that’s more on the WooCommerce side: please take a look at this stackoverflow question. And let me know if you can make it work with the suggestions there!

Best,
Nico

[Debora]

Hi again, Nico,

Pardon my frustration. I referenced your links and it did give me some idea of what to do. Thank you for that. I also did more research on my own and have made some progress but here’s my problem at the moment:

I have found redirect options within the WooCommerce menu to have “ADD TO CART” bring the user to a new page of my choice. However it doesn’t give me a cart option for redirection (it gives my other site pages instead.) I also added a sticky menu widget that allows options for View Cart and Checkout but both buttons lead nowhere.

So my problem at this point is this – I don’t know where to find the cart, where to locate it, and how to tell all these different links and widgets to go to a cart page. I know that WooCommerce has its own automated system through Cart and Checkout functions but I don’t know where I can locate this.

Debora

[Nico]

Hey Debora,

Thanks for the follow-up and please don’t be sorry at all!

Let’s make sure you have the basics well configured, please check out this Configuring WooCommerce Settings guide. There you should be able to assign the Cart and Checkout to the pages of your choice. If you still have no pages created for that just create two empty pages with the names of your choice for that. Once that is correctly configured, you can try again setting the redirect options.

Please let me know about this,
Best,
Nico

[Debora]

Okay, thanks Nico!

That was a big help. I managed to create and set up my cart and checkout pages. I have ONE LAST question if you have the patience:

The checkout page is good to go, but the text is very crazy. Input fields are not lined up, separated by way too much space, and everything needs to be lined up nicely.
Here’s what it looks like: http://westchesterputnampottery.com/checkout/

So my question is, where can I edit this and line everything up nicely?

Thanks one last time for all your help.

[Nico]

Hi Debora,

Glad I could help you setting that up!

Hopefully I can help you with that also, it looks crazy indeed! From what I see in the source code all the checkout page is wrapped in a ‘pre’ tag, that’s why it looks so weird. Not sure why you are getting that – I must say I’m not an expert in WooCommerce. But if you manage to delete that ‘pre’ tag everything will look normal! To illustrate this, your source code looks like this:

...woocommerce checkout page...

Let me know if you can get that fixed!
Best,
Nico

[Debora]

Hi Nico!
That did the trick!
I think we’re in good shape at this point. My thanks to you and your whole team for helping us out with this. We are very grateful.

Debora

[Nico]

Debora,

Really happy to hear so 🙂 It’s our pleasure!

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one.

Have a great weekend,
Best,
Nico

[Author]

Posts