Opacity class of "processing" on Woocommerce checkout and cart with white background

Hey there, I've encountered a frustrating issue that has been driving me crazy. I am currently working on a woocommerce project for a client and have run into a problem. When I try to proceed to checkout from the cart, the form turns "white" before redirecting to checkout. Then, once on the checkout page, another form appears "white". Even when I click on "proceed to paypal", both forms turn "white". Upon inspecting, I noticed that the class "processing" is being added to the form, but I can't seem to figure out its effects or how to override it. Does anyone have any suggestions on how to resolve this?

https://i.sstatic.net/MYS3V.png https://i.sstatic.net/vCkEw.png

Link to the project

Thank you!

jquerycsswordpresswoocommerce

Answer №1

How to Style with Css

 .woocommerce .blockUI.blockOverlay {

  position: absolute! important;

  visibility: hidden ! important;

}

Answer №2

After some investigation, I managed to identify the root of the issue: it was located in the cart.js and checkout.js files (woocommerce > assets > js). The 'processing' class triggered an overlay, so I decided to decrease its opacity.

if ( ! is_blocked( $node ) ) {
        $node.addClass( 'processing' ).block( {
            message: null,
            overlayCSS: {
                background: '#fff',
                opacity: 0.6
            }
        } );
    }

Additionally,

if ( 1 !== form_data['blockUI.isBlocked'] ) {
    $form.block({
        message: null,
        overlayCSS: {
        background: '#fff',
        opacity: 0.6
    }
});
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for integrating Bootstrap CDN into a WordPress website?

I attempted to include Bootstrap using a cdn in WordPress by adding the following code, but unfortunately it did not work. When I manually added it to the header, it worked perfectly fine. However, my goal is to achieve this through WordPress functions. f ...

jquerywordpresstwitter-bootstrap

Issue with Handling jQuery and JSON

I'm currently enhancing the user interface for a web application and I've been instructed to utilize JSON for retrieving values. I've written a simple script to extract the value of a specific key, however, it's not producing the desire ...

jqueryjson

jQuery hide() blink

I am currently working on a PHP script that performs validation on a form with various inputs. My goal is to hide the errors initially and then have them fade in gradually when the page reloads, rather than abruptly appearing all at once. However, I' ...

phpjqueryhideflicker

Restrict the input area of a text field

Apologies for the basic question, but I couldn't find an answer online. I have a textarea that I want to be resizable, but with specific dimensions when the page loads. The initial size should be the minimum size of the textarea. Additionally, I woul ...

htmlcsstextarea

Avoiding text from overflowing a DIV when the parent DIV's width is specified as a percentage

After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue. The layout of some content I'm working with resembles the example provided here: Check out the Fiddle Example In th ...

cssoverflow

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

extra header in table

Hey guys, I'm not really into design and I could use some help. My CSS seems to be creating an extra head on my <tr> element. I used a CSS table generator to create the CSS code and employed a PHP HTML to build my table. <html> <title& ...

htmlcss

Developing procedural steps using CSS

I've been working on designing a step process using CSS, but I'm struggling to create the arrows that connect each circle, especially when the screen resolution changes. https://i.sstatic.net/GLod9.png This is my current attempt: .process-ro ...

cssbootstrap-4

AngularJS - issue with directive functionality on dynamically inserted classes

Check out this plnkr - I've got a button that toggles the class toggled on the body element. I've also developed a directive to trigger an alert when the toggled class is applied to the body element, but for some reason it's not working. H ...

javascriptjqueryangularjs

Ensure the background image completely fills the div, regardless of the image's aspect ratio

Can anyone help me figure out how to fill a div's background with an image, regardless of its aspect ratio (landscape or portrait)? I've tried different methods from using background-size: cover; to background-size: 100% 100%;, but the div doesn& ...

htmlcss

What strategies can be implemented to minimize the use of if-else statements?

Is there a more efficient way to simplify this if-else statement? This code dynamically changes the picture based on integers retrieved from the database. I am looking for ways to optimize this code. if (val["soil_h"] < 21){ $("#ground").att ...

javascriptjqueryajax

When the modal is opened a second time, it transforms into a shadowy screen

I have created an edit modal that seems to be working fine, but I am facing an issue where after dismissing the modal and trying to open it again, the screen just goes dark. The link triggering the modal: @Html.ActionLink("Edit", "GetEditSv", "Sv", new { ...

javascriptjqueryasp.net

Retrieving the current element in the .each() method

Here is some code that I am working with: HTML <div id="step-holder"> <div class="step-no">1</div> <div class="step-dark-left"><a href="#">Basic details</a></div> <div class="step-dark-right">&a ...

jquerythiseach

CSS: A guide to creating layouts

I wrote this code snippet to display a table: <div class="topologyBalloon" id="bl_c2f03b99-6d62-43c4-9a35-4b4cbf22a7db"> <a href="#close" class="closeTopologyBalloon">×</a> <div class="contentBody"> <table class="deta ...

htmlcss

Efficiently loading a jQuery plugin with lazy loading

$('a.lightbox').hover(function () { if (jQuery().lightbox) { // ensuring lightbox.js is not loaded on each hover $("a.lightbox").lightbox({ 'type': 'iframe', 'overlayOpacity&apo ...

jqueryloadlazy-loadingexternal

jQuery struggles to locate the active class within the Bootstrap slider

Want to make some changes to the Bootstrap slider? Here is the HTML Code and jQuery: <div id="carousel-slider2" class="carousel slide bs-docs-carousel-example"> <ol class="carousel-indicators"> & ...

javascriptjquerytwitter-bootstrap

Pictures in the portfolio failing to load on Mozilla Firefox

Having some trouble with my WordPress website bmfconstruction.com.au/new/. In the project section, all images are loading correctly in Chrome, Opera, and IE. However, when it comes to Firefox, none of the images seem to be showing up. I've tested this ...

javascriptcsswordpressimagefirefox

Getting a specific element from an Ajax response may involve using JavaScript methods to target the desired

Within my PHP file, there are multiple HTML elements that I am fetching in an AJAX response. Currently, all these HTML elements are being returned in my drop area. How can I adjust the code to only retrieve a specific element, such as an image, like so: P ...

javascriptjqueryhtmlajax

What is the best way to implement gravity in order to make my character jump effectively

As a beginner in the world of coding, I am currently working on creating a game. However, one major challenge I am facing is simulating gravity to make my character jump effectively. Despite trying various methods, I have encountered disappointing results. ...

javascriptcsshtml5-canvas

populating jqxGrid with dynamic data using Ajax

I created a form that utilizes the submitForm() function to utilize ajax Call and send it to the server. <form id="searchform" onsubmit="return submitForm();"> My goal is to have the data from the ajax call populate a jqxGrid. function sub ...

jqueryajaxpopulatejqxgrid