Hi,

It’s awesome to know that you decided to purchase Electricom. No doubts, you will join our happy customers community in seconds!
Won’t make any mistake here, because our detailed documentation will guide you. Please be sure to check it out before getting started. We have outlined all kinds of necessary information and keep them easy-to-read-and-follow. Our themes are dedicated to WordPress platform, so we assume that you have already WordPress installed and ready to go.

To install Electricom – your powerful Electricity Services WordPress theme, you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are all the useful links for WordPress information:

To use Electricom, you must be running WordPress 5.0 or higher, PHP 8.0 or higher, and MySQL 5.6 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

After purchasing Electricom, please download the package from ThemeForest. In the package, you can find things like documentation, license, zipped file with theme files and folder with theme files. Please unpack the whole package after downloading it from ThemeForest.

Here maybe is common error with package: Theme is missing the style.css stylesheet error

• Step 1: Navigate to Appearance >> Themes
• Step 2: Click Add New, then click Upload Theme >> Choose File
• Step 3: Navigate the .zip file on your computer and click “Install Now”
• Step 4: Activate the newly installed theme by going to Appearance >> Themes and clicking the Activate button.
• Step 5: IMPORTANT! After theme installation, at the top, you have a box with information about required and optional plugins. To install them and activate, please navigate to Appearance >> Install Plugins section.

Note: If you have any problem when installing electricom.zip file via WordPress upload please note our Theme Requirements section above.

SKIP THIS STEP if you have already successfully uploaded Electricom theme via WordPress

• Step 1: BACKUP YOUR FILES! Should do it before set up anything, this is always the safest.
• Step 2: Unzip the electricom.zip file (usually is Extract Here if you use WinZip or 7Zip).
• Step 3:  Login into your hosting server via an FTP client tool (We recommended to use FileZilla).
• Step 4: Upload Electricom Theme folder into wp-content/themes folder on your server.
• Step 5: Go to Appearance >> Themes and choose new theme has just installed and clicking the Activate button to active.
• Step 6: Once your theme is installed and active you will get a prompt at the top of your Dashboard that will ask you to install Electricom‘s plugins..

(More details you can see it in topic update theme manual: https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/)

You also can use a File Manager plugin like this to manage your files on your WordPress install: https://wordpress.org/plugins/wp-file-manager/

After install and active theme you need install some required plugins to make Electricom working best:

• Contact Form 7: Electricom is fully compatible with Contact Form 7, the free form plugin recommended to create a nice form for your site.
• WooCommerce: if you want to include shop to sell your products
• YITH WooCommerce Wishlist: wishlist plugin for WooCommerce
• YITH WooCommerce Compare: compare plugin for WooCommerce
• MC4WP: Mailchimp for WordPress: mail subscriber plugin
• Smash Balloon Instagram Feed: Instagram feed plugin
• Revolution Slider: the most Premium Slider for WordPress with many functions
• Elementor: The most popular free drag and drop page builder with an intuitive interface to build your content at ease.
• Haru Electricom: The Haru Electricom core plugin include widgets, custom post types,…
• Redux Framework: Redux is a simple, truly extensible options framework for WordPress themes and plugins.

With Electricom, you can build a functioning website just by clicking a button and install our demo data.

• Step 1: Go to Theme Options >> Demo Importer section
• Step 2: Choose what demo you want to import then click Import Demo button

If you can’t install Demo Data please read more about section Theme Requirement above.

Or you can follow one of these topics below:

https://harutheme.com/forums/topic/how-to-import-demo-data-automatic-in-harutheme/

or

https://harutheme.com/forums/topic/import-demo-manual-wordpress-theme/

In Special case if your site using HTTPS, it can cause some images missing when import, you can contact your hosting provider help you change it. You  also can follow this to turn off HTTPS: https://harutheme.com/forums/topic/how-to-turn-off-https-in-wordpress/

Here is video tutorial to help you Demo data manual: https://www.youtube.com/watch?v=M08vHyzXMOM

After installed Demo Data if you have issue with style like background image,… on mobile you need to go: Elementor -> Tools -> General. Click on Regenerate Files & Data and Sync Library and Save Changes.

How to fix Elementor Section Background not showing on Mobile

This is Automatic Update method

Some important notices before updating:

We recommend you have a current backup of your site including wp-content folder, wp-config.php file and .htaccess file and a copy of  WordPress database. If you don’t know how to take action, you can use several plugins such as UpDraft Plus and WordPress Backup Buddy or Duplicator (recommended). Moreover, you should backup HaruTheme’s theme options in Theme Options >> Import/Export.

Please follow these steps to update automatically this theme:

• Step 1 – You need to generate an API key to link your WordPress site to your ThemeForest account. Login to ThemeForest, go to your dashboard and click on “Settings.” The API Keys screen allows you to generate a free API key.
• Step 2 – Download Envato Market, install and activate this plugin. A new menu item, “Envato Market”, will appear in the admin sidebar. Click on the sidebar link and enter your marketplace username and secret API key. Click “Save Settings.” All of your theme purchases will now appear on this page after it refreshes.
• Step 3 – The plugin will now alert you to theme updates – so long as you check the toolkit settings regularly. Click on “install automatically” beside each of your themes to automatically update them. The toolkit settings page also allows you to install themes that you haven’t already uploaded to your site, delete ones you don’t use and view version details. You can also set up theme backups.
• Important! Always Use a Child Theme Updating your themes shouldn’t affect any customization to your website as long as you’re using a child theme.

More detail you can see in this topic tutorial: https://harutheme.com/forums/topic/how-to-update-wordpress-theme/

If you want to customize template display of theme or plugin please follow this topic: https://harutheme.com/forums/topic/customize-wordpress-theme-using-child-theme/ to keep you custom works when update theme.

Following these steps to update your theme:

• Step 1 – Log into your ThemeForest account and navigate to your downloads tab. Find the “Electricom” theme purchase.
• Step 2 – Click the Download button next to it and choose to download the Installable WordPress file only which is just the WordPress file, or choose the All files & documentation which is the entire package that contains everything.
• Step 3: Update theme via WordPress upload method above or via FTP Client tool.

Here is topic to help you update theme manual via FTP: https://harutheme.com/forums/topic/manual-update-wordpress-theme-via-ftp/

You need to configure WordPress. You can adjust WordPress settings as follows:

Step 1 – You can set Site Title, Tagline in Settings >> General.

Step 2 – You can set Blog pages show at most and Front Page displays  in Settings >> Reading.

Step 3 – You can set Discussion settings in Settings >> Discussion. You can set comment options from here.

Step 4 – You can change Image sizes in Settings >> Media. You can set image size for blog archive, single blog post and image for widget sidebar.

Step 5 – You should ensure that a non-default permalink setting is selected, e.g. Day and name in Settings >> Permalinks.

By clicking on the “Theme Options” menu, you’ll be able to change all template specific settings. To Understand how Options in our theme work please follow this topic tutorial: https://harutheme.com/forums/topic/why-theme-options-doesnt-apply-changes/

That means you need to Edit Homepage (or page have header, footer, layout,.. different settings in Theme Options) then go to Page Options at bottom of page to compare settings with Theme Options.

General Setting

• Layout Style: Set layout style for your website with 3 options Boxed, Wide and Float.
• Page Preloader: Select Page Preloader from drop down list. Leave empty if you don’t want to use this feature.
• Back To Top: Turn On/Off back to top button.
• Custom CSS (From WordPress version 4.7+ you can add Custom CSS in Appearance » Customize » Additional CSS)
• Custom JS: insert script without <script> tag

In our theme, we use Elementor to build Header, so you need go to Header Builders to create Header then set Header settings here.

• Header Builder Type: set Header display for all pages. This setting can be override by Page Meta Box -> Header setting in each page.
• Header Transparent: set Header Transparent. Example Header over Slideshow on Homepage, Page Title,…
• Header Sticky: set Header Sticky
• Header Sticky Element: set Element when Header Sticky, you can choose sticky Header or only Menu (section include Haru Nav Menu widget – or other widget Menu in Elementor).

Note: the common issue is layout of Header break because Elementor doesn’t auto generate CSS file for it.

In our theme, we use Elementor to build Footer, so you need go to Footer Builders to create Footer then set Footer settings here.

• Footer Builder Type: set Footer display for all pages. This setting can be override by Page Meta Box -> Footer setting in each page.

Note: the common issue is layout of Footer break because Elementor doesn’t auto generate CSS file for it.

In our theme we use Elementor to build Header & Footer. So you need to go Header Builder & Footer Builder to change Logo. Please change in Header that you set in Theme Options or in Page Metabox -> Header

• Logo: please go to Header & Footer Builder
• Custom favicon: set favicon of site

Please note to make this option working fine, may be you need change some settings in php.ini of your hosting server (read section Theme Requirement above).

If you want to change Color Scheme or Typography you must turn ON SCSS Compiler.

4.5.1. Color Scheme

Color Scheme Tab allows you to configure Primary color, Secondary color, Text color, Heading color and Link color for your website or set Dark Mode.

Light Mode:

• Primary Color: set Primary color.
• Text Color: set Text color.
• Text Color Secondary: set text color Secondary.
• Text Color Tertiary: set text color Tertiary.
• Heading Color: Set color for Heading (h1, h2, h3, h4, h5, h6 tag).
• Link Color: set Link color in Paragraph.

Dark Mode:

Currently Electricom doesn’t have Dark Mode design, so this function doesn’t work now.

• Dark Mode: set theme to Dark Mode
• Dark Mode Button: show/hide Dark Mode button at Front-end

Please note if you changed Color Scheme but it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.

4.5.2. Typography

Typography tab allows you set Fonts for body, menu, page title, page sub title and Heading from Google Fonts. Have about 600 fonts. If you want to use Custom Fonts upload please follow this topic: https://harutheme.com/forums/topic/how-to-use-custom-fonts-in-harutheme/

Please note if you changed Typography but at some section it still doesn’t change you need to turn On SCSS Compiler option above or clear cache of your site.

This tab includes Page, Blog, Single Blog settings.

4.6.1. Page Setting

This tab allow you to configure settings for your Pages.

• Layout: Set page layout with 3 options: Full Width, Container or Large Container.
• Sidebar: Set sidebar style with 4 options Left sidebar, Right sidebar, 2 Sidebars or No Sidebar.

Pages Title Setting

• Show Page Title: set page title On/Off.
• Page Title Layout: set page title layout with 3 options: Full Width, Container or Large Container.
• Page Title Content Layout: set page title content layout with 3 options: Full Width, Container or Large Container.
• Page Title Background: Select a background image for page title.
• Heading: set page title Heading On/Off.
• Breadcrumbs: set breadcrumbs of Page On/Off .

4.6.2. Archive Setting

This tab allow you configure archive blog page which display all your posts.

Archive Blog

• Layout: Set page layout for archive blog page with 3 options Full Width, Container or Large Container.
• Sidebar: Set sidebar style for archive page with 4 options Left Sidebar, Right Sidebar, 2 Sidebar or No sidebar.
• Right Sidebar or Left Sidebar: Set sidebar for Right sidebar or Left sidebar.
• Archive Blog Style: set Archive Blog style with 3 options Large Image, Medium Image or Grid.
• Paging Style: set Archive Blog paging style with 2 options Default or Load More.
• Length Of Excerpt: Set length of the Excerpt.

Archive Title Setting

• Archive Page Title: set On/Off archive blog title.
• Archive Title Layout: set page title layout for archive page with 3 options: Full Width, Container or Large Container.
• Archive Title Content Layout: set page title content layout for archive page with 3 options: Full Width, Container or Large Container.
• Archive Title Background: set a background image for archive blog title.
• Heading: set Heading On/Off
• Breadcrumbs: set breadcrumbs  On/Off.

4.6.3. Single Blog Setting

This tab allows you to configure single blog page (single post).

Single Blog

• Layout: Set page layout for single blog with 3 options Full Width, Container or Large Container.
• Sidebar: Set sidebar style with 4 options No Sidebar, Left or Right sidebar or 2 Sidebars.
• Left or Right Sidebar: Set sidebar for Right sidebar or Left sidebar.
• Post Navigation: set post navigation On/Off  (Go to next or preview post).
• Author Info: set author information On/Off.
• Post Related: set Related posts On/Off.

Single Blog Title Setting

• Single Blog Title: set On/Off single blog title.
• Single Blog Title Layout: set page title layout for single post with 3 options: Full Width, Container or Large Container.
• Single Blog Title Content Layout: set page title layout for single post with 3 options: Full Width, Container or Large Container.
• Single Blog Title Background: set a background image for single blog title.
• Heading: set On/Off page Heading for single blog.
• Breadcrumbs: set breadcrumbs  On/Off.

WooCommerce tab have some sub sections allows you to set Product display, archive product page (Shop page) and single product page.

• Sale Badge Mode: you can choose display as SALE text or percent label for Sale Product.
• Product Attribute: show Product Attribute (Apply for Color, Image & Label attribute type in Products -> Attributes)
• Quick View Button: set Enable/Disable Quick View button
• Add To Wishlist Button: set Enable/Disable Wishlist button
• Add To Compare Button: set Enable/Disable Add To Compare button

4.7.1. Archive Product (Shop)

Archive Product

• Product Per Page: set products per page for Shop page.
• Products per row ( Columns ): you can set Products per row in Appearance -> Customize -> WooCommerce ( Closest Additional CSS ) -> Product Catalog.

Layout Options

• Archive Product layout: set Shop page layout with 3 options Full Width, Container or Large Container.
• Hidden Sidebar: use Hidden Sidebar (click button to show)
• Hidden Sidebar Style: use Fixed or Toggle style
• Archive Product Sidebar: set Shop sidebar None, Left or Right or 2 Sidebars.
• Archive Product Left or Right Sidebar: set left or right sidebar for Shop page.
• Archive Product Hidden Sidebar: set sidebar for Hidden Sidebar style
• Archive Product Style: set Product Hover style

Page Title Options

• Archive Title: set page title for Shop page On/Off.
• Archive Product Title Layout: set layout style for Shop page title with 3 options Full Width, Container or Large Container.
• Archive Product Title Content Layout: set layout style for Shop page title content with 3 options Full Width, Container or Large Container.
• Archive Product Title Background: set background image for Shop page title.
• Heading: set breadcrumbs in Shop page On/Off.
• Breadcrumbs: set breadcrumbs in Shop page On/Off.

4.7.2. Single Product

Layout Options

• Single Product Layout: set Single Product page layout with 3 options Full Width, Container or Large Container.
• Single Product Style: set single product style layout
• Product Thumbnail Columns: set single Product thumbnail columns (number)
• Single Product Sidebar: set Single Product sidebar None, Left or Right or 2 Sidebars.
• Sticky Product Images: sticky Product Images when scroll
• Sticky Add To Cart: Sticky Add To Cart button when scroll on Desktop. This option can be override by Page Metabox of each Product and will hide on Mobile Devices.
• Navigation: Product Next, Previous products navigation.

Page Title Options

• Single Title: set title for single product page On/Off.
• Single Product Title Layout: set single product title layout with 3 options Full Width, Container or Large Container.
• Single Product Title Content Layout: set single product title content layout with 3 options Full Width, Container or Large Container.
• Single Product Title Background: set background image for single product title.
• Heading: set breadcrumbs in single product On/Off.
• Breadcrumbs: set breadcrumbs in single product On/Off.

Related Product Options

• Related Product Number: set number of related product you want to show on single product page.
• Related Product Display Columns: set number of columns to display related product.

Bottom toolbar for quick access on Mobile Devices. Below is step to step to create and show it.

Step 1: Go to Footer Builder and create a post with name Bottom Toolbar.

Step 2: Edit Bottom Toolbar has just created with Elementor and set layout Align Items is Center:

Step 3: Search keyword toolbar to find what elements you can use here

Step 4: Set width of container on Mobile

Step 5: Go to Theme Options -> Bottom Toolbar and Show Bottom Toolbar and select Bottom Toolbar template you have just created

Social Settings tab allows you to set Social Sharing settings

Newsletter Popup tab allows you create a Newsletter promo Popup if you want to show something special to customer as Sale Off,…

• Show Popup: set popup On/Off.
• Popup Width: set the width of popup.
• Popup Height: set the height of popup.
• Popup Effect: set popup display effect.
• Popup Delay: set delay time of the popup (calculate by mili seconds).
• Popup Content: set the content for popup. You can insert shortcode here. Please not you should change Editor mode to Text before Save.
• Popup Background: set background image for popup.

As describe above. You can get our demo by one-click demo install. Please read more on our forum to make any working fine.

How to import Demo Data Automatic in HaruTheme

Maintenance Mode tab allows you close website for maintenance,…

• Maintenance Mode: set Maintenance mode On/Off.
• Maintenance title: set title of maintenance page.
• Maintenance Background: set background of maintenance page.
• Online Time: our site will auto open after this time. (set time to Open site)
• Timezone: set timezone of your site.
• Maintenance social profiles: set social profiles of maintenance page.

In this tab, you can import or export Theme Options data to backup or use on other website.

WordPress menu is very clean and easy to use. However you need to know some basic settings.

Assign Menu

• Go to Appearance >> Menus then select menu you want to Edit or you can create new menu.
• Find Menu Settings at the bottom of page the select location for menu.

Electricom supports 2+ menu location:

• Primary Menu: the main menu use in the Header.
• Mobile Menu: the menu use to display on mobile device.

Our theme has support mega menu system.  The first you need to know about create a new menu.

• Step 1: Go to Appearance >> Menus.
• Step 2: Click Create A New Menu link. Enter menu name then click Create Menu.
• Step 3: To add menu item, select what you want to add to menu on left-side then click Add to Menu.
• Step 4: To create a simple dropdown menu you can drag and drop menu item. With sub menu you can read more description below to know about menu item level.
• Step 5: After setting menu, you go bottom of the page and assign menu Location then Save Menu.

Our theme supports  Mega Menu build with Elementor. If you can’t edit MegaMenu Builder with Elementor please follow this topic: https://harutheme.com/forums/topic/how-to-edit-footer-header-megamenu-builders-with-elementor/

5.2.1. Create MegaMenu Builders

Go to MegaMenu Builder to create new Mega Menu content:

Search Elements with keyword menu to find what Elements can use here:

Please note some Elements doesn’t display fine in Preview Mode but they are working fine in Front-end Mode.

5.2.2. Setup Mega Menu

To setup Mega Menu, you click on menu item to open Menu Item level 0

Select Megamenu Builder to setup Mega Menu (default is Disabled). You also can set icon, width, label,… of menu item.

Here is the result

• Step 1: Navigate to Pages in your admin sidebar and click Add New option.
• Step 2: Input a new name for your page.
• Step 3: setup page settings in the right Sidebar.
• Step 4: scroll down to Page Metabox to setup other settings for this page then click Publish.

Our theme have many Page Metabox settings to help you display almost what you want. Please note if you don’t set anything (Default option) in Page Metabox it will inherit from Theme Options.

6.2.1. Layout

• Layout Style: set layout style for page with 4 options Default, Boxed, Wide or Float.
• Page Layout: set page layout (with header you can set in header tab settings) with 4 options Default, Full Width, Container or Large Container.
• Page Sidebar: set sidebar style for page.
• Left Sidebar: set left sidebar for page if sidebar style is Left Sidebar.
• Right Sidebar: set right sidebar for page if sidebar style is Right Sidebar.
• Class Extra: set page class with special page.

6.2.2. Header

• Header Layout: set Header layout style for page or use Default.
• Header Transparent: set Header Transparent. Example Header over Slideshow on Homepage, Page Title,…
• Header Sticky: set Header Sticky
• Header Sticky Element: set Element when Header Sticky, you can choose sticky Header or only Menu (section include Haru Nav Menu widget – or other widget Menu in Elementor).

6.2.3. Footer

• Footer Layout: set Footer display for this page

6.2.4. Title

• Page Title: set page title On/Off.
• Page Title Layout: set page title layout with 4 options: Default, Full Width, Container or Large Container.
• Page Title Content Layout: set page title content layout with 4 options: Default, Full Width, Container or Large Container.
• Page Title Background: Select a background image for page title.
• Title Heading custom: set page title Heading custom
• Sub Title custom: set page sub title custom
• Breadcrumbs: set breadcrumbs of Page On/Off .

No matter which method you using to display your blog posts, the first thing you need to do is create the blog posts.

See below for information on how to create blog posts.:

• Step 1: Navigate to Posts -> Add New in your WordPress admin sidebar.
• Step 2: Create a title, and insert your post content in the editing field.
• Step 3: Add Categories from the right side. To assign it to the post, check the box next to the Category name.
• Step 4: Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.
• Step 5: For a single image, click the first Featured Image Box, select an image and click the Set Featured Image button.
• Step 6: Once you are finished, click Publish to save the post.

Here is the screenshot that shows the various areas of the blog post page.

Our theme supports 7 post formats that allows you to choose the specific format for your blog. You can choose different types of post to make your blog be more interesting. Follow below steps to see the description of Post Formats and Global setting of Post.

Same as Page Metabox box of Page, Post have similar Page Metabox. You can read Page Metabox section above.

Our theme uses the most powerful’s page builder to help users create sites with ease.

Add content using Elementor (Create new or edit page).

We made tons of Elementor Widgets to use in our theme to help you make your page. You can search with prefix Haru

Each widget will have settings to help you get layout and display the content you want.

Below is the list of available widgets in our theme:

8.1. Header Widgets

These widgets style display the best in the Header. However they are still display fine on other Position.

8.1.1. Haru Header Logo

This widget to display Header Logo

8.1.2. Haru Nav Menu

This widget to display Primary Menu of site

8.1.3. Haru Header Contact

This widget display Contact in the Header

8.1.4. Haru Woo Cart

This widget display WooCommerce cart in the Header

8.2. Footer Widgets

These widgets style display the best in Footer. However they are still display fine on other Position.

8.2.1. Haru Footer Logo

This widget to display Footer Logo

8.2.2. Haru Footer Link

This widget to display Link list at Footer

8.2.3. Haru Footer Text

This widget to display some special Text at Footer

8.2.4. Haru Contact

This widget to display Contact at Footer

8.2.5. Haru Social

This widget to display Social at Footer

8.2.6.

8.3. Haru Widgets

These widgets style display the best at every Position of site.

8.3.1. Haru Heading

This widget to display Heading with Pre Style

8.3.2. Haru Video

This widget to display video with Pre Style

8.3.3. Haru Counter

This widget to display Counter with Pre Style

8.3.4. Haru Button

This widget to display Button with Pre Style

8.3.5. Haru Post Featured

This widget to display Posts with Pre Style

8.3.6. Haru Tabs

This widget to display Tab with Pre Style

8.3.7. Haru Image Gallery

This widget to display Gallery with Pre Style

8.3.8. Haru Logo Showcase

This widget to display Logo Showcase with Pre Style

8.3.9. Haru Testimonial

This widget to display Testimonial with Pre Style

8.3.10. Haru Icon Box

This widget to display Icon Box with Pre Style

8.3.11. Haru Accordion

This widget to display Accordion with Pre Style

8.3.12. Haru Google Maps

This widget to display Google Maps with Pre Style

8.3.13. Haru Search Form

This widget to display Search Form with Pre Style

8.3.14. Haru Search Form

This widget to display Search Form with Pre Style

8.3.15. Haru Menu Post

This widget to display Mega Menu Posts with Pre Style

8.3.16. Haru Text Scroll

This widget to display Text Scroll with Pre Style

8.3.17. Haru Timeline

This widget to display Timeline with Pre Style

8.3.18.

Our theme use Elementor to build Header, you need go to Header Builders to create new Header. Please make sure you follow this topic to edit Header by Elementor: https://harutheme.com/forums/topic/how-to-edit-footer-header-megamenu-builders-with-elementor/

Please note when build Header please don’t use margin top for Section because it can cause Spacing issue when Sticky Menu or Sticky Header.

Then go to Theme Options -> Header to set Header for site:

Go to Mega Menu Builder and create new Mega Menu Popup:

Set section class for each Section with class: section-popup-menu at Tab Advanced

then use this template with widget Haru Nav Menu Popup

Go to Mega Menu Builder and create new Mega Menu Canvas:

Set section class for each Section with class: section-sidebar-menu at Tab Advanced

then use this template with widget Haru Nav Menu Popup

Create and set Header is Header Sidebar layout

Create a Section for Header on Desktop and a Section for Header on Mobile (or Tablet depend on settings when you create)

Create a Section for Header on Mobile:

Create a Section for Header on Desktop

and setup as screenshots below

Rotate Elements of Header:

Rotate Header Top (Logo) with class header-rotate–top

Rotate Header Bottom with class header-rotate–bottom

Our theme use Elementor to build Footer, you need go to Footer Builders to create new Footer. Please make sure you follow this topic to edit Footer by Elementor: https://harutheme.com/forums/topic/how-to-edit-footer-header-megamenu-builders-with-elementor/

Then go to Theme Options -> Footer to set Footer for site:

11.1. Revolution Slider

• Product main page: https://1.envato.market/YArzK
• Document: https://www.sliderrevolution.com/manual/how-to-use-this-manual/

11.2. Elementor

• Product main page (Free version): https://wordpress.org/plugins/elementor/
• Document: https://elementor.com/help/how-to-use-elementor/

11.3. WooCommerce

• Product main page: https://wordpress.org/plugins/woocommerce/
• Document: https://woocommerce.com/documentation/
• https://woocommerce.com/document/managing-product-taxonomies/
• https://woocommerce.com/document/products-by-attributes-variations/

Our theme is a WPML – compatible and multi language ready theme. We suggest 2 ways to translate our theme.

1. Use Loco Translate plugin
2. Manual translate using POEdit

Use Loco Translate you can follow this topic tutorial: https://harutheme.com/forums/topic/how-to-translate-wordpress-theme-or-plugin/

Step and step to translate we will have a post on forum asap.

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this documentation, please feel free to us via email harutheme@gmail.com or admin@harutheme.com. Or create topic here: https://harutheme.com. Thanks so much.

14.1. Why layout of my Header or Footer break on mobile?

Because Elementor doesn’t auto generate CSS file for it.

You can fix it by go to Elementor -> Tools then Regenerate CSS & Data & Sync Library

14.2. Why my Content Builder layout break?

Similar 14.1, because Elementor doesn’t auto generate CSS file for it.

You can fix it by go to Elementor -> Tools then Regenerate CSS & Data & Sync Library

14.3. Single Product Images Gallery not change when change attribute?

Please follow this topic: https://harutheme.com/forums/topic/products-with-many-variations-not-change-images-when-change-attribute/

14.4. Why my Bottom Toolbar layout break?

Similar 18.1, because Elementor doesn’t auto generate CSS file for it.

You can fix it by go to Elementor -> Tools then Regenerate CSS & Data & Sync Library

14.5. Why my WooCommerce Product Description doesn’t apply changes?

If you are editing products imported from the demo, tt uses Elementor to edit. So you need to allow edit it with Elementor in Elementor -> Settings -> Post Types (checked on Product checkbox).

If you create a new product and don’t use Elementor to edit the product description will change as content in the Editor.

14.6. Why my Theme Options settings doesn’t apply changes?

Please note some settings in Theme Options can be override by settings in Page Metabox. These settings already have a description about it. Please read more in the section 4 of this document.

14.7. How to increase website page speed?

Please follow this topic: https://harutheme.com/forums/topic/how-to-increase-speed-of-you-website-using-cms-wordpress/

14.8. How to make your SVG images standard and can change color?

Please follow this topic: https://harutheme.com/forums/topic/how-to-make-svg-images-standard-and-can-change-color/

14.9. Why Product Categories don’t show in Appearance -> Menus?

Please click Screen Options at the Top Right of your admin screen and make sure Product categories is checked.

14.10. How to change layout of Shop (Archive Product) page?

Currently our theme use mixed options from Theme Options -> WooCommerce -> Archive Product (Shop) and in Appearance -> Customize -> WooCommerce ( Closest Additional CSS )

14.11. How to change WooCommerce product images size?

You can change product images size of WooCommerce in Appearance -> Customize -> WooCommerce ( Closest Additional CSS ) -> Product Images

14.12. How to enable Share URL on the Wishlist page?

You need to install & active YITH WooCommerce Wishlist plugin then go to YITH -> Wishlist -> Wishlist page options -> Share on social media and check on the Show “Share URL” field on wishlist page option.

14.13. Why Mini Cart layout is break and not same as demo ?

If you are using Elementor Pro, it can override layout of WooCommerce and causes Mini Cart break. In this case you need to go to Elementor -> Settings -> Integrations -> WooCommerce -> Mini Cart Template and set it to Disable.

18.14. How to import all Homepages demo?

Import all Homepages demo at once time can cause your web server timeout. So please follow this topic to resolve the issue: https://harutheme.com/forums/topic/how-to-import-all-homepages-to-mix-sections-of-pages-in-harutheme/

18.15. How to change Single Product Gallery Thumbnail size?

Please go to wp-content/themes/teespace/ then open file functions.php then add this code:

14.17. How to disable Variation Swatches from HaruTheme then use another Variation Swatches plugin?

You can use another Variation Swatches plugin like https://wordpress.org/plugins/woo-variation-swatches/ and disable our default Swatches by following this topic:

How to disable Product Variation Swatches in HaruTheme

14.18. How to ?