WP Typeface Setup

If you already install WP Typeface by following Woocommerce Setup guide, you can skip this step.

If you haven’t, here is how to do it …

Login to your WordPress dashboard, go to Appearance >> Themes

install wp typeface

Click Add New >> Upload Theme >> Choose File

Upload wptypeface.zip and then click Install Now.

Go to WP Typeface >> Activation

activate wp typeface

Enter your serial number and click Activate, if your serial number valid it will show you it’s expired date.

wp typeface expired date

Expired date is the time you are no longer getting update notification and our support.

When you buy new serial number, you must deactive previous serial number first, enter new serial number and activate.

Go to WP Typeface >> General Settings

wp typeface general settings


HTML Lang is the way you declare your website’s language to search engine.

By default, it will use your wordpress’s installation language.

If your content languange different from your wordpress’s installation language, you need to adjust it by enter your content’s languange code.

Visit https://www.w3schools.com/tags/ref_language_codes.asp to see complete list of HTML languange code.

Example : Your website’s content language is france.. the code is fr, enter fr to HTML lang field and save.

Privacy Policy Page URL

When you enter your website’s privacy policy page, it will show Privacy Policy pop up notification when someone visit your website.

NOTE : In your Privacy Policy page, make sure you write that your website save buyer name and email as newsletter subscriber and they can opt out later if they don’t want to.

Free Image CDN

When you activate this option, any image that uploaded to your website will be load from WordPress’s server.

It is faster than loading from your own hosting, it’s free, and will saved much of your hosting’s bandwith usage.

It is also automatically optimize your image using lossless compression method, so you don’t have to optimize it manually one by one.

The downside is.. we don’t know when wordpress will stop providing this feature.

Until then, we recommend you to use it and switch it off when it stop showing your images.

Show scroll to top button

Switch it on if you want to show Scroll to Top button at your website’s right side.

Now Switch to Style Tab.

wp typeface style settings

This is where you can costumize your text appearance.

For a better understanding, open your homepage in new tab to preview any adjustment you’ve made in those option.

Custom Font

Custom font is where you can enter font url from any resource, including your own.

Use it if you need another font that is not available in Font Family’s dropdown option.

Need another font from Google Font library? We’ll talk about it later in chapter 11.

Go to WP Typeface >> Header & Footer >> Header Tab.

wp typeface header settings

You can upload logo and style your website header here.

If you are too busy to create logo, you can also using text with available font or custom font.

Need header with gradient background color?
Visit https://cssgradient.io/, generate css code, copy and paste it on Background Gradient field.

Top navigation part will show any wordpress’s navigation menu you’ve created that used Top Menu as it’s display location.

wordpress navigation menu settings

Visit WP beginner’s guide if you haven’t know how to create navigation menu.

Following image describe which your website header’s part affect by each setting field.

wp typeface header schema

Social Media

Enter your social media profile’s url to show Social Media Button on footer.

wp typeface social media settings


wp typeface footer settings

Footer Type : Split your footer into several columns (that you choose) with exact same width.

Each column contain sections like in the image below, depend on which setting you’ve adjusted.

wp typeface footer columns

Menu ID to Show : Display location of navigation menu that you’ve created to show in footer’s column.

Note :

  • Any field with text input format, except shortcode, support HTML tag.
  • If you are not making any adjustment to spesific column, it will show blank column.

Prepare and post product

Before adding products, let’s prepare your product categories.

Make sure there is no ‘uncategorized’ in your product category list.

Set video quality into HD for better view.

Any typeface product need multiple license variation and will be exhausting if you set it one by one everytime you post new product.

How to make it easier? Create product draft.

Let’s prepare it.

As an example… you offer 2 license option, personal license and extended license.

First, decide what is the global name (Attributes name) of those option.

Is it License Type? License Option? or anything that represent it.

Next.. write down on your note any detail of each variation in HTML format.

Here is the snippet that you can adjust depend on what you need.

Attributes name :  License Option

Variations : Personal License | Extended License (each variations separate by “|”)

Personal License
price 12 (price of this variation without currency symbol)

Below is how to create list in HTML format

<li>Personal Lisense detail #1</li>
<li>Personal Lisense detail #2</li>
<li>Personal Lisense detail #3</li>

Extended license
price 99

<li>Extended license detail #1</li>
<li>Extended license detail #2</li>
<li>Extended license detail #3</li>

Now let’s create your first product draft…

IMPORTANT NOTE : make sure use your cheapest license variation as Default Form Values (in video at 1:23 ).

To start posting your real product, prepare you product images, font files that you’ll use for preview, zip file of your product for buyer, font’s family name, and your product description.

Optional : you can also show product package’s detail like file size, extension, and whether you included vector format or not.

For example, i will post product with 2 different style by copying product draft that we’ve created before.

Personalized your product’s page and archive

Go to Wp Typeface >> Product.

wp typeface product settings

wp typeface product settings field

Those settings will affect all of your products so only need to set it once.

In custom note section, you can add some note to show under CTA (Add to Cart button).

It is support HTML tag in case you need to put link there.

In this example, i’ve set font tester output as text instead of image.

I’ve also set radio button as License option format.

And here is my custom note content :

Need help to choose right License option? <a href=”https://wptypeface.com/contact/”>Contact Us</a>!

You can see the result here.

There are several option that you can play with.

Try to make changes and see what happen on your product page.

Homepage Settings only work after you’ve set general, header footer, and product settings.

One section at a time… that is how you build your homepage using WP Typeface.

The following image will describe it better…

wp typeface sections

WP Typeface’s homepage settings make it possible for you to have overlay header.

wp typeface overlay header

It means the background image of section #1 can blend perfectly with your header if you want.

To activate overlay header mode… you must switch it on, upload new logo image and set link color that match your background image.

It will only be used in your homepage, the other page will use header settings that u’ve set before.

wp typeface overlay header settings

Now let’s build your homepage…

wp typeface section setting

Like footer settings, Section Type means you can split your section into several columns.

If you choose Default, as long as you keep Sections’s Heading and Description field blank… it wont show anything.

Default type added in case you need temporary section.

As an example… you want to make seasonal offer and need space to display banner, choose One column type, upload your banner there.

When your offer expired, you’ll only need to change it’s type into default and save it.

What is Inner Content, Section’s Heading and Section’s Description?

This is your guidance …

section content guide

Each Section Type have different content option to show, you will get the idea later when you try it one by one.

Homepage settings global rule

Destination URL : When you fill the text fields with URL, this element will become clickable and bring your visitor there.

Youtube : When you fill the text field with Youtube’s Video ID, it will show video in that section.

Example : https://www.youtube.com/watch?v=V4PfRI2f96s , V4PfRI2f96s is the video ID.

Search Box : Fill the Placeholder text field with “Search…” or “Search Font…” or anything you like, it will show search box in that section.

CTA = Call to action, is a clickable button.

BG Gradient = When you need background with gradient color, generate css code using https://cssgradient.io/ , copy and paste it to the BG Gradient field.

Each section have individual save and delete button, that is why we recommend you to set one section at a time to avoid confusion.

When you’ve got your perfect settings, you can save it as a file and restore it later.

With this feature, you can make experiment with your website’s style as often as you like worry free.

Install WooCommerce PDF Invoices & Packing Slips plugin.

Install WooCommerce PDF Invoices

Go to Woocommerce >> PDF invoices

WooCommerce PDF menu

Click Documents tab >> Packing Slip >> disable it (uncheck) >> Save Changes.

WooCommerce PDF slip disable

Switch to invoice, set it like on the following image, and Save Changes.

WooCommerce PDF invoice enable

Click General tab >> set it like on the following image…

WooCommerce PDF invoice settings

Upload your logo, adjust the height field if you need to, fill Shop name and address.

You can add note on your pdf file by using Footer field.

If your additional note contain list, write it in HTML format (like product variation description).

Now everytime your buyer completed order, they will receive pdf document contain license usage and your additional note.

Install Contact Form 7 plugin.

Install Contact Form 7

Go to Contact >> Contact Forms…

Contact Form 7 menu

Copy shortcode to your note and click edit…

Contact Form 7 shortcode

Click email tab…

Contact Form 7 email tab

Fill “To” field with the email address that u use most so you can know right away when your buyer or potential buyer contact you by form.

You will have to login to your webmail panel later if you want to reply it using webmail address.

Now create contact page by add new page ..

add new page

Add title and see Page Attributes on the right side… choose Contact Form 7 and publish it (click publish button on top right).

publish contact form

Refresh your page editor, and you’ll see Contact Form 7’s field… that is where you must insert your shortcode that you’ve copied before.

Contact Form 7 shortcode field

You can add text on text editor to give more context to your web visitor.

Install W3 Total Cache plugin.

Install W3 Total Cache

Go to Performance >> General Settings…

Enable Minfiy (manual mode), Opcode Cache (Zen Opcache) if your webhosting support it, and Object Cache.

Disable (uncheck) Browser Cache and Page Cache, as long as you are not using these two… your preview font file is save.

Open Minify settings.

Enable HTML minify settings, check Inline CSS minification, Inline JS minification, and Line break removal.

Ensure you add mfunc to the ‘Ignored comment stems’ option in the Minify settings.

Disable (uncheck) JS minify settings.

Enable CSS minify settings, check Preserved comment removal, and Line break removal.

Now you are ready to boost your income using WP Typeface.

NOTE : Deactive this plugin anytime you adjust your theme or another plugin setting, when you’ve finish… re-active it and empty all caches from W3’s dashboard.

By Default Wp Typeface provide 18 font option, and custom font field if you want to use your own font.

How about another Google Font? Yes… you can use any of Google Font you like… Which is more than 990 fonts to choose.

This is how you do it… as an example you want to use Fredoka One as your Heading font.

Open Fredoka One page (https://fonts.google.com/specimen/Fredoka+One), click select this style.

fredoka one

Click embed, copy anything between href=”copy this“.

In this example, the value is https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap

fredoka one embed

Open that link using browser, what u are looking for is that font’s URL.

fredoka one css

NOTE : sometimes… there are several font URL show on that page.

When it happen, choose the last font’s URL.

After you’ve got your desire font URL, you only need to paste it into the Custom Font field as your Heading Font, Body Font, or Logo Text’s Font and save it.

© 2020 - WPTypeface.com