• Theme Version: 1.0.0
• Created: 16 Oct 2023
• Latest update: 16 Oct 2023

Thank you for purchasing our theme. In this document, we provide all kinds of good information with all the details you need to use our theme. We hope you have fun and enjoy working with our theme. If you need more help, please feel free to open a ticket on our support center.

If you are not familiar with WordPress, please get accustomed with it before proceeding to using our theme. Here are some links that will help you to become more confident with WordPress:

• First Steps with WordPress: https://wordpress.org/support/article/first-steps-with-wordpress-classic/
• WordPress Optimization: https://wordpress.org/support/article/optimization/
• We recommend that you should use CDN if you sell products on many countries

Requirements

To run WordPress your host just needs a couple of things:

• PHP version 7.4 or greater
• MySQL version 5.7 or greater

Compatibility

Our theme is compatible with the following browsers:

• Chrome
• Firefox
• Safari
• Microsoft Edge

WordPress Core

You download and install WordPress version 6.0 or later

Theme Package

To download, you need to log into your ThemeForest account and go to your http://themeforest.net/downloads page. Locate the theme that you purchased in your Downloads list and click on the Download button

• All files & documentation: contains documentation, licenses, theme package and child theme package. So if you select this option, you need to extract the downloaded package and install the theme package inside.
• Installation WordPress file only: contains only the theme package
• License certificate & purchase code (PDF): contains your license information in a PDF file
• License certificate & purchase code (text): contains your license information in a text file

After activating the theme, you will get a notification about installing the required plugins. You go to Appearance > Install Plugins to install them.

Our theme includes the demo data to the One Click Demo Import plugin. In admin panel, you go to Appearance > Loobek Importer (You have to install and activate the ThemeSky and One Click Demo Import plugins to see this menu item). Then you select one of demos, click on the Import Demo button and the Continue & Import button (without selecting any recommended plugin from One Click Demo Import). It will take a few minutes to complete!

Manual Update

Follow the steps below to manually update the theme:

1. First, you download the new theme package from themeforest. You have to log into your themeforest account and navigate to the Downloads tab. You find the Loobek theme in your purchased themes list.
2. You delete the current theme. Don't worry about this. Your data won't be lost.
3. You upload the new theme package via WordPress or FTP software.

Automatic Update

You update the theme through the Envato Market plugin. Follow the steps below to set up this plugin:

1. Download and install the Envato Market plugin
2. You go to here https://build.envato.com/create-token/ and create a token. Get it.
3. In WordPress admin panel, you find the section called Envato Market. You enter your token code in there.

Please read this tutorial https://skygroup.ticksy.com/article/15704 to get more information.

After activating our theme, you can go to Appearance > Theme Options to configure the theme. Below will explain what you can do with Theme Options.

To manage widgets, you go to Appearance > Widgets. Just drag and drop widgets over to the sidebar.

Loobek comes with 12 custom widgets and 6 sidebars. You can also easily add the custom sidebars.

The header is probably one of the first thing that you will want to setup. It includes the logo, favicon, menu and other things. The following sections will explain how to set up and customize header.

To set up your header, you go to Appearance > Theme Options > Header tab. In there, you can choose Header Layout, configure your breadcrumb and other options.

As above mentioned, this option allows you to add some things (announce, discount, coupon code, ...) to header. It may be a plain text or custom html. Instead of adding custom html, we provide some shortcodes which match our demo layout. This help you to easily to edit content

Header Notice Shortcode

Sample Code:

Explanation:

• text_1, text_2: add your text
• icon_1, icon_2: add a font class, you can also add FontAwesome icon class. Icon will be added before the text
• button_label_1, button_label_2: add your button label
• button_url_1, button_url_2: add your button url

Result:

Coupon Shortcode

Sample Code:

Explanation:

• content: add your text. Ex: event name
• number: number of discount (fixed price or percent)
• caption: explain more about coupon
• coupon_code: add coupon code

Result:

Simple Notice

Sample Code:

Result:

If you want to customize the theme, you should create the child theme before making any changes.

You can find the sample child theme package (the loobek-child.zip file) in your downloaded file (you have to download All files & documentation).

Follow the steps below to override header template:

1. Create the templates > headers folders in the child theme folder
2. Copy the template file from the parent theme folder to the child theme folder. You should only copy layouts which you want to customize
3. Edit the template file in the child theme folder

Loobek allows you to create unlimited footer layouts. The following sections will explain how to set up a new footer.

Adding Footer Content

Loobek comes with a built-in mega menu that is perfect for displaying the large menu. You can add any widget to your menu. It also allows you to add Icon, Column and Background Image. This section will explain how to set up a new mega menu.

Loobek is built based on the Elementor plugin and powerful Page Options which help you build any kinds of pages. The following sections will explain how to create a new page.

In the page editor (You Edit Page, not Edit with Elementor), you will see the Page Options section at the bottom of editor. It will help you create many kinds of pages.

After changing Page Options, you can switch to Elementor and continue editing page content.

Some options will override the options in Theme Options. Select Default if you want to use your global settings.

• Layout Fullwidth: enable Fullwidth for your page layout. You can set Fullwidth for the whole page or part of page (Header, Main Content, Footer)
• Layout Style: select Boxed or Wide layout
• Page Layout: select Fullwidth, Left Sidebar, Right Sidebar or Left & Right Sidebar
• Left Sidebar: select a sidebar to display on the left sidebar
• Right Sidebar: select a sidebar to display on the right sidebar
• Header Layout: select one of Header Layouts
• Transparent Header: make header background transparent
• Header Text Color: text color on Transparent Header
• Primary Menu: select a different primary menu for this page
• Show Page Title: show or hide the page title. The page title is hidden on home page by default
• Show Breadcrumb: show or hide the breadcrumb. It is also hidden on home page by default
• Breadcrumb Layout: select a layout for your breadcrumb
• Breadcrumb Background Parallax: allow you to apply parallax in the breadcrumb background
• Breadcrumb Background Image: change the breadcrumb background image for this page
• Logo: allow you to display a different logo on this page
• Mobile Logo: show this logo on mobile. Use Logo if it is not set
• Sticky Logo: show this logo on the sticky header. Use Logo if it is not set
• Transparent Header Logo: show this logo on Transparent Header. Use Logo if it is not set
• Page Slider: allow you to add a slider on your page
• Page Slider Position: set Position for your slider (Before Header or Before Main Content)
• Select Revolution Slider: if you set Page Slider to Revolution Slider, you will select a slider to display
• Footer Block: select a footer block to replace the footer block which is selected in Theme Options

Setting up a home page

Loobek supports 5 post formats: Standard, Audio, Gallery, Quote and Video. They will help you easily make a microblogging website.

In the post editor, you will see the Post Options section at the bottom of editor. It will help you create different layouts for different posts. Also, if you set the post format to Video or Audio, you will input your Video or Audio URL here.

Elementor will help you manage your content at the WordPress sites and build any layout you can imagine in a few minutes without coding. You can watch tutorial video to get started.

To use Elementor, you click the Edit with Elementor button

It will change to the Elementor editor as below

Then, you choose an element, drag and drop it from the left panel to the right panel

All our elements are in the TS Elements section (with the TS prefix). Below explains about them.

• TS Mailchimp: display a Mailchimp Subscription form. You need to install the MailChimp For WordPress plugin and add a form before using this element. You get the form html at the bottom of this section. To know how to create an API Key, you can read this article. To know how to create an Audience, you can read this article.
• TS Testimonial: display testimonials in the grid or slider layout. Go to Testimonials to add new testimonial
• TS Logos: display your partner logos in the grid or slider layout. Go to Logos to add new logo
• TS Banner: display your banner. Allow you to add content on your banner
• TS Blogs: display your blogs in a grid, slider or masonry layout
• TS Team Members: display your team member. Go to Team Members to add new member.
• TS Countdown: display a countdown timer
• TS Videos: display videos
• TS Coupon: display coupon information
• TS Social Icons: display social icons
• TS Instagram: display instagram images
• TS Products: display your products in a grid or slider layout
• TS Product Deals: display products on sale with a countdown timer. You need to set Sale price dates for your discounted products
• TS Products In Category Tabs: display products in tabs. Each tab contains products of a category
• TS Products In Product Type Tabs: display products in tabs. Each tab contains products of a type (Recent, Best Selling, Top Rated, Featured)
• TS Product Brands: display product brands in a grid or slider layout
• TS Product Categories: display product categories in a grid or slider layout
• TS List Of Product Categories: display product categories in a list
• TS List Of Product Tags: display product tags in a list

Below is html of Mailchimp form which is used for our demo

This feature allows you to easily add/edit content with Elementor where Elementor does not support normally. Example: an option in Theme Options, product category description, ...

Loobek includes the popular Revolution Slider Created By ThemePunch. This slider is 100% responsive and has many amazing options. In the following sections, you will know how to add a new slider and how to show it on frontend. This is its own documentation. You can read to get more information.

Please note that you don't directly purchase the Revolution Slider plugin. So you can not update it by yourself. It is also not recommended. When it has a new version, we will be careful to test and release the new theme version. If you see the notification below, you can dismiss it.

There are three ways to use Revolution Slider

Assign a slider from the Page Options section

Add slider from Elementor editor

Use the slider shortcode

Loobek theme is fully compatible with the latest version of the WooCommerce plugin. We customized and added many features, shortcodes and widgets for this plugin. In the following sections, you will know how to install and set up the WooCommerce plugin. You can also refer WooCommerce Documentation to get more information.

After activating the WooCommerce plugin, WooCommerce will automatically create all WooCommerce pages

If you want to add WooCommerce pages manually, you can use the WooCommerce shortcodes. You can get them here

To set up WooCommerce, you go to WooCommerce > Settings in admin panel.

Product Options

With this section, you can:

• Override some options in Theme Options
• Set layout, breadcrumb background image for individual product
• Set Custom Content, Bottom Summary Content for individual product
• Add a video for product
• Add images for the 360 degree feature
• Select size chart table

Product Data

1. Adding a product on sale and a deal:
   • With the Simple Product, you select the General tab. You add a Sale Price and click the Schedule button to set up date.
   • With the Variable Product, after setting up Product Attributes in the Attributes tab, you go to the Variations tab and add New Variation. With each Variation, you also click the Schedule button next to the Sale Price field to set up date. Please note that product only displays the time of the first Variation.
2. Adding Additional Information: You go to the Shipping tab. You set value of Weight and Dimensions options. You can change unit by going to WooCommerce > Settings > Products tab
3. Enable/Disable Product Review: You go to the Advanced tab. You will see the Enable reviews option. Just check/uncheck it. If you want to remove the Reviews tab, you can disable the Enable product reviews option in WooCommerce > Settings > Products or read this article.

This feature allows you to add some products to a product. Customers can buy them together.

To add extra products:

• You add a new product or edit one of your products (It only supports the simple and variable products)
• You find the TS Extra Products tab in the Product data section
• You enter keywords and search your products (it only supports the simple product)
• You enter Heading if needed
• Save your product

You will see your extra products on frontend:

Loobek is ready to translate by using the po file. If you want to build a multilingual site, you need to use the WPML plugin. Our theme does not include the WPML plugin. It is only compatible with the WPML plugin. You have to buy a license for this plugin.

There are 2 ways to create and edit the po file

1. Use the Poedit software and refer this document
2. Use a translation plugin, such as Loco Translate plugin

In this section, you will know how to build a multilingual website by using the WPML plugin. All the information needs to get started and use it is on the WPML.org page.

Below are some reference links:

• WPML Documentation
• Translating Widgets

Installing and Setting Up the WPML plugin

You need to install a recent version of WPML, including the String Translation, Translation Management and CMS Navigation modules. After installing these plugins, you set up Languages from WPML > Languages and translate your content.

Showing language switcher dropdown style on header

You go to WPML > Languages. You enable the Custom language switchers option. Then, you click the Customize button. A popup will appear. You change the Language switcher style option to Dropdown or Dropdown click.

Translating Pages and Posts

Go to Pages and pick a page for translation. Click on the plus icon. If the page is already translated, the plus icon will be replaced by the pen icon.

WPML actually creates a new WordPress page, linked to the original one. In this new page, you can add new content as you normally do. You can also keep the original content, just translate into the new language.

Translating Categories

To translate a category, click on the language which you want to translate it and then add a new category. Make sure the new category is linked to an original category.

Translating Menus

You go to Appearance > Menus. Just add a new menu. You select the language and the original menu which links to the new menu.

WPML can synchronize menus for you. This means that WPML can generate and keep in sync menus for other languages pointing to the translated versions of the pages, posts or categories.

Translating the theme and other texts

You go to WPML > String Translation. Find the text in the list and translate it. Please make sure you check the Translation is complete checkbox after translating.

Sometimes, some texts can not be found. You need to go to WPML > Theme and Plugins localization. You scan Strings in the themes. Then, you go back to the String Translation page and find those texts again.