Creating menu¶

Step 1 - Navigate to Appearance > Menus

Step 2 - Click on create a new menu, enter menu Name and click on Create Menu button

Step 3 - From the right side choose pages that you want to add to your menu and click on Add to Menu. Once menu items are added, you can reorder or nest them via drag and drop tool. Remember to click Save Menu when you finish to keep your changes saved.

Step 4 - You can easily rename every menu item in item details.

Step 5 - Optionally you can add to menu other items, like Links or Categories.

Step 6 - Check your menu as Left Primary Menu to set it up as one of 3 menus supported by the theme (Left Primary Menu, Right Primry Menu and Footer Bottom Menu). Select which menu appears in each location.

Step 7 - Always click Save Menu after providing any changes.

Converting your menu to a Max Mega menu¶

The Primary Naviagtion of this site was created with the use of Max Mega Menu which is bundled with the Fraxinus theme.

Below you will find information how to convert menu to a Max Mega Menu menu type.

Step 1 - Navigate to Appearance > Menus

Step 2 - Click on create a new menu, enter menu Name and click on Create Menu button or if you wish to convert arleady existing menu just choose it from the drop down list and click Select

Step 3 - On the left side you will see the settings for Mega Menu (under Max Mega Menu Settings). Check the “Enable” checkbox and click Save. Your menu will now be converted into a Mega Menu for the relevant Theme Location.

Your menu is converted to a Max Mega Menu one and you can use all of the features provided by the plugin

Creating a menu with columns and images (Max Mega menu required)¶

With the features provided by the Max Mega Menu we can created submenu with columns and images. To achieve an effect simillar to the one we can see on the Fraxinus demo please follow the instruction below:

1. Hover over the item which you want to use to create you sub menu. Click the Mega Menu icon which should show up.

   

   
   

2. From the Sub menu display mode dropdown menu choose Mega Menu - Grid Layout

   

   
   

3. Create as many Columns as you need using the + Column button. In the Shop submenu we created 4 Columns

   

   
   

4. To each created Column you can add a widget choose from the dropdown menu visible on the right

   

   
   

5. If you wish to edit the Setting provided by these elements click the wrench icon. To create the links we used the Navigation Menu widget and the element s with the images were created using the Products widgets with settings as below:

   

How to change the logo used in the menu?¶

Menu logo can be changed via customize option. To access Site Indentity go to Appearance > Customize > Header, Navigation > Header where you will be able to change/remove logo image.

How to change background color of the footer section?¶

By going to Appearance > Customize > Header, Navigation > Navigation the settings allows to choose one of two available styles of the menu:

• White

• Transparent

Latest products - way to presents most recent products from your shop¶

This element allows showing a specific number of products (starting from the last item added to the WooCommerce Products list)

To recreate the look of this element used on the demo site:

1. Create a Section (use the default settings).

2. Inside the Section add a Row element (use the default settings).

3. Add Latest products element inside Row

   • Per page: 4 (this is the number of products which will be added to the site)
   • Title: Brand new stuff
   • Link text: Discover More

Filtered Product Slider¶

Allows to show WooCommerce products via one of the available filters.

To recreate the look of this element used on the demo site:

1. Create a Section (use the default settings).

2. Inside the Section add a Row element (use the default settings).

3. Add Filtered Product Slider element inside Row

   General

   • Display bestsellers products: Yes
   • Display new arrivals products: Yes
   • Display slider arrows: Yes

   Filters

   • Limit: 6 (Number of products to display. If empty, all products will be displayed.)
   • Columns count: 3

Product categories — available ways to display products¶

This section allows showing a specific number of products categories. The number of categories can be set via the option available in the settings.

Using a different styles provided by shortcode

With Product categories the categories can be presented on the site in 3 different way:

• Inline

• Block

• Masonry

To show them in Product categories settings use of of the available option from the dropdown of the Display type

Product Featured Box - showing the best of the best¶

With this shortcode, we can present a product we wish to feature (or anything else we would like to feature on our site). In the Fraxinus we are suggesting two ways to presents the product just follow the settings below:

For the hero type look

To recreate the look of this element used on the demo site:

1. Create a Section (use the default settings).

   • Extra class name: ct-product-featured-box-shop-home-featured-box ct-u-padding-top-70 ct-u-padding-top-0-xs

2. Inside the Section add a Row element (use the default settings).

   • Row Layout: 1/1 + 1/1

3. Add Filtered Product Slider element inside Row

   General (example)

   • Image (The image will can be choose from the Media Library)
   • Title: Fresh arrivals
   • Title font size: 48
   • Title color: #ffffff
   • Description: New dresses, new tops, new skirts & more
   • Description font size: 18
   • Description color: #ffffff
   • Button text: Shop Now
   • Button motive: Black
   • Button link: shop
   • Content alignment: Top center

For the boxed type

To recreate the look of this element used on the demo site:

1. Create a Section (use the default settings).

2. Inside the Section add two Row element (use the default settings).

   • Row Layout A: 2/3 + 1/3
   • Row Layout B: 1/2 + 1/2

3. Add Filtered Product Slider element inside Row (this is an example of the shortcodes used in the firts row) |

General (1)

• Image (The image will can be choose from the Media Library)
• Title: Float thirteen jumping
• Title font size: 24
• Title color: #ffffff
• Description:
• Description font size: 18
• Description color: #ffffff
• Button text: Try it yourself
• Button motive: White (default)
• Button link: product-category/tops-t-shirts
• Content alignment: Left

• Image (The image will can be choose from the Media Library)
• Title: Supersonic promise
• Title font size: 24
• Title color: #ffffff
• Description:
• Description font size: 18
• Description color: #ffffff
• Button text: Find out more
• Button motive: White (default)
• Button link: product-category/blouses-shirts
• Content alignment: Center (default)

Shipping table - providing information of the type the shipping Method your shop support¶

Using this shortcode you can present the Shipping method available.

How to use the Shipping table shortcode.

To add an Shipping post to the shortcode start typing the name of it. The shortcode will suggest you the possible ones based on the typed letters.

If you don’t know what Shipping post are, you can check them going to WordPress Dashboard > Shipping method > All Shipping methods

How to create Shipping method?

Before you will be able to show any of the methods in the shortcode first you need to create some. To do so please follow the instruction below.

1. Please go to your WordPress Dashboard > Shipping method > Add New

   

2. There you will be able to:

   • Enter a Shipping Table title (this will be only visible in the backend in the All shipping methods section).(1)
   • Create a table with the Shipping methods information. (2)

   

3. The next step is to create a table which is possible by Shipping Extension (2)

   • First click Add Row. This will allow to add the Main Row of the table. The created Row contain:

     

     1. Title: Allow to add the title under which the table will be show on the site.
     2. Table: Here will be continued the creation of the rows being part of the Shipping table.
     3. Label: Here can be add some comment.

     

   • Second, click two times Add Row inside the table. This will allow to create the row and first section you will be able to edit.

     

     1. Add the title to the rows. In our example we added two more fields and provide there 3 types of Shipping the shop provides.

     

     And this are the results (remember that the first row will act as a header of the table):

     

     With this knowledge, you should be able to create the rest of the table.

Size Guide tab¶

This shortcode will work ONLY when the bundled with Fraxinus Theme WooCommerce Product Size Guide so if you wish to use this shortcode make sure to activate it first.

How to create Size Guide Table?

Before being able to use the provided shortcode we need to have a created Size Guide which can be added there. To do that please follow the steps below:

1. Go to Size guides > Add new in your WordPress Admin Panel

   

2. Insert a title and content. Title will be the name of the size guide. In the content, you can for example describe how a customer can measure its sizes properly.

   

3. Fill the size guide.

   

   • In the sections 1 and 3 you can specify a table header and a caption.
   • To add/remove columns and rows just use the plus/minus buttons (inside red squares on the screenshot). Right, it’s as simple as that!
   • Fill table cells by just clicking on them and inputing the text.
   • Every time you create a size guide there is a basic 4×4 table attached to make your work easier.
   • If you wish to add or remove added extra table use the Add Table or the Remove Table button (2)

4. Publish it and go to the next section

   

How to use Size Guide table shortcode?

Size Guide shortcode allow to show from 1 to 4 tables at once. Based on the decision made in the General tab from 1 to 4 Size Guide tabs will be shown allowing to set:

1. Size guide title
2. Size guide ID: choose SG you want to show

Where to found the ID of the created SizeGuide

1. Go to the Size guides and choose the size guide you want to add by choosing Edit

   

2. In the SizeGuide slug you will find a number – this is the ID we are looking for!

   

Job display¶

How to create Job item

Before being able to use the shortcode we need to create an item which could be shown. To do so please follow the instruction below:

1. Go to Jobs > Add new in your WordPress Admin Panel

   

2. In the item you will be able to add:

   1. Title - Here you can add the name of the Job the offer is for
   2. Content - This section is used to provide any type of description about the job
   3. Job Categories: add a new Category or assignee the Job offer to a new one. This won’t show on the site but admin will be able to filter the offer using created categories.
   4. Job Location - add the name of the location
   5. Job Type - Choose one of available job types

   

How to create Job categories and then use them

Categories are very convenient way to organize your faq items, that can be added to more than just one category. To create new FAQ category, navigate in WordPress dashboard to FAQ > Faq Categories

For new FAQ category you can define:

1. Name
2. Slug

Categories allow you to group questions about similar subject into one group. Then they can be show on the page by shortcode’s Category to display option.

Using the Job display shortcode

By using the Job Display shortcode you will be able to show all the created Jobs offer on the site. With the available settings you will be able to among other options use:

• Limit: Set the number of the offers which will be shown
• Specify Jobs: Choose the jobs to show by they name
• Exclude Jobs: Choose the jobs to hide by they name
• Specify Job Categories: Choose the jobs to show by the category they are assignee to
• Exclude Job Categories: Choose the jobs to hide by the category they are assignee to

Creating Job Item¶

To create new Job offer post, navigate in WordPress dashboard to Jobs > Add New

For new Team Member item you can define:

1. Title field: You can here the name of the team member.
2. WordPress Content Editor: Any type of information about the team member.
3. Job Categories: It is used to sort and group content into different sections.
4. Job location: Allow to add the information where the job is located.
5. Job type: Select the type of job from the drop down menu (full-time, part-time, freelance)

Job Displays¶

Front-end

Back-end

Job Settings*

Filters

1. Limit: Set results limit, use -1 to disable limit

2. Skip X elements: Allows to skip a number of elements from results

3. Order: Order in which data should be fetched:

   • Date
   • ID
   • Author
   • Title
   • Slug
   • Modified
   • Order by parent ID
   • Random order
   • Order by page older

4. Specify jobs: Only selected posts will be displayed

5. Exclude jobs: None of selected posts will be displayed

6. Specify Job Categories: Only posts with selected terms will be displayed

7. Exclude Job Categories: None of posts with selected terms will be displayed

8. Specify post tags: Only posts with selected tags will be displayed

9. Keyword search: Show items with certain keyword

How to filter/sort job offers?¶

The above shortcode settings gives you a lot of possibilities for displaying only the items that meet the conditions set in the options Filter section.

For example:

• Order by and Order: Decide if the latest added item will be shown first or last.

• Limit: Allow you to show only certain number of items.

• Options like Specify ct-team objects, Exclude ct-team objects, Specify terms of category taxonomy:

  • You can even removed some of the Team Members depending on the category they are added to or by simply selecting the ones you don’t want to show.

Creating Testimonial Item¶

To create new Testimonial element, navigate in WordPress dashboard to Testimonials > Add New

For new Testimonial item you can define:

1. Title: Add Team Member name
2. WordPress Content Editor: Add some information about the Team Member

Creating Team Member Item¶

To create new Team Member post, navigate in WordPress dashboard to Team Members > Add New

For new Team Member item you can define:

1. Title field: You can here the name of the team member

2. WordPress Content Editor: Any type of information about the team member

3. Feature image: which will represent this team member

4. Links and email address which allow to contact with the indicated team member.

   • Instagram Link
   • Facebook Link
   • Twitter Link
   • Snapchat Link
   • Email Address

Team display¶

Front-end

Back-end

General

1. Number of columns

   • 2

     

   • 3

     

   • 4

     

Filters

1. Limit: Set results limit, use -1 to disable limit

2. Skip X elements: Allows to skip a number of elements from results

3. Order: Order in which data should be fetched

   • Ascending
   • Descending

4. Order by: Order in which data should be fetched:

   • Date
   • ID
   • Author
   • Title
   • Slug
   • Modified
   • Order by parent ID
   • Random order
   • Order by page older

5. Specify ct-team objects: Only selected posts will be displayed

6. Exclude ct-team objects: None of selected posts will be displayed

7. Specify terms of category taxonomy: Only posts with selected terms will be displayed

8. Exclude terms of category taxonomy: None of posts with selected terms will be displayed

9. Specify post tags: Only posts with selected tags will be displayed

10. Keyword search: Show items with certain keyword

How to filter/sort team members?¶

The above shortcode settings gives you a lot of possibilities for displaying only the items that meet the conditions set in the options Filter section.

For example:

• Order by and Order: Decide if the latest added item will be shown first or last.

• Limit: Allow you to show only certain number of items.

• Options like Specify ct-team objects, Exclude ct-team objects, Specify terms of category taxonomy:

  • You can even removed some of the Team Members depending on the category they are added to or by simply selecting the ones you don’t want to show.