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.