Images on the single page disappeared and wrapper opacity to 0

I woke up in the morning and took a look at the home page and everything was the same as I left it yesterday. I decided to add the star line to the owl carousel so I click on one of the products to first give it some rating and to my shock, the images on the single product page have been disappeared. I noticed that they were there but hidden, furthermore, the placeholder was there as well and as the result, a huge chunk of empty space exists on the page.

Digging into Chrome Developers Tool I found that the opacity for the wrapper div has set to 0.



As I have never touched this part it could only mean a javascript problem. I disabled all plugins to no avail. I decided to comment out all the CSS and .js file inside functions.php and bring back the original enqueue files from _S theme and BAM the problem has gone away. Theory: Either one of the scripts has conflicts or I have inadvertently removed one of the core files.

The first theory is dismissed immediately, all the files where there so there must be conflict. I start by commenting out en-queued files one by one.
Result: It turned up that I had commented out this line:

wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );

Explanation: I always deregister jQuery and jQuery-migrate

wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery-migrate' );

And register the latest version again. For some reasons, I had commented out registration of jquery-migrate.
Update: it has nothing to do with jquery-migrate.js. I needed to enqueue jquery with the same handle that I deregister it like this:

wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery','https://code.jquery.com/jquery-3.3.1.min.js');

Leave a Reply

Your email address will not be published. Required fields are marked *