Arangi – Organic WooCommerce Theme

Installation

Theme Installation

 Install new theme manually via FTP Client

  1. Download the zip package of the theme in ThemeForest
  2. Unzip the theme zip package which you can find inside Theme files folder.
  3. Connect to your FTP server and navigate to the WordPress installation folder. Go to wp-content/themes/ and upload the theme folder.
  4. Open WordPress admin panel (navigate through the web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate the theme.

Install Theme via WordPress Admin Panel

  1. Open WordPress admin panel (e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar and click “Add New” button.

2. After that, click Upload Theme link, upload zip package of the theme which you can find inside Theme files folder and click Install Now to install the theme.

3. You can click Activate link or go to Appearance > Themes on admin sidebar to activate theme.

Once the theme is installed, you need to install Required Plugins to get full working features.

Plugins Installation

Install Plugins

In order to use the theme, you should install and activate all required plugins such as ArrowTheme Core, Easy Appointments, Elementor, Kirki Toolkit. All other plugins which recommended, it ups to you whether to use it or not. For example, if you don’t want to use Shop features, you can deactivate and delete all WooCommerce plugins.

First method

Install plugins via installing plugins message.After installing and activating the theme you will see the message about installing required plugins at the top of the page.

You should click Begin installing plugins link or go to Appearance > Install Plugins in order to install needed plugins for Arangi theme.

You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of them and select install then click apply. It will need to tArangie a while to install plugins successfully.

When the installation process is done, you can click Return to Required Plugins Installer and select active then check all plugins to active these plugins.

Second method

Install plugins via WordPress Admin Panel.

Besides, you can install some plugins which available in wordpress.org by navigating Plugins > Add New in admin sidebar. You should enter plugin name to search plugin and click “Install Now” to install the plugin you want. After that, click “Active” button to start using that plugin.

Third method

Install plugins manually (Via FTP)

If you want to manually install plugins, you can follow some basic steps below.

  1. Download your WordPress Plugin to your desktop and extract plugin folder if it is a zip archive.
  2. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  3. Go to Appearance > Plugins and find the newly uploaded Plugin in the list.
  4. Click Activate to activate it.

After finishing plugin install, you need to configure the plugins.

Plugin Configuration

Some plugins will need to config setting to use.

You can install some plugins such as Elementor, Kirki Toolkit which available in wordpress.org by navigating Plugins > Add New in admin sidebar. You should enter plugin name to search plugin and click “Install Now” to install the plugin you want. After that, click “Active” button to start using that plugin.

Elementor

You can see here for more details.

– After installing the Elementor, please go to Elementor > Settings. In the post types field, you should check all post type as the screenshot below.

– Easily apply a Style to every page of your site automatically using the drag and drop editor. You can apply style as the screenshot below

MailChimp for WP

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your MailChimp account by entering API Key.

After that, navigate to MailChimp for WP > Forms and create a form with the content below content

<label><strong>Newsletter</strong> <span>Subscribe </span></label>
                        <h2 class="title2">Newsletter Sign Up</h2>
                        <p class="desc-newsletter">Subscribe to our newsletter and get 10% off your first purchase </p>
                        <div class="form-mail">
                            <p class="input">
                                <input type="email" name="EMAIL" placeholder="Enter your email" required />
                            </p>
                            <p class="submit">
                                <input type="submit" value="Submit Now" />
                            </p>
                        </div>

If a MailChimp form is already existed, you can do nothing or change the form content and click Save changes to display the form in the front end.

For detail instruction, please click MailChimp for WP.

Contact Form

Go to Contact > Form and create the form you want or edit existing form.

When you want to add a form which displays the same as in our demo site, you should change the content of the contact form in Contact > Form so the form can have a similar style. After changing form content, you can adjust the text or the field to what you want.

Below is the contact form content we used in our demo site. Each form can have different style based in the content in the contact form. If you imported demo content successfully, you can skip this step.

– Contact form in Contact Us

<div class="contact-form">

[text* your-name class:your-name placeholder “Your Name”]

[email* your-email class:your-email placeholder “Your Email”]

[text* subject class:subject placeholder “Subject”]

[textarea message class:message placeholder “Your Message”]

[submit class:btn class:btn-primary class:btn-radius “Send Message”]

</div>

After that, you need to set up Mail tab. Please see this guide for more detail. Mail setting

Woocommerce

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

Plugin Advanced AJAX Product Filters

Go to BeRocket > Product Filters to access general setting of BeRocket

After that, in tab JavaScript/CSS, you must add js:

jQuery(".brw-colors  .widget-title").append('<span class="icon ti-minus"></span>');
				var $title_color = jQuery(".brw-colors  .widget-title ");
				var $div_color = jQuery(".brw-colors ul");
				$div_color.addClass('open_color');
				$title_color.click(function () {
					if ($div_color.hasClass('open_color')) {
						$div_color.removeClass('open_color');
						$div_color.addClass('remove_color');
						$title_color.append('<span class= "icon ti-minus"></span>');
						jQuery(this).find('span.icon').remove();
						jQuery(this).append('<span class= "icon ti-plus"></span>');
					}
					else {
						$div_color.removeClass('remove_color');
						$div_color.addClass('open_color');
						jQuery(this).find('span.icon').remove();
						jQuery(this).append('<span class= "icon ti-minus"></span>');
					}
				});
			jQuery(".brw-price .widget-title").append('<span class=" icon ti-minus"></span>');
				var $title_price = jQuery(".brw-price  .widget-title ");
				var $div_price = jQuery(".brw-price ul");
				$div_price.addClass('open_price');
				$title_price.click(function () {
					if ($div_price.hasClass('open_price')) {
						$div_price.removeClass('open_price');
						$div_price.addClass('remove_price');
						$title_color.append('<span class= "icon ti-minus"></span>');
						jQuery(this).find('span.icon').remove();
						jQuery(this).append('<span class= "icon ti-plus"></span>');
					}
					else {
						$div_price.removeClass('remove_price');
						$div_price.addClass('open_price');
						jQuery(this).find('span.icon').remove();
						jQuery(this).append('<span class= "icon ti-minus"></span>');
					}
				});
			jQuery('.list-view-as li.list-last a').removeClass('active');
			jQuery('.list-view-as li.four-2 a').addClass('active');

After that, in tab Selectors, you must add class:

– Change Image Sizes

You can change the product image sizes in Appearance > Customizer > Woocommerce > Product Image on admin sidebar.

– Product image in Shop page: You should change Thumbnail width

– Product image in single product page: You should change Main Image width

– Change Product Catalog

You can change the product catalog in Appearance > Customizer > Woocommerce > Product Catalog on admin sidebar.

– Enable store notice

Navigate to Appearance > Customizer > Woocommerce > Store Notice, check the box Enable store notice

You can change text in this field

– Change Checkout

You can change the product catalog in Appearance > Customizer > Woocommerce > Checkout on admin sidebar.

– Enable register in My Account page

Navigate to Woocommerce > Settings > Accounts, check the box Enable registration on the “My Account” page

Regenerate Thumbnails

Regenerate Thumbnails allows you to regenerate the thumbnails for your image attachments. This is very handy if you’ve changed any of your thumbnail dimensions (via Settings -> Media) after previously uploading images or have changed to a theme with different featured post image dimensions.

You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads.

You can see here for more details.

Please go Tools > Regen.Thumbnails and click Regenerate All Thumbnails.

Once Required Plugins are configured, you may be interested in installing sample content as our demo sites. In the next section, we will guide you about demo installation.

Demo Installation

First Method: One click import

  1. Go to Appearance > Import Demo Content
  2. Import Base Content

3. After successfully importing Base Content, you can go to Appearance > Import demo content and import Home Demos you want

Note: If this method doesn’t work with your server, you can try import all demos by the second method.

 Second Method: One click demo import plugin

Install demo with One click demo import plugin.

  1. Install and activate One Click Demo Import plugin.
  2. Select file in theme_import/content.xml folder and click “Open”.
  3. Go to Appearance > Import demo data and choose XML file placed in theme_import/content.xml

4. In Widget import section, you should select import file for widget in theme_import/widget_data.json

5. Click Import button.

6. After successfully finish above process, you should go to Setting > General and select homepage. Go to Appearance > Menu and assign menu to menu location such as Primary Menu. If you don’t know how to set menu, please see Build your site > Menu setup.

Third Method (All-in-One WP Migration)

Install demo via All-in-One WP Migration plugins.

Remember that your site database will reset entirely after using this method.

Please follow steps listed below to import demo.

– Step 1: Install and activate All-in-One WP Migration plugin to use this method.

– Step 2: Download Demo backup file.

– Step 3: Navigate to All-in-One WP Migration > Import on admin sidebar.

– Step 4: Click Import From > File button, select the demo file downloaded in step 2. After that, you should wait for few minutes and click Continue.

– Step 5: Login to the site with the account: Username: admin, Password: admin After login with this account, you can change username and password back to your credentials.

 Fourth Method (WordPress importer)

Import demo data manually.

Note: Please remember to install all needed plugins before import demo data. If you have not install plugins, please see Plugins Installation to finish that step.

  • Import widget

– Step 1: Install and activate Widget Importer & Exporter

– Step 2: Navigate to Tools > Widget Settings Import and click Select a file button.

– Step 3: Select widget file in theme_import/widget.wie folder and click “Open”.

– Step 4: Click Show Widget Settings.

– Step 5: Click Select All Active Widgets.

– Step 6: Click Import Widget Settings.

  • Import Data

– Step 1: Navigate Tools > Import and click on WordPress link. This will bring up a popup box that allows you to install the plugin directly from your website.

– Step 2: After clicking Install Now button, you should activate plugin by clicking Activate Plugin & Run Importer.

– Step 3: After that, you will be tArangien to the import page. This is where you upload the XML file which will be found in theme_import/content.xml to import data.

– Step 4: You will then be given the option to assign imported authors to exist authors on your website or create a new account for each author’s posts. Also, there is an option for you to download attachments. If you select this, WordPress will attempt to import all of the images that are attached to the posts and pages you are importing.

  • Install plugin Cusomize

Note: This will overwrite all existing option values, please proceed with caution!After extract zip package of Arangi theme. You can install and active Customizer plugin.

Copy Link