Nitro Toolkit is a built-in plugin that is made by WooRockets team for Nitro theme. This plugin allows you to make the most of your experience with Nitro by bringing advanced customization functionalities. We highly recommend you to activate Nitro Toolkit.

 

What Are Included In Nitro Toolkit?

There are 3 functionalities in Nitro Toolkit:

• Nitro Elements
• Nitro Gallery
• Header Builder

Please click on each functionality to see all settings for that functionality.

Open WR Live Search

Product Live Search is a built-in plugin for Nitro theme package. This plugin allows you to instantly show matched search queries when typing words into the search box. By using this plugin, people don’t have to finish a completed word, or enter the full search result page to find what matched what they has typed so far.
To open Product Live Search, click on Dashboard > Settings > WR Live Search.

Display Live Search

There are 2 ways to display a Live Search box: using shortcode and use “search” element on Header Builder.

Using shortcode

By using shortcode, you can add Live Search anywhere you like.

To add a Live Search on a specific page, use this shortcode:

 

You can also use this PHP function to display search bar:

 

This is how Product Live Search appears on your specific page.

 

Please notice that unlike PHP function, the shortcode is changed due to changes in live search configurations. Therefore, if you choose using shortcode, you have to finish configuring live search options, then copy the generate shortcode to where you want to display live search bar.

 

Using “search” element on Header Builder

Another way to display shortcode is enabling “Live Search” on your default header on Header Builder. Enabling “Live Search” for your default header via Header Builder also means you can also display Product Live Search on all your pages (except those which don’t use global page settings).

Please notice that if you turn off global page settings for a page, you can no longer display Live Search on that page via Header Builder.

Go to Dashboard > Nitro > Header Builder, then choose your default header.

Then click on current “Search” element, or drag to add a “Search” element (if your default header hasn’t had “Search” element yet). On “General” tab, tick the checkbox “live search” to turn on live search for this “Search” element. Then you can see all settings for Product Live Search here.

 

Configure WR Live Search

There are 2 ways to configure Product Live Search: via WR Live Search plugin settings, and via “search” element on Header Builder.

Via WR Live Search plugin settings

The first way to customize Product Live search is by getting into plugin settings page of this plugin at Dashboard > Settings > Live Search.

These are all settings for Product Live Search on Product Live Search plugin settings. Here you can see that there are 2 main areas: shortcode/PHP function, and customization fields.

Save and update settings

There are 2 ways to update settings for live search bar: using shortcode and PHP function. You can see this 2 types of code on the top of settings screen. To display live search bar, you just have to choose one type of code, either shortcode or PHP function.

Using PHP function

By using PHP function, you don’t have to update code whenever there are changes made on settings. To add live search bar with PHP function, open your function.php file on your site database, then paste the PHP function code to where you want to display your live search bar.

 

Using shortcode

By using this shortcode, you will have to update shortcode whenever there are changes made on settings.
All these settings will be autogenerated on the shortcode on the top of this screen.

To save any changes, click on “Save Changes” at the bottom, a new shortcode will be generated.

An alternative way to help you add live search bar by shortcode without changing new codes upon update is by using the dynamic shortcode:

Customization fields

 

Here you can customize fields for the Live Search bar.

Options:

• Placeholder: enter a search term suggestion
• Show button: show or hide search button
• Show category list: show a drop-down product category list
• Show suggestion: display or hide search term suggestion
• Minimum number of characters: enter the minimum number of characters for a search term
• Maximum number of results: enter the maximum number of characters for a search term
• Search in: choose data range for live search

Share For Discounts is a WooRockets’s built-in plugin for Nitro theme. This plugin allows you to setup content sharing on social networks to get discounts. When enabled, anyone who clicks on these sharing buttons will instantly receive a discount coupon.

 

Open Share For Discounts

To open Share For Discounts, click on WooCommerce > Settings, then move to Share For Discounts tab.

Setup Sharing For Discounts

There are 2 main configuration tabs: Sharing and Discount.

Sharing

There are 3 social channels for sharing your content: Facebook, Twitter, and Google+.

To enable/disable sharing for a social channel, tick/untick the “Enable?” checkbox. Then you can see all settings for that channel. Here I enable sharing for all channels.

Now let’s get into more details on how settings for each channel work.

 

Facebook Sharing

Step 1: register a web app on Facebook App first, then copy the App ID to your Facebook Sharing screen.

To create a new Facebook App, login to your Facebook account and click here.

Then follow below steps.

 

Step 2: paste the App ID here.

Step 3: choose a sharing button type. There are 3 types of Facebook sharing button:

• Like and share Buttons
• Like button Only
• Share button only

 

Twitter Sharing

Enter your Twitter username to include your Twitter username on all shared tweets.

Google+ Sharing

There are 3 Google+ sharing button types to choose from:

• +1 and share buttons
• +1 button only
• Share button only

Discount

 

Types of discounts

There are 2 types of discount:

• Product Discount
• Cart Discount

For both 2 types of discount, you can use discount Coupon to generate and mange discount coupons.
Product Discount
Setup share for discounts for a specific product

With product discount, you can:

• Setup and show share for discount for a specific product
• Hide or show share for discount buttons for all single product pages on your site that are displaying share for discount buttons

Setup share for discounts for a specific product

Here is how we can enable and setup product discount.

To hide product discount on a product page, just uncheck “enable?” box.

There are 2 types of product discount:

• Individual: applies discount for the user who like/share the product only.
• Mass: reduces the product price by the number of like/share received multiplying with the amount defined below.

To manage those who have used product discounts, click here.

Show or hide product discounts for all products

To show or hide product discounts for all products on your site, just open Discounts tab. Then check or uncheck the “Enable?” box.

Cart Discount
When enabled, the discount coupons will be applied for the whole shopping cart. In other words, total value of the shopping cart will be directly reduced based on the value of the discount coupon.

Options:

• Enable? Enable cart discount
• Discount Amount: Choose discount amount (percentage/currency)
• Link to Share: insert shared link

To manage those who have used product discounts, click here.
Discount Coupon
For both 2 types of discount, you can enable and setup discount coupons.

Step 1: enable discount coupon

The discount coupon will be automatically generated each time a customer completes a sharing action.

Step 2: configure discount coupon
To run discount coupon generator, you have to configure:

• Discount amount
• Link to share

Discount amount

Enter your amount for discount. There are 4 types of amount for discount:

• Cart Discount: discount x for the total cost your order on shopping cart
• Cart % Discount: discount x percentage for total cost of your order on shopping cart
• Product Discount: discount x for that product only
• Product % Discount: discount x percentage for that product only

 

Link to share

Enter the link that you want your customers to share to get discount coupon.

To manage those who have used product discounts, click here.

Manage share for discounts coupons

You can manage discount coupons to know how many discount coupons have been generated via share for discounts button. Click here to learn how to do it using default WooCommerce settings.

 

Display Share For Discount

After configuring Share For Discount settings, make sure that the social sharing buttons display well on your site.

You can display social sharing buttons in 3 following ways:

• On shopping cart
• On product detail
• On anywhere you want

On shopping cart

After enabling and configuring cart discount, you will see social sharing buttons on shopping cart.

On product detail

After enabling and configuring product discount, you will see social sharing buttons on product detail page.

 

On anywhere you want

To display share for discount on anywhere you like on your site, open Discount tab on Share For Discount settings, then scroll down to find the shortcode for this plugin.

Or copy this below shortcode:

 

You can add this shortcode anywhere you want to display share for discount buttons.

Nitro Gallery is a built-in plugin for Nitro theme. The plugin offers you multiple gallery layout options and customization to create the best display for your products.

Open Nitro Gallery

Go to Dashboard > Nitro Gallery, then you can add new gallery, configure current ones, or edit gallery categories and tags.

Add new and edit Nitro Gallery

You can either go to Nitro Gallery > Add New, or click “Add New” tab on Nitro Gallery list:

You can add pictures from Media Library/upload from computer or source from an external URL

You can set a featured image to display your Gallery in a Gallery Category:

Category and Tag

Galleries can be part of a category and have tags:

Category

Here’s a Gallery Category on you live site, each Gallery is displayed by a featured image.

To add or edit a new Gallery Category, whether go to Dashboard > Nitro Gallery > Categories, or click on Add New Category in Add New Gallery tab.

Options:

• Name: Gallery’s name
• Slug: a name of gallery’s category on page’s URL. You can leave this field as blank and it’ll be auto-generated
• Parent: pick up parent category
• Description: add a description for your gallery’s category

Tag

Similarly, you can add new or edit existing tags for your Gallery. Go to Dashboard > Nitro Gallery > Tags.

Options:

• Name: Tag’s name
• Slug: a name of gallery’s tag on page’s URL. You can leave this field as blank and it’ll be auto-generated
• Parent: pick up parent tag
• Description: add a description for your gallery’s tag

In-Stock Alert is a built-in plugin for Nitro theme. This plugin allows you to send notification via email to customers who are interested in buying a specific product but it is currently out of stock. By leaving their email on the subscription form, they will received an email notification when that product is in-stock again on your online shop.

Open In-Stock Alert Settings

To open In-Stock Alert, go to Dashboard > In Stock Alert > Settings.

Options:

• Mailchimp integration: connect your Mailchimp account, import all email data from your site into Mailchimp
• Notification settings: setup email notification template
• Frontend settings: setup in-stock alert popup and subscription form

Mailchimp integration

To use Mailchimp integration, check the “enable” checkbox.

Notification settings

Here you can customize email notification template.

 

Fields

• From name: enter your From name
• From email: enter your From email address
• Email subject: enter the subject for your email
• Email message: enter the main content for your email notification

Frontend settings

Here you can customize in-stock alert button and popup form.

In-stock alert button

Enter to change the text for in-stock alert button.

Popup form

Popup form appears when you click on in-stock alert button.

On settings for this plugin, you can customize popup title and message.

Then you can customize subscription form message on the popup. You can also show or hide name field.

Manage In-stock subscriptions

To manage in-stock subscriptions, open Dashboard > In Stock Alert > All Subscriptions.

Here you can see all in stock alert subscriptions, including name, email, subscribed product, and subscription date.
You can also export your subscription database in .CSV format, or filter subscription list based on product name or subscription date.

Product Custom Attributes is a built-in plugin for Nitro theme package. This plugin allows you to make visual variations on your single product page. Let’s see how can we setup a variable product with this plugin.

Open Product Custom Attributes

To open Product Custom Attributes, click on Dashboard > Products > Attributes.

Below are all settings for Product Custom Attributes. Here you can add new attributes, or manage custom attributes.

There are 3 steps to setup a variable product with many attributes.

• Add a new attribute
• Add new terms for that attribute
• Add a new product including above attributes (with each attribute as a variation)

Add/manage custom attributes

Add an attribute

Here is a product using Product Custom Attributes.

To add a new attribute, open Product Custom Attributes, then fill in below fields:

Name: enter attribute’s name. This name will be shown on your live site. Please notice that you cannot change attribute name later.

• Slug: insert a slug name for the attribute. You can also leave this field blank to auto-generate slug name
• Enable Archives: turn this on if you want to show the attribute on filtered product list for that attribute. You can see which attribute is marked as achieved on attribute list.

• Types of attributes: excluding default “text” attribute, there are 3 types of custom attributes:
  • Text label
  • Color picker
  • Image select

• Default sort order: pickup a sorting order for attributes
  • Custom ordering: with this sorting type, you can drag and drop terms in any order you want.
  • Name: with this sorting type, all terms are sorted based on alphabetical order
  • Name (numeric): this sorting type is for numbers only. By choosing Name (numeric), you can sort all terms (numbers) based on number order.
  • Term ID: each term goes with an unique ID. By choosing this sorting type, you can sort all terms based on their IDs

Manage attributes

To view your attribute, back to Product Custom Attributes screen by clicking Dashboard > Plugins > Attributes. Here you can see all attributes that you have created, with their details on including Slug, Type, Order by, and Terms.

Terms

An attribute consists of many terms. Each term displays a specific value for your product.

Let’s say you have 4 color variations for a tote bag: “black”, “white”, “blue”, “red”.
So “color” is an attribute for the tote bag, and “black, “white, “blue”, “red” are 4 terms for the attributes “color”.

You can add, edit, or delete any term you want by clicking on “configure terms” button.

 

Add a term

First, choose an attribute that you want to add that term. Here I choose “Color” attribute. Then you’ll see a screen to add new terms.

Please notice that each type of attribute has a different “add a term” screen. Let’s see how we can add a term for a specific type of attribute:

• Text label
• Color
• Image

Text label

To add a new term with text label attribute, you have to fill these fields. Here I want to add “36” term to “size” attribute.

• Name: This is your term name. Choose a name that best matches with your term content. Here I named this term “36”.
• Slug: just like attribute, a slug will create a URL-friendly text for your variation’s URL.
• Parent: create a new term under an existing term
• Description: description text for you term. Use this field to insert note about your term. This description will not be shown on your live site.
• Label: fill in the text that you want to display on your variation. Here I want to display the text “36” on Size variation, so I enter “36”.
  Tooltip: this text will appear when you hover on that term on live product page. In this case, I entered “36” for “36” term.

Color picker

To add a new term, you have to fill in these following fields. Here I want to add “blue” term to “color” attribute.

• Name: This is your term name. Choose a name that best matches with your term content. Here I named this term “blue”.
• Slug: just like attribute, a slug will create a URL-friendly text for your variations URL.
• Description: description text for you term. Use this field to insert note about your term. This description will not be shown on your live site.
• Color: pick a color for your term. You can choose a color from the color palette, or enter your custom color code. Here I choose blue.
• Product gallery images: add multiple product gallery images for each color variation

Image select
People usually use image select to display variations for a product that has patterns. In this case, I want to display “polka dots” variation.

• Name: This is your term name. Choose a name that best matches with your term content. Here I named this term “polka dots”.
• Slug: enter attribute for term
• Parent: pick up a parent atribute (optional)
• Description: description text for your term. Use this field to insert note about your term. This description will not be shown on your live site.
• Image: select an image for your term. You can upload a new image, or choose an image from your Image Library.
• Tooltip: this guide text will appear when you hover on that term on live product page. In this case, I entered “polka dots” for “polka dots” term.
• Product gallery images: add multiple product gallery images for each image variation

 

Manage terms

Here you can view terms information, including name, description, slug, as well as number of products that go with each term. You can also add, edit, or delete any term you like.

If your default sort type for the attribute is “custom ordering”, you can even drag and drop to sort any term in any order you want.

Use custom attributes to make product variations

To display variations on your live product page, you have to configure custom attributes for each product that you want to display variations.

Step 1: Choose a product

First, you have to choose a product to add variations. Click on Dashboard > Products, then find a product that you want to configure variations.

Click on product name, or “Edit” to edit that product.

Step 2: Change product data

To add variations for this product, you have to change product data from “simple product” to “variable product”.

On product editor page, scroll down and find “Product Data”, choose “Variable product”.

 

Step 3: Add attributes

Expand the attribute.

On “Value(s)” field, add terms for the attribute that you want to use for variation. You can select all saved terms in that attribute, or delete your selection by clicking on “select none”. Check “visible on product page” to display your terms, and “use for variations” to confirm using all chosen terms for variations. Finally, clicking on “Add new” to save your choice.

Add variations

Step 1: To add variations from selected terms, click on “Variations” tab, then choose “Create variations from all attributes”.

 

Step 2: A popup window will appear to confirm your selection. Click on “OK” to add variations.

Step 3: Now you can see a list of variations that you have created. Total number of variations displays at the top of your variation list. Here I have 74 variations.

 

Delete a variation/multiple variations

You can delete a variation, or all variations.

 

Delete a single variation

To delete a variation, click on “Remove”.

 

Delete all variations

To delete all variations, on “Product Data” dropdown menu, choose “Delete all variations”.

 

Add variation’s information

Enter information for the variation. You can also upload the image for each variation.

Note:

In order to get product price displayed, you must enter “regular price” for all variations (even if all variations are the same price).Choose default variation

 

Product gallery images

For image select attribute and color picker attribute, you can upload product gallery images for each product attribute.

 

 

Choose default variation

By default, your variations’ information, especially price, will not be displayed on your product page if customer hasn’t chosen a variation.

To avoid confusing, you need to pick up a default product variation. Choose your default variation from the dropdown menus on “Default Form Values”.

Configure WR Mapper

To open WR Mapper, go to Dashboard > WR Mapper. Then you can either add a new product map, or manage your existing product maps by clicking on appropriate tabs.

Add new product map

There are 2 ways to add a new product map.

You can either going to Dashboard > WR Mapper > Add New.

or click on “Add New” on WR Mapper list.

Then you can see the initial screen to add a product map.

This is a product map sample.

To set up a map like this, you have to configure

• Map title
• Mapping image
• Pins
• Type of content
• Icon settings
• Popup settings

Map title

Enter the name for your title here. You can use this name to manage your product maps.

General settings

General settings include all options to styling the overall look of your product map.

Click this icon to open general settings.

Here you can customize styles for all elements of your product map, including popup and mapping image.

 

Mapping image

Mapping image is used to add your pins. There is only one mapping image for each product map.

You can upload or pick an image for your mapping image here.

Then you can see your image on the mapping builder.

To change mapping image, click on “Change Image” button.

Pin

A pin is a special button that will show a content popup on mouse click.

 

To add a new pin, click on a position that you want to add a new pin.

 

You can also delete, move duplicate pins.

 

 

Please notice that you can only add pins when already having mapping image. If not yet, you have to upload or pick up a mapping image first. And you can only add only one popup for a single pin.

After adding a new pin, you have to start adding content and settings for the pin to get it displayed on your product map.

Types of content

There are 4 types of content to a pin that you can use in WR Mapper:

• WooCommerce
• Image
• Text
• Link

To pick up a content type, click on the pin that you want to add content, then you can choose a content type on General tab.

Note: you can only see settings for content type after adding a new pin. If not yet, you have to add a new pin first.

 

WooCommerce

With this content type, you can add a product popup to your pin. This popup includes “Add To Cart” button to let your customers purchase products included on product map.

 

Below are all settings for a WooCommerce popup.

 

Here you can select a product to show on popup. You can show or hide product thumbnail, description, and rating.

Please notice that you can only choose only one product for a single pin. If you want to add another product, please create a new pin.

 

Image

With this content type, you can add an image popup to your pin.

Below are all settings for an image popup.

Here you can enter your popup title, select an image, or insert link for the image. You can also choose link target (either redirect to another web page, or open link in a new tab).

Please notice that you can only choose only one image for a single pin. If you want to add another image please create a new pin.

Text

With this content type, you can add a text popup to your pin.

 

 

Below are all settings for a text popup.

Here you can enter popup title, as well as insert text content for the popup.

Link

Similarly, you can add a link to your popup

Icon settings

To open icon settings, open Icon Settings tab on Pin Settings popup window. Here you can customize all settings for the current pin.

You can either choose a pin type (icon or image), or customize color, size, border, etc. for your pin.

Popup settings

To open popup settings, open Popup Settings tab on Pin Settings popup window.

Here you can change width and height for your popup. You can also change the position for your popup.

Manage all product map items

To manage all product map items, go to Dashboard > WR Mapper > All Items. Then you can see all product maps that you have created before.

 

In this section, you can see all details for your maps, including number of pins, mapping image, map shortcode, and published date. You can also add a new product map, filter map list based on published date, or delete one or multiple maps.

Display product map

You can easily display product map anywhere you like on your site by using shortcode.

There are 2 ways to get the shortcode for your map, either on mapping builder, or on product map management.

On mapping builder

On mapping builder screen for a specific product map, click on Copy Shortcode button to add the shortcode to clipboard.

On product map management

On product map management, copy the shortcode that you want to pick up.

Note: you can only generate shortcode after successfully saving your map. And this shortcode is permanently generated, which means that you don’t have to re-copy the shortcode after saving further modifications for your product map.