Problem with jQuery date picker and The7 theme

The issue

The problem was a date picker ( jquery ui datepicker ) provided by a small add on plugin was not operating correctly on a WooCommerce shop page withing a theme that has baked in WP Bakery ( The7 theme ).

The investigation

The obvious place to look was the date picker plugin, but serious debugging and complete review of the code, although not well written with a few issues, nothing that could resolve the issue.

The next step was simplification, and the creation of the most minimal version of a date picker.

After a variety of tests it became clear that there was something corrupting the functionality of jQuery / date-picker. With strange situation that is could works when the selector was a class but not an ID.

Further process of elimination indicated this corruption occurred only when 4 planets aligned

1. The theme The7 ( or its child) was active
2. WP Bakery plugin was active
3. WooCommerce was active
4. The page was the Woo Shop page

Despite clearly a theme responsibility ( as it did not occur when a default WP theme was active ) the theme support was not willing to accept this and simply deflected to the other components and would not take on further investigation.

Unfortunately, all of the 3 components are very large complex pieces of code and despite some attempts to eliminate, it became clear without the resources of the theme author, resolution was becoming uneconomic and solution that avoided the problem, rather than solved the conflicts was required.

The options

1. Change theme
2. Don’t use WP bakery
3. Use a different date picker UI than jQuery

All of these seemed expensive options, however after some thought, it was noted that WP Bakery did not add any value to the shop page, as this was formatted totally by the theme and WooCommerce.

So the approach was taken to disable WP Bakery just on the Shop page.

Implementation

Remove WP Bakery Shortcodes

The Shop page contained an empty section of WP Bakery short codes. The solution here is simple, go to the shop page, switch to classic editor and delete the shortcodes.

Remove WP Bakery code from the Shop page

This is achieved by an mu-plugin ( must use plugin ). Create a file e.g. dont-load-bakery.php in the folder wp-content/mu-plugins and add the following code

Summary

Sometimes the only economic solution is to avoid a problem rather than try and resolve the root cause. It hurts me to do this as I still feel the problem ‘won’ but the client has a working solution again.