Select Page

Titan Documentation

Support

Any questions? Send an email to info@markhendriksen.com

1) Installing Titan Child Theme

Requirements

When building the website I recommend not to use any caching plugins. When finished building the website you can install them.

The Divi theme is not included in this package. To download Divi, you must have an Elegant Themes Membership.

Install Titan on a fresh WordPress installation. Installing this child theme will overwrite the existing website.

Step 1: Install Divi theme and WooCommerce

Install the Divi theme on a new WordPress installation.

Install and activate WooCommerce plugin.

Step 2: Remove WooCommerce pages

Go to Pages and remove the following pages that are auto-installed through Woocomerce.

  • Shop
  • Checkout
  • My account
  • Cart

Step 3: Upload Titan

In your WordPress dashboard navigate to Appearance > Themes and click on Add New.

Locate the titan-divi-child-theme.zip file on your computer and then click Install Now.

When the install is complete click on ‘Activate’, you will then see Titan as the active theme in your theme panel.

Step 4: Import demo content

Navigate to Titan Demo Import > Easy Demo Import and click on Import demo Content.

It can take a couple of minutes for the import to be completed.

After the import you can click on Remove Demo Content and Import Functions.

2) Assign shop, product, my account and checkout page

Go to WooCommerce > Settings > Products

Set the shop page to Shop.

Go to WooCommerce > Settings > Advanced

Likely this is already set and you are good to go otherwise assign the cart, checkout, and my account page here.

If one of the pages does not show up in the dropdown then click on save and try again.

3) Installing and setup plugins

The plugins that I used for Titan are optional and will give you some extra features for your shop. These are the plugins that I have used:

  • WPC Fly Cart for WooCommerce
  • FiboSearch – AJAX Search for WooCommerce
  • TI WooCommerce Wishlist
  • YITH WooCommerce Quick View
  • Advanced AJAX Product Filters for WooCommerce
  • Variation Swatches for WooCommerce
  • WooCommerce Product Tabs
  • Popup Maker

The plugins that are used in Titan are free and you can find them in the plugin repository.

When searching for a plugin make sure that you also check the author name (some plugins have almost the same name and you might install the wrong one).

Plugin 1: WPC Fly Cart for WooCommerce

Go to Plugins > Add New and search for WPC Fly Cart for WooCommerce by WPClever.

After installing and activating the plugin go to WPClever > Fly Cart

Plugin 2: FiboSearch – AJAX Search for WooCommerce

Go to Plugins > Add New and search for FiboSearch – AJAX Search for WooCommerce by FiboSeearch Team.

After installing and activating the plugin you should get redirected to this.

Just click on skip

Plugin 3: TI WooCommerce Wishlist

Go to Plugins > Add New and search for TI WooCommerce Wishlist by template Invaders.

After installing and activating the plugin you should get redirected to this.

Click on not right now.

Go to TI Wishlist > General Settings.

Plugin 4: YITH WooCommerce Quick View

Go to Plugins > Add New and search for YITH WooCommerce Quick View by YITH.

After installing and activating the plugin go to YITH > Quick View

Plugin 5: Advanced AJAX Product Filters

With this plugin, you can create advanced filters on the shop page. This plugin is already installed with the package. You can find the filters in BeRocket > Filters.

I have created filters for desktop and for mobile on the shop page. The filters for mobile are a dropdown and more mobile-friendly.

You will not see the filters right away, you need to assign them first.

Assign the desktop filters

Go to Appearance > Widgets. In each AAPF Filter Single widget, you can assign a filter.

Assign the mobile filters

Go to Divi > Theme Builder and switch to wireframe view (left bottom).

Open the toggle and place the shortcode of each mobile filter in here.

You can find the shortcodes by going to BeRocket > Filters last column.

Plugin 6: Variation Swatches for WooCommerce

Go to Plugins > Add New and search for Variation Swatches for WooCommerce by Emran Ahmed.

With this plugin, you can create color attributes on the product pages. When you go to Products > Attributes and you create a new attribute you have an option to set this as color. You can now set colors for this attribute.

Plugin 7: WooCommerce Product Tabs

This is a very easy plugin to create additional product tabs on the product pages.

Go to Plugins > Add New and search for WooCommerce Product Tabs by WP Concern.

Go to WooCommerce Product Tabs and add a new product tab.

Place some content and give it a priority number (the order of the tab). 

Plugin 8: Popup Maker

Go to Plugins > Add New and search for Popup Maker by Popup Maker.

Go to Popup Maker > Create Popup

Enable the Divi Builder and click on load from library. 

Switch to the Your Saved Layouts tab and choose Discount popup -titan.

After that click on add new trigger. I use time delay and a cookie.

Go to the Display tab > Sizing

Set the max-width to 100%

Go to the Display tab > Appearance

And choose Light Box.

Publish the popup and then click on Customize This Theme.

Go to Container > Border

And set the thickness value to 0px

Click on update.

Create a mega menu

  • The mega menus will only work for desktops.
  • I have created a separate menu for mobile, you can find this one in Appearance > Menus switch to the mobile menu (Note: You will have 2 menus, one for desktop and one for mobile. In Divi Theme Builder global header you will find 2 menu modules. One for desktop and one for mobile).

Edit the mega menu

The 2 existing mega menus can be found in Divi > Theme Builder > Global Footer.

I placed them in the footer so on page load you will not see a flash of them.

The mega menus are a section and you can edit them with the Divi builder.

Create additional mega menus

First, go to Appearance > Menus

At the right top click on Screen options and enable CSS classes.

Open a menu item that you want to use as a mega menu and add the following 2 classes.

first-level first-level-1

The number 1 needs to be increment to the amount of mega menus you are using.

In this case (of my demo), we have already 2 mega menus. The first one has the classes:

first-level first-level-1

The second one

first-level first-level-2

So if you want to add a third one it will be:

first-level first-level-3

Now go to Divi > Theme Builder > Global Footer and add a new section. Open this section and go to the advanced tab.

In the CSS field place the following 3 classes.

dropdown-menu dropdown-menu-1 mega-menu-v1

The number of the dropdown-menu-1 needs to be the same as the first-level-1 number we used in the menu.

So in my case, that will be dropdown-menu-3

The mega-menu-v1 number needs to be the same number as the header version you are using. In this case, I use header v1 so it can remain the same.

If you are using for example header version 2 then it needs to be mega-menu-v2.

Setting up filters on product page

Step 1: Create page attributes

Go to Products > Attributes

I have created 2 attributes for this demo, color and size.

When you create a new attribute you have an option to set a type. For my color attribute I have used the type Color. This way I can set a color scheme.

If you click on configure terms under color you can set the colors.

Step 2: Add attributes to product page

on your product page set product data to Variable product.

Under attributes tab add your attributes. Make sure to check used for variations.

Go to the variations tab an add your variations.

Change the header and menu version

Go to Divi > Theme Builder and open the global header.

1 – Click on Load from Library
2 – Click on Your Saved Layout
3 – Check Header

Now you can choose your header layout.

Change the footer version

Go to Divi > Theme Builder and open the global footer.

1 – Click on Load from Library
2 – Click on Your Saved Layout
3 – Check Footers

Now you can choose your Footer layout.

Change the Product and Shop

Go to Divi > Theme Builder

Here you will find all the templates.

The ones in red are inactive.

For example, if you want to change the shop page to the shop slide-in sidebar then open the assignment options by clicking on the 3 dots and then choose Manage Template Assignments.

Scoll down and choose shop under WooCommerce.

Customize colors

Most colors can be changed through the sections, rows modules and theme customizer.

Some colors need to be changed through Appearance > Theme Editor by color code swapping.

Menu badge

At line 19 you can change the text color..
At line 20 you can change the background color.

Category menu

At line 25 you can change the text “BROWSE CATEGORIEES”..
At line 26 you can change the color.

Mobile menu

At line 32 you can change the icon color
At line 33 you can change the icon background color.

Slider button

At line 38 you can change the text color
At line 39 you can change the background color.

Countdown timer

At line 44 you can change the background color.

Shop add to cart button

At line 50 you can change the background color
At line 51 you can change the text color

Default shop filter

At line 56 you can change the background color
At line 57 you can change the text color

Quantity box product page

At line 62 you can change the border color
At line 63 you can change the background color
At line 64 you can change the text color

Tabs product page

At line 70 you can change the border-color

Tabs active product page

At line 75 you can change the border-color

Tabs icon color product page

At line 81 you can change the icon color

Star rating product page

At line 88 you can change the icon color

Shop pagination

At line 93 you can change the background color
At line 94 you can change the active text color
At line 98 you can change the text color

Blog meta

At line 103 you can change the background color
At line 104 you can change the text color

Woocommerce notice box

At line 113 you can change the background color
At line 114 you can change border-color
At line 115 you can change the text color

Wishlist icon on shop pages

At line 120you can change the background color
At line 121 you can change the text color

Wishlist icon hover on shop pages

At line 125 you can change the background color

Quick view icon on shop pages

At line 131 you can change the text color

Quick view icon hover on shop pages

At line 136 you can change the background color

Button on wishlist pages

At line 141 you can change the text color
At line 142 you can change the background color

Button quick view popup

At line 147 you can change the background color
At line 148 you can change the text color

Sale badge quick view popup

At line 153 you can change the background color

Checkout review order

At line 158 you can change the background color

Payment background-color

At line 162 you can change the background color

Coupon bar

At line 166 you can change the background color
At line 167 you can change the border color
At line 168 you can change the text color

Coupon bar link color (toggle)

At line 172 you can change the text color

Popup add to cart

At line 183 you can change the button background color
At line 187 you can change the popup background color
At line 191 you can change the title background color

Price text badge – Price filter

At line 201 you can change the background color
At line 202 you can change the text color

Price bar – Price filter

At line 206 you can change the background color
At line 207 you can change the background color

Filter clear button

At line 201 you can change the text color
At line 202 you can change the background color