Upgrading from v1.x.x – Electro Documentation

Skip to content

# 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

###### Contents

- Welcome
- Getting Started
  - Introduction
  - Whats new in 2.0 ?
  - Upgrading from v1.x.x
  - Installation
    - Direct Download & Installation
    - Manual Download & Installation
  - Demo Content
    - One Click Demo Import (Recommended)
    - Manual Import
  - Updating the theme
  - Changelog
- Set Up Pages
  - Home v1 Mobile
    - Home v1 Mobile via Page Template
    - Home v1 Mobile via Visual Composer
  - Home v2 Mobile
    - Home v2 Mobile via Page Template
    - Home v2 Mobile via Visual Composer
  - Home v1
    - Home v1 via Elementor
    - Home v1 via Page Template
    - Home v1 via Visual Composer
  - Home v2
    - Home v2 via Elementor
    - Home v2 via Page Template
    - Home v2 via Visual Composer
  - Home v3
    - Home v3 via Elementor
    - Home v3 via Page Template
    - Home v3 via Visual Composer
  - Home v4
    - Home v4 via Elementor
    - Home v4 via Page Template
    - Home v4 via Visual Composer
  - Home v5
    - Home v5 via Elementor
    - Home v5 via Page Template
    - Home v5 via Visual Composer
  - Home v6
    - Home v6 via Elementor
    - Home v6 via Page Template
    - Home v6 via Visual Composer
  - Home v7
    - Home v7 via Elementor
    - Home v7 via Page Template
    - Home v7 via Visual Composer
  - About
  - Contact v1
  - Contact v2
  - FAQ Page
  - Terms & Conditions
  - Store Directory
  - Wishlist
  - Compare
  - Track your Order
- Blocks & Sidebars
  - Header
  - Sidebars
  - Footer
- Set Up Shop
  - Shop
  - Set Up Products
  - Product Attributes
  - Single Product Page
  - Cart
  - My Account
  - Checkout
  - Track Your Order
- Static Blocks
  - Introduction
  - Recommended Products Cards Carousel
  - Pages Megamenu Item
  - Accessories Jumbotron
  - Mobiles & Tablets Megamenu Item
- Navigation
  - General Guidelines
  - Menus & Locations
  - Creating Megamenus
- Theme Options
  - General
  - Shop
  - Header
  - Footer
  - Mobile
  - Navigation
  - Blog
  - Social Media
  - Styling
  - Typography
  - Custom Code
- Elementor Elements
  - Product Categories List With Header Image
  - Products 1-2 Block
  - Product Categories List
  - Product Categories Block
  - Product Carousel Tabs 1
  - Products 6-1 with Categories
  - Products with Categories and Image
  - List Categories Menus
  - Ads With Banners Block
  - Electro Products List Block
  - Electro Products Carousel 1
  - Electro Nav Menu
  - Electro Mobile Deals Product
  - Recently Viewed Products
  - Deals Products Block
  - Electro Deal Products Carousel
  - Electro Products Carousel with Category Tabs
  - Ad Block
  - Electro Brands Carousel
  - Electro Onsale Product
  - Electro Onsale Products Carousel
  - Electro Products Cards Carousel
  - Electro Products Carousel
  - Electro Team Member
  - Feature Block
  - Product 2-1-2 Grid
  - Product 6-1 Grid
  - Product List Categories
  - Products Carousel Tabs
  - Products Tabs
  - Slider with Ads Block
  - Electro Deal and Products Tabs
- Visual Composer Elements
  - Ads With Banners Block
  - Deals Products Block
  - Electro Mobile Deals Product
  - Electro Nav Menu
  - Electro Products Carousel 1
  - Electro Products List Block
  - List Categories Menus
  - Product Carousel Tabs 1
  - Product Categories Block
  - Product Categories List
  - Product Categories List With Header Image
  - Products 1-2 Block
  - Products 6-1 with Categories
  - Products with Categories and Image
  - Recently Viewed Products
  - Electro Deal Products Carousel
  - Electro Products Carousel with Category Tabs
  - Ad Block
  - Electro Brands Carousel
  - Electro Onsale Product
  - Electro Onsale Products Carousel
  - Electro Products Cards Carousel
  - Electro Products Carousel
  - Electro Team Member
  - Feature Block
  - Product 2-1-2 Grid
  - Product 6-1 Grid
  - Product List Categories
  - Products Carousel Tabs
  - Products Tabs
  - Slider with Ads Block
  - Electro Deal and Products Tabs
- Troubleshooting
  - Home Pages
    - Ads block settings is empty
    - Visual Composer does not work with Home pages
  - Installation
    - The link you followed has expired. Please try again.
- Customisations
  - Shop Page
    - Show Product availability in Grid view
    - Show Product thumbnail above product title and categories
    - Show Brand name in Shop Page
- FAQ
  - General
  - Installation & Updates
  - WooCommerce
  - Translations