Loader on checkout page

You can style the loading area/’white’ with CSS and add graphics etc.

Thanks!

Do you also know which file I need to edit for that?

Sincerely,
Joren

CSS can go into your theme or via a plugin (jetpack has a css editor). No need to edit files.

òkay, but how do I know which classes/id’s I need to edit? Because the white section is gone really quick…

Sincerely,
Joren

Open up your browser’s console on the checkout page and run the command:

jQuery('.checkout').block({message: null, overlayCSS: { background: '#fff', opacity: 0.6 }});

Thanks a lot!

But do you know where I can change the content of the block?
Because I want to insert an image in it…

Regards,
Joren

Hello Joren,
You don’t need to edit WooCommerce files. You can write CSS in your theme or child themes CSS file.

The class used to load the overlay is .blockUI .blockOverlay
The class used to load the spinner is .woocommerce .loader:before

Please let me know if you need more detailed information ??

But I want to want to put content in the block?
I cannot do that via CSS?

Regards,
Joren

You can actually, via CSS content property. I’d stick with CSS rather than editing JS files.

But how can I insert a div with the CSS content property?

Regards,
Joren

Why do you need to? You can use :before, :after pseudo classes.

Because I want to insert an image as spinner in it.

Regards,
Joren

I suggest you look into pseudo classes and use background images. Everything you want to do is possible, you just need to research it ??

Okay, I will have a look at that!

Thanks!

Regards,
Joren

Hey Joren,

The pseudo classes you’re looking for are :after and :before ??

Also check out the following guide to get you started: https://css-tricks.com/almanac/selectors/a/after-and-before/