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.
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.
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>
I want to use one page checkout process in woocommerce. i have created a new page(addition) with some name and have added the shortcode
[woocommerce_cart][woocommerce_checkout]
here is the shortcodes i am using
It is working fine but login for returning customer login button is not working.
but on checkout page returning customer login button is working.
Can you please help?
i want to make one page checkout process. Image is attached Please help
Try to go to the woocommerce settings (checkout tab) and set both cart page and checkout page to your single-checkout page
I need to change the layout of the Woocommerce checkout page. I need to move the payment option box along with the terms&conditions checkobox ABOVE the order-review table. The "Place Order" button should stay at the bottom though.
I know I need to override the template in my childtheme, but I just can't get this to work as the payment box is combined together with the order-review table. Or is this somehow possible via a function?
Thank you!