Make a Stylish Price List

How to Show Your Rates with Stylish Price List in WordPress

Last Updated on by Michael Brockbank

Showing your freelance rates on the website can entice a client to contact you. It can give the individual an idea of what you offer and what to expect. And if you use WordPress, you can do this with the Stylish Price List plugin.

Today, I’ll show you how to set this up and how you can use a price list to gain clients.

The great thing about showing a price list on your blog is that it can be used for a wide scope of services. For instance, what if you include your own images and screenshots? Perhaps you promote client work on social media platforms.

The possibilities for a freelance writer are quite vast.

How to Use Stylish Price List in WordPress

In this article, we’ll go over the Stylish Price List plugin. It’s a tool that gives you drag-and-drop capabilities to create a pice page of your services that is easy on the eyes.

With several options for typography, you can generate an aesthetic that matches the overall design of your blog. And as it’s developed to be responsive, it’ll look great on virtually any device.

The plugin uses a menu-style layout, but it can be easily used for just about any industry. The free (demo) version comes with seven different designs to choose from.

1. Install Stylish Price List

From the WordPress dashboard, go to Plugins and click, “Add New.”

Add New

Search for “Stylish Price List” from the keyword field on the right.

Search Stylish Price List

Click the Install Now button and Activate.

Activate Price List Plugin

2. Create a New Price List

The only settings for this plugin is a page to activate a premium license. Since this tutorial focuses on the free version, we’ll skip the settings page for now.

A new option will be available on the left panel of WordPress. Hover over Stylish Price List and click, “Add New List.”

Add New List

NOTE: If you simply click on the icon for SPL on the left panel, it’ll launch a page showing all of the lists you’ve created. Since this is our first list, that page will be empty.

3. Give the List a Name and Style

Give your stylish price list a name. This will be displayed on your price page above the list of services you provide.

Name the Price List

Click the drop-down field and select the style you want to use.

Select the Style

Stylish Price List will immediately show you an example of your selection. Then, you can pick the one you like best to continue.

Style Example

To close this popup, you can click anywhere on the screen or use the small “x” icon on the top right.

Note: You can always come back to the style selection later. Click the “Switch & Keep My Font Setting” button to keep all of the adjustments you make for the new layout.

4. Adjust “More Settings” for the Price List

Click the “More Settings” button to open a list of additional functions.

More Settings

A new list of settings will drop below the grey buttons on the page. These are directly connected to the style you chose in the prior step.

From here, you can modify the language, how many columns to use, the maximum width in pixels for the list, remove the title, add category separators if you need them, or set the Buy button links to open in a new tab.

All of these settings are going to be up to you and what you want Stylish Price List to display on your site. So, you may have to try a few options to see what works best with what you want to create.

Set Options

For this tutorial, I’m simply going to leave everything as default so I can show you what it looks like in the end.

5. Adjust Font Settings

Scroll back up a bit and click the “Font Settings” button.

Font Settings

This will open a new list of options to control the font of your stylish price list.

From here, you can adjust the type of font to use, which there are many, and other elements of its appearance. This includes things like color, size, and weight (how thick the text is on the page).

This is another aspect that may take a bit of trial and error to get perfect on your page. Experiment with the different options and create a layout that is perfect for your needs.

Again, I’m going to leave these as default for now. We can always come back and make adjustments later.

6. Create Your Categories

If you have different categories of services you’d like to show, you can highlight each one and include specific items.

For example, what if you have a plan for writing content and then a separate section for graphic design or website work?

Scroll down to the Category section of the Stylish Price List. It’ll be highlighted with a blue bar.

Input a Category Name.

Category Name

NOTE: Even if you only have one category, it’s probably a good idea to show it above your price list. This way, it can prevent confusion for the person visiting the page.

Next, input a description for the category. This is a brief breakdown of what the category entails.

Add Category Description

NOTE: I do need to point out that this text isn’t visible anywhere on the site. I’m not sure if this is a bug or something only available in the premium version.

7. Add Your Services

Now, here is the fun part. It’s time to start loading your stylish price list with services.

Under the category section, you’ll see a box for the services you plan to provide. Fill in this information for the first service you want to display.

First Service Name

Do you want a button for people to order the service?

At the end of the item, you’ll notice the “Button Text” checkbox and title. This is completely optional should you want the person to access a certain page for the service.

If you want the client to contact you for this particular service, you can check the box, input the button text, and use your contact form’s URL.

Button Function

You can always set each button on every service you offer to aim at an order or the same contact form. This is essentially the call-to-action that can prompt clients to interact.

If you have more than one service in the category, click the “Add Service” button to expand your list.

Add Service

This will launch another service box for the specific category. Like the first, just fill in the information.

Do this as many times as you need to list all of your services under the single category.

Adding more than one category?

As I said earlier, you can use more than one category to show your prices. Let’s say that I Include graphic design elements into my pricing scheme.

To add another category, click the “Add Category” link.

Add Category

This will immediately create an identical section to the one above for setting up the new category and services. Just fill in the information as you did in the previous steps.

In this example, I am entering a couple of options for screenshots and photographs.

Once you’re done setting up all of the categories and services in Stylish Price List, click the “Save” button.

Save Stylish Price List

One way to test your list layout is to use the “Preview List” button after saving. This way, you can get an idea of what your freelance writing rates will look like on your website.

Preview List

8. Add Stylish Price List to Your Page

Now that you have your list of services ready, it’s time to add it to your page.

It’s a good idea to have a price page ready on your blog. You can then add it to the navigation bar in your Menu settings. This makes it easier for people to find the information.

From the top of the creator screen, click the “Add to Webpage” button.

Add to Webpage

Copy the shortcode provided by the plugin. You’ll use this to paste into any post or page you have on your website.

Copy Stylish Price List Shortcode

Go to any post or page in WordPress. As I suggested above, it’s better if you already have a price page ready on your site.

Once in the WordPress editor, click on the blue “+” on the top left and add a shortcode block to the content.

Add Shortcode Block

Paste the shortcode from Stylish Price List.

Paste the Shortcode

Publish or update the page and your price list should be visible.

Why Does it Look Funny?

Stylish Price List

As you can see, the price list is a bit squished to the left of the page and somewhat mangled. This doesn’t give it a very stylish appearance, right?

By changing the max width in the settings of the list, and making sure it’s set to two columns, you can modify the appearance.

After Adjusting Settings

Like I said before, you’ll have to fine-tune the settings and layout to create something that is appealing to you. Personally, I think removing the description under each service would probably be a better fit.

Plus, I would link each service to a short page that goes into detail about what each one entails.

For instance, if I was charging a certain amount of an article that is at least 1,000 words, I would link the button to a page that breaks down the guarantee of 1000+ words that is optimized for SEO and other techniques offered.

After Tweaks
After making a few minor tweaks.

NOTE: The color of the buttons will reflect the color you set for the price in the font settings.

You can add a button after the shortcode on your price page so potential clients can jump directly to a contact form to send you a message.

Why Use Stylish Price List Instead of Creating a Table?

There’s absolutely nothing wrong with creating your price list using a table instead of this plugin. However, you may need to know a bit of HTML or perhaps CSS to get the same results.

Stylish Price List just makes the process much easier to manage without worrying about coding.

What’s handy about the plugin is being able to preview your lists after saving them. This way, you can fine-tune what you want it to look like before adding it to a post or page.

And with the different options and layouts available, it’s just a far easier method than trying to create an aesthetically please list using a basic HTML table.

How Do You Make Your Own Price List?

Whether you’re using a plugin or not, there are several elements you’ll need to make a price list.

1. Describe What You Have to Offer

First, you’ll need a list of everything you provide. I suggest writing these down in a notebook so you don’t lose track.

Write a short description of your services. For example, do you plan to provide content that scores well with SEO and readability? Do you plan to offer external links to authoritative sources regarding the topic?

2. Have a Pricing Scheme Ready for Your Services

Next, you’ll need to know how much you plan on charging for each of your services. This will be completely up to you as every freelance writer charges differently for what they provide.

What I charge for a 500-word article might be vastly different from you. So, take great consideration when planning out your rates.

3. Create a Page Specifically for Your Stylish Price List

You’ll definitely need a page in WordPress for a price list. This is a stationary element of WordPress that goes along the lines of setting up About and Contact pages.

However, you can combine the price list and contact page to make it easier for potential clients. That way, they don’t have to bounce around on your website to contact you about your rates.

4. Add Your Call-to-Action

And lastly, make sure you have a call-to-action of some kind. This can be a “Buy Now” button or a sentence to contact you with a link to your form, or other action you want visitors to take.

A call-to-action is vital in this regard. Make sure it’s something that is easy to identify and works for your needs.

Use the Stylish Price List to Engage Clients

Stylish Price List is just one of many plugins you can use to show off your freelance writing rates. It gives clients an idea of how much you charge while opening the doors to communication.

Would you order food from a restaurant that didn’t have a menu? Without knowing what you’ll get or how much items cost, I bet you wouldn’t.

The same can be said with a price list for freelancing.

Michael Brockbank
Follow Me...

Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments