Upgrading from v1.x.x

In this chapter, we’ll document all the steps that needs to be done while upgrading from 1.x.x to 2.x.x.

No Customisations scenario

If you have not made any .css or .php changes to Electro parent theme or child theme and if you have made only customisations via theme options (i.e. via Electro menu in admin panel) then you can update to 2.x without any issues.

Modified .php or .css via Electro child theme

This is the most common scenario. Since we’ve rewritten lot of code some of the customisations that you might have added may not apply to Electro 2.0. So it is important to identify what type of customisations you’ve made, check against the changes that have been implemented and then update the customisations accordingly.

CSS Changes

In Electro 2.0, we’ve replaced traditional layout using float with the more advanced Flexbox. We’ve also re-written Product, Header and Footer blocks with improved CSS. If you have written CSS customisations to any of these blocks. It is most likely that they may not work or break existing layout.

PHP Changes

We’ve made sure that not to remove any old functions to help in backward compatibility. We’ve re-written Header and Navigation actions but we’ve used new actions instead of old ones. This means if you had made custom changes to old actions, they may not work anymore. You need to update old actions to newer actions.

Template Changes

If you’ve overridden templates by copying them to your child theme, you should check the latest version of those templates in the parent theme and update your child theme accordingly.

Use a staging server

If you have made customisations via child theme, we recommend that you use a staging server to update the parent theme and migrated the child theme hooks and CSS to latest ones in 2.0. You should never make updates to live ( or production ) server.

How to create a staging server

WP Beginner has a wonderful article on how to setup a staging server. You can view it here : http://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/. Once you have a staging server, you should update the parent theme and then migrate your custom CSS and PHP functions.

Modified core parent theme

We do not recommend modifying the core parent theme. It creates ambiguous code and makes it difficult to maintain your customisations. You should identify the files that have been changed, save the code separately and then migrate the code one-by-one via a child theme.

Common Issues

We will update this section as we come across common issues from our customers

Logo is small after update

We have fixed this issue in 2.0.1. Please update the theme from 2.0.0 to 2.0.1 to fix this.

Website is completely broken

This is most likely due to browser cache. In the last few hours, most of the website broken issues were resolved by simply reloading the website after clearing your browser cache.

We’ve also noticed that when using WP Rocket, the critical CSS generated is not updated. This would cause the website to appear broken as well. Please de-activate WP Rocket, update the theme, activate WP Rocket, purge all cache and regenerate Critical Path CSS. Ref: https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css

Ads blocks visual composer elements are broken

To solve this issue please add vc-ads-block class in Visual Composer Column Settings.

Image sizes are not uniform

After updating the theme sometimes images are not uniform with different images having different heights. This is caused due to new image size improvements in WooCommerce and not the theme itself.

Please navigate to Appearance > Customize > WooCommerce > Image Sizes and make sure, you’ve chosen cropped. If it is already cropped then choose a custom crop ratio and set the crop ratio as 212:198. You can also set to a different crop ratio. However please make sure the “Publish” button is enabled and click on “Publish”.

Now the images will be regenerated in the background. Once all the images are re-generated the images in product pages should appear uniform.

Ref: WooCommerce 3.3. Image Improvements