Monthly Archives: March 2023

To add a loader or some form of visual feedback after a customer clicks on the “Place Order” button during the WooCommerce checkout process in WordPress, you can use the following steps:

1. Open your WordPress dashboard and navigate to the Appearance > Theme Editor section.
2. Locate the “functions.php” file for your active theme and click to open it.
3. Add the following code at the end of the file:

add_action( ‘woocommerce_checkout_process’, ‘show_loader_on_checkout’ );

function show_loader_on_checkout()

{

echo ‘<div id=”checkout-loader” style=”display: none;”><img src=”‘ . esc_url( get_template_directory_uri() ) . ‘/images/loader.gif” />

</div>’;

}

add_action( ‘woocommerce_checkout_order_processed’, ‘hide_loader_on_checkout’ );

function hide_loader_on_checkout()

{

echo ‘<script type=”text/javascript”>jQuery(“#checkout-loader”).fadeOut(“slow”);</script>’;

}

6. Save the changes to your theme’s style.css file.

4. Save the changes to the “functions.php” file.
5. Next, you need to add some CSS to your theme to style the loader. Add the following code to your theme’s style.css file:

<pre>

#checkout-loader { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; } #checkout-loader img { display: block; margin: 0 auto; }

</pre>

With these changes, when a customer clicks on the “Place Order” button during the checkout process, a loader image will be displayed on the screen to indicate that the order is being processed. Once the order is completed, the loader image will fade out.

TRY THis . If this not working try below method

I apologize if the previous solution did not work for you. Here’s an alternative method to add a loader to the WooCommerce checkout page:

1. Install and activate a plugin called “WooCommerce Checkout Field Editor” from the WordPress plugin repository. This plugin will allow you to add custom fields to the checkout page.
2. Once the plugin is activated, go to WooCommerce > Checkout Fields in your WordPress dashboard.
3. Click on the “Add Field” button to add a new field.
4. Set the following options for the new field:
   • Field Type: HTML
   • Label: Loader
   • Description: Leave this blank
   • Placeholder: Leave this blank
   • Field ID: checkout-loader
   • CSS Classes: loaderNote: The Field ID and CSS Classes are important, as they will be used to style the loader.
5. In the “HTML Code” field, add the following code:

<pre>

<div class=”loader-container” style=”display:none;”> <div class=”loader”></div> </div>

</pre>

1. Save the new field.
2. Next, add the following CSS to your theme’s stylesheet

<pre>

loader-container { position: absolute; z-index: 9999; background: rgba(255, 255, 255, 0.7); top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </pre>

1. This will style the loader with a rotating border and blue top border.
2. Finally, add the following jQuery script to your theme’s JavaScript file:

<pre>

jQuery(‘form.checkout’).on(‘submit’, function () { jQuery(‘.loader-container’).show(); });

</pre>

1. This script will show the loader container when the checkout form is submitted.

With these changes, when a customer submits the checkout form, a loader will be displayed on the screen to indicate that the form is being processed. Once the form is completed, the loader will disappear.