Visual Composer Stopped Working

I spent more than 2 weeks to find a solution to this problem,Though there are 100s of posts on this , i couldn’t find any solution, So decided to give a try myself.

Problem: visual composer suddenly stopped working, It seems the new wordpress update has to do something with it, Basically it’s Jquery issue as the short code seems to work fine. But when i try to use inbuilt graphical elements like row or titles etc.. it doesn’t select them and create a shortcode for them ,

 

visual composer error step 1

visual composer error step 1 after wordpress update

As you can see from above image,  there is no visual appearance of any shortcode, however if you switch to visual mode you will find the shortcodes.

visual composer error step-2

No Even if you try to click on these graphical elements , nothing happens, if you are facing the same issues, i have some solutions for you.

Solution for Visual composer

  • Purchase the plugin if you have got this plugin bundled with your theme
  • Downgrade the update – Use the older version of wordpress

Annoyed? Well i understand both of these solutions are not good enough

Good news is i have a very simple solution for you.

All you need to do is , Search for composer-view.js

location: plugins/js_composer/assets/js/backend/composer-view.js

Open This file and look for

html2element: function(html) function.

There?

Ok now replace this whole function with  

html2element: function(html) {
 var $template, attributes = {},
 template = html;
 $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
 attributes[attr.name] = attr.value}), 
 this.$el.attr(attributes).html($template.html()), this.setContent(), 
 this.renderContent()
 },

I hope you have understood, let me know if you have any question.

Thank You for reading.

Output :

visual composer error step 3

Note: You might need to update your visual composer if you don’t see “backend” folder under js-composer->assests->js