I know you can disable the preloader/spinner on WooCommerce checkout page using the following CSS code:

/* Remove spinner on WooCommerce checkout page */
.woocommerce .blockUI.blockOverlay { 
position: relative !important;  
display: none !important;
}

However, the WooCommerce preloader / spinner still appears on all other related pages for example the Shop and Single Product Page.

I have read Woocommerce Uses jQuery BlockUI Plugin to make a blocking overlay with an animate spinner on some jQuery events and on specific pages.

I already have my own preloader on the website, thus I'm looking to remove the black WooCommerce preloader / spinner on these specific woo pages?

Any tips would be greatly appreciated.

Thanks

EDIT:

Could we disbale the WC script using the hook 'wp_enqueue_scripts'.

wp_enqueue_scripts is the proper hook to use when enqueuing scripts and styles that are meant to appear on the front end.

add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );

function child_manage_woocommerce_styles() {
    remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
    if ( !is_woocommerce() && !is_page('store') && !is_shop() && !is_product_category() && !is_product() ) {
        wp_dequeue_script( 'jquery-blockui' );
        wp_dequeue_script( 'jqueryui' );
}}

Fixed the problem by changing the class in my preloader code to .preloader instead of .loader - And somehow this removed the black woo spinner.

I was convinced this was a standard default thing as WooCommerce directly said there’s no default option to remove it in settings, and customizing that would require a bit of additional coding.

So my only guess it that class .loader is integrated with WooCommerce and the HTML/CSS Code made it appear.