Reputation: 11
I am working on a WooCommerce site with Ajax enabled on all pages. I've also added a custom Direct Checkout button as part of the checkout form. However, after I got everything Ajaxified, the direct checkout link only works on single product pages. On archive pages, the link redirects to the single product page instead of adding the product to the cart and taking the user to the checkout page.
I'm accomplishing the "Buy Now" button with a function that hooks into the end of the cart form on the single products page. That code works perfectly and looks like this:
add_action('woocommerce_after_add_to_cart_form', 'buy_now');
function buy_now() {
echo '<a href="/checkout/?add-to-cart='.get_the_ID().'"><button class="buy-now-btn">Buy now</button></a>';}
This is the code I have on the archive pages, which is incorrectly redirecting to the single product page:
<a href="/checkout/?add-to-cart=<?php echo $product->get_id(); ?>"><button class="buy-now-btn btn-shop">Buy now</button></a>
The HTML output for the above code looks like this in my browser:
<a href="/checkout/?add-to-cart=189&v=9a0d701a3b2a"><button class="buy-now-btn btn-shop">Buy now</button></a>
When I copy and paste this path behind my URL in the browser, it behaves as expected. It adds the product to the cart and redirects to the checkout page.
I have tried the following with the same results:
I feel like it might be something that will need a JS fix OR it's something super simple that I've overlooked. Help is appreciated.
Upvotes: 0
Views: 692
Reputation: 11
So hours of staring at this really threw me I guess. All I had to do was place the a tags inside the button tags on in my archive page loop and now all is well.
This is the code that worked.
<button class="buy-now-btn btn-shop"><a href="/checkout/?add-to-cart=<?php echo $product->get_id(); ?>">Buy now</a></button>
Upvotes: 1