Customize A Loader

Introduction

Some merchants may find that they want to tweak the existing payment loaders. The plugin allows merchants to copy the existing loaders and edit them from within their theme.

In order to customize one of the loaders, you must perform the following steps.

1. Ensure you have created the woo-payment-gateway directory in your active theme folders.

   

2. Create a folder called loader.

   

3. Copy the loader file that you want to change from the plugin's /templates/loader folder to your active theme's woo-payment-gateway/loader folder.

   

   

4. Make any style changes that you wish within the file. In this example, we have changed the background color of the loader.

   body.bfwc-body .bfwc-new-payment-method-container .bfwc-payment-loader {
     height: 100%;
     background: rgba(148, 49, 49, 0.66);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
   }

5. Save your changes to the file and navigate to the loader section of the Checkout settings page. Ensure you have your loader selected.

   

6. Verify that your checkout page displays the updated loader.