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 '<button class="buy-now-btn">Buy now</button>';}
This is the code I have on the archive pages, which is incorrectly redirecting to the single product page:
<button class="buy-now-btn btn-shop">Buy now</button>
The HTML output for the above code looks like this in my browser:
<button class="buy-now-btn btn-shop">Buy now</button>
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:
Hooking into the after add to cart button on all pages and adding the same code from the function I'm currently using above. With a different function name, of course.
Copying and pasting the function code and converting into HTML directly on the page
Disabling AJAX on the archive pages (the buy now button was working before I added AJAX)
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.
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">Buy now</button>
Related
I have created a product page using Woocommerce elementor widgets and I would like to better control the behaviour of the “add to cart” button (class="single_add_to_cart_button button alt wp-element-button").
Since I only have 1 product to sell, I placed the products and the cart widgets on the same page.
What I would like is that when I press on “add to cart” (ajouter au panier, in french), the user gets redirected to the bottom of the page (where the cart is). I have placed an Elementor menu anchor there (with CSS ID #shop) but I can't redirect the button to the anchor.
I believe I will need to write a PHP function but my understanding is way too limited unfortunately.
Thanks for your support,
C.
I tried using the "WooCommerce Add to Cart Custom Redirect" plugin (as suggested in this thread), which works such that the user gets redirected to the cart but by reloading the page. What I want is that the user stays on the same page and pressing on "Add to Cart" just slides down to the bottom of the page.
My advice would be to use jQuery, and a click handler with scrollIntoView(). The code could be inserted everywhere after the 'add to cart' button and the jQuery link tag, even to the bottom of the page as a simple script tag. It would look something like this:
$(document).ready(function(){
// binding a click event to the button remotely
$(".single_add_to_cart_button").click(function(){
// scrolling to element '#shop'
$("#shop")[0].scrollIntoView();
});
});
PS: for adding the script, you can easily add it using Elementor's html- or custom code blocks.
EDIT: If the above solution does not work, then the problem might relates to Woocommerce constantly changing its DOM everytime a JS event runs that has something to do with the said part. Because of this, binding click handlers will not (or rather, not always) work, and setting a handler for the EVENT itself seems to be a better way:
jQuery(document.body).on("added_to_cart", function() {
jQuery("#shop")[0].scrollIntoView();
});
The Javascript/jQuery events can be found here.
Important disclaimer, when the above code don't work out of the box:
For others who might experience the same issue, by default Woocommerce does a full page reload upon add-to-cart event, hence the JS event never takes place. If you enable add-to-cart with AJAX in WC settings, you'll get the JS event too.
(source at the comments)
When i click “add to cart” button, it redirect me to product page without reason..this happend on all site after updating woocommerce plugin..is there any fix for this…is there myb any php function for fixing it..
Just need to reactivate woocommerce plugin and it will works again. If somebody get the same problem like me this is your answer.
Suddenly when I go to the Apply coupon by clicking on the "Apply Coupon" button in cart page. Then I saw the homepage design on the cart page. I don't know what's wrong with the Woocommerce suddenly. Also when I go to the checkout page and fill up the details then also shipping charges not calculating. I think something wrong with the Woocommerce ajax.
Anybody help me out, please.
I got solution on this issue. There was anotherplugin had the issue after updating plugin. So I have disabled the plugin and it worked.
I have combined cart and checkout on one page and are moving things around in the layout but cannot properly move Place order button on the checkout from file payment.php to cart.php. The button shows is clickable but not able to pas the checkout as it gives an error: "We were unable to process your order, please try again."
Followed this guide below on removing and adding the button:
WooCommerce checkout layout
thanks in advance!
There are 2 things you need to understand. payment.php template is a part of form-checkout.php and it is residing inside tag. Also on the cart.php page , you can found that there is also all the data resides inside the <form> tag.
You need to place your place order button including with other page information that needed for the checkout inside the form tag with proper form name and action to make it worth on the cart page.
I've styled the class woocommerce_message and continued on with developing my theme. I needed to add wp_footer(); to the bottom of my code to make the lightbox functionality work and now when I click "add to cart" what appears is added_to_cart underneath the add to cart button. Also if I add a product with stock quantity 1 twice it will give me the desired woocommerce_error but it opens in the unavailable products page and I want to know how to put it back/why it happened.
When I take wp_footer(); out it fixes the problem but I need it to make lightbox work.
I'm developing it locally so I can't share site link but I've put a zip file containing all the theme code here https://www.dropbox.com/s/57m63w98ntds1or/Vintage%20Then%20Today.zip?dl=0