HTML5x.com

Free Website Templates

How to Install Pricing Tables on Your WordPress Website

July 5, 2025

Adding clean and responsive pricing tables to your WordPress site can significantly improve how you present your services or products. In this tutorial, you’ll learn how to use the free pricing tables from HTML5x Tables on any WordPress page without writing a plugin.

Table of Contents

🔽 Step 1: Download a Pricing Table from HTML5x

Go to https://html5x.com/tables/
Choose the pricing table template you like
Click the “Download” button to get the ZIP file
Unzip the file on your computer

🧩 Step 2: Open the HTML & CSS Files

Inside the unzipped folder, you’ll usually find:

index.html – Contains the table HTML code
style.css – Contains the CSS styling
Any images or icons if used

Open both the HTML and CSS files using any text editor like VS Code, Sublime Text, or Notepad++.

📝 Step 3: Copy the HTML Code

From the index.html file, copy only the HTML inside the <body> tag — especially the pricing table section.

<div class="pricing-table">
  <div class="plan">
    <h2>Basic Plan</h2>
    <p class="price">$9/month</p>
    <ul>
      <li>1 Website</li>
      <li>10 GB Storage</li>
    </ul>
    <a href="#" class="btn">Sign Up</a>
  </div>
</div>

🎨 Step 4: Add the CSS to WordPress

You have 2 options:

Option 1: Use Customizer → Additional CSS

Go to Appearance » Customize » Additional CSS
Paste the content of style.css from the pricing table
Click Publish

Option 2: Use a Custom CSS Plugin

Install and activate the plugin: Simple Custom CSS or WP Add Custom CSS
Go to Appearance » Custom CSS and paste your styles

🔧 Step 5: Add the HTML Table Using a Custom HTML Block

Edit the page or post where you want to show the pricing table
Click “+ Add Block” → choose Custom HTML
Paste the HTML code you copied earlier
Click “Preview” to see the live table
Click Update or Publish to save

✅ Optional: Add Custom Classes or Mobile Tweaks

If you need mobile responsiveness tweaks or font styles, you can extend the CSS or embed Bootstrap into your WordPress theme (not required if the template is already responsive).

💡 Pro Tip

You can reuse the pricing table on other pages by creating a reusable block or saving it as a template part using full site editing (FSE) if your theme supports it.

📬 Need Help?

If you need help customizing a table or placing it properly, feel free to contact our support team at [email protected].

Start using modern and lightweight pricing tables on your WordPress site with ease — no coding experience needed!