Need To Call Specific Scripts In Checkout Page Woocommerce

Partner's Ad:

WordPress.org

Support » Plugin: WooCommerce » How to Call the Process_Payment($order_id ) inside a JS function

How to Call the Process_Payment($order_id ) inside a JS function

Hi, well i am back on this cool forum! Got a question, i am builing a custom payment gateway plugin for WP. But the callback i receive from the payment gateway in terms of wether the payment was processed correctly is via Javascript not PHP TOKEN or IPN call back like most payment gateways do, so it is via this JS function or once the payment is processed correctly this function response is called:

var onAuthorize = function(response) <

//Here i can make my custom script to trigger something like redirect to a thank you page cause order was processed correctly but in WordPress i need to trigger a PHP function from the Woocommerce API to process the payment: public function process_payment( $order_id ) So i would to call that function inside this JS function in order to process and close the order.

Thefore i need to trigger this PHP function (from the woocomerce API to process the payment, more info here https://docs.woocommerce.com/document/payment-gateway-api/) to process the payment but i would need to call the function, mentioned below this comment. inside the previous JS function:

So the question is can you call a PHP function inside a JS / Ajax function, better to call it on the same file in which i am handling the payment processing, cause sending the checkout process to another page or refreshing the page i guess will loose cart details information which happened to me via GET, via POST will have to double check.

Anyone had to deal with this problem before, calling a PHP function inside JS? Anyone know if there is JS version of the default Woocommerce API process payment PHP function: public function process_payment( $order_id )

Remove WooCommerce CSS Styles and Scripts From Pages That Don’t Need It

WooCommerce loads three core CSS style sheets on every page and post when installed on a WordPress site. You can save a bit of page load time here by removing the styles and scripts from pages and content that do not need it .

It also loads a bunch of other javascripts and CSS styles from the libraries it uses for its functionality.

Here is how you can load these files a bit differently so they appear only on the pages you need, speeding up page load time for non-Woocommerce content.

  • woocommerce-layout.css
  • woocommerce-smallscreen.css
  • woocommerce.css

These are loaded from /wp-content/plugins/woocommerce/assets/css/

Woo have made a filter available to remove all 3 or remove individual ones.

You can do this and just add your own CSS style

This is great but it still loads on every page, if you keep your WooCommerce on the default pages you can conditionally load the CSS file.

Another great way to load only the CSS styles and Javascripts only on the WooCommerce product and shop pages is to dequeue them on all the other pages.

Here all the Woo styles and scripts are removed by hooking into ‘template_redirect’ the last hook before the page loads and removing the initial Woo add_actionof all styles and scripts.

WooCommerce Custom Checkout Validation

In this tutorial we remove default validation and create custom validation rules. Also I will show you one trick how to replace all the default validation messages with just a single one.

Remove Default Validation from Fields #

If you need to remove validation for some of WooCommerce checkout fields, let’s say email, phone or postcode, all you have to do is to remove validate parameter from a field. You can do it in woocommerce_checkout_fields filter hook, example:

I already mentioned this topic in my WooCommerce checkout fields tutorial, check other examples there.

Validate First and Last names to Contain Only Letters #

When creating your custom validation, you do have to do anything in woocommerce_checkout_fields hook (I mean validate parameter of course).

Just use woocommerce_after_checkout_validation to add your custom validation rules and error messages for them.

Here is my result:

JavaScript validation #

Did you notice something weird on the previous screenshot? &#128513; No? Do you see that the error message says that either first name or last name is incorrect, but both of the fields are highlighted in green, not in red?

Let me show what I mean:

Much better, huh? How to implement it?

WooCommerce JS validation function is in checkout.js but it only checks if email matches the pattern and if the required fields are not empty. We have to add some custom JavaScript somewhere to create our own validation function. All we need is to operate with two wrapper classes: woocommerce-validated , woocommerce-invalid .

Below is a very simple example for the Billing Last Name field, you can upgrade this code if you want.

Just in case if you do not know where to put the code – you can insert it to any of your website existing js files or even to website wp_footer() , example:

How to Show Only One Error Message? #

Below on the screenshot is what I mean:

So, how to prevent it and display just one error message instead?

More about WooCommerce Checkout

Passionate about WordPress and snowboarding, creating websites for over 10 years! Let’s work together — just contact me.

If you are a developer too, subscribe to my facebook page.

Comments 7

Hey Misha, me again

Well, this approach of your works really fine and thank you for that. Now I did tweak your code a little and comes up with this one:

I want to retain the error shown if a specific filed is empty and generate the error “Please fill in all required fields to place order!” ONLY if all fields are empty. I’m aware that there’s something wrong in my code above. Can you help me with this?

I also notice that the error for the terms and conditions below the checkout form (if checkbox is not checked) was gone.

Ok, it looks like some custom coding work &#128579; Please contact me and I will help you.

Thank you for this one. It took me months to find this answer on how to show only one error message in checkout page. One quick question, is this also applicable to those fields in Woocommerce My Account billing address and account details? What hook should I use?

I’m glad, always welcome!

No, for billing addresses there is a different hook woocommerce_after_save_address_validation , but I’m afraid it won’t work for you the same way.

hey Misha! could you explain a bit more about how to implement the JS code – i don’t get if it’s needed to do both PHP in functions file and JS in Footer.

Everything is explained in the tut &#128579; Please ask a more specific question.

Comments are closed.
If you need my personal help, please contact me. Contact me

Leave a Reply

Your email address will not be published. Required fields are marked *