Font Preview Tool For WordPress or WooCommerce

Rossveth

May 18, 2022

Running a WordPress or WooCommerce website? Perfect!

With FontVisual Showcase previews, you can seamlessly integrate font displays directly into your site, keeping your visitors engaged without redirecting them elsewhere.

The entire setup process for your WordPress or WooCommerce site takes under 10 minutes.

Let's get started!

Where to place your Font Preview

There are several common places where businesses place their font previews:

For WordPress sites:

Create a separate page to display all your font showcases
Add font previews to individual blog posts or pages
Include them in custom post types

For WooCommerce stores:

Display font previews on individual product pages
Create a dedicated fonts catalog page
Add them above or below product descriptions

Some businesses use one approach or combine multiple methods. Choose whichever works best for your business needs.

The Showcase embed code

The first step is getting the Showcase embed code. This code will allow you to embed the Showcase page within your website.

When you go to your Showcases page, you should be able to see an Embed button for each showcase, like this: Copy Embed Code

Click on the Embed button to copy the code to your clipboard.

Setup in WordPress

To embed your font preview in WordPress, you'll use the Custom HTML block. WordPress provides detailed instructions in their official Custom HTML documentation and Custom HTML Block guide.

For WordPress Pages and Posts:

Open the page or post where you want to add the font preview
Click the + button to add a new block
Search for and select Custom HTML block
Paste your FontVisual embed code into the HTML block
Click Update or Publish to save your changes
Preview your page to see the font showcase in action

For WooCommerce Product Pages:

Adding font previews to WooCommerce product pages requires a bit more technical setup. You can follow this detailed guide: How to Add Custom HTML Above WooCommerce Product Short Description.

Option 1: Using a Plugin (Recommended for beginners)

Install a plugin like "Custom Product Tabs for WooCommerce" or "WooCommerce Custom Fields"
Add your font preview embed code through the plugin interface

Option 2: Custom Code (For developers)

Add custom code to your theme's functions.php file to display the embed code on product pages
Use WooCommerce hooks like woocommerce_single_product_summary to position the font preview

Option 3: Page Builder Integration

If using Elementor, Divi, or similar page builders, add a Custom HTML widget
Paste your FontVisual embed code into the widget

You can create a separate page dedicated to showcasing all your fonts, add them to individual product pages, or use both approaches - whatever works best for your business needs.

References: