Você tem uma lista de preços em seu website? Pode ser de serviços que você oferece, como aparar a grama ou de pacotes de software. Do mundo tecnológico aos estúdios de ioga, a maioria das empresas usa tabelas de preços para representar melhor o que elas têm a oferecer. A melhor forma de fazer isso é dar uma olhada nos melhores plugins WordPress de tabela de preços e implementar um deles em seu website.

Mas Isso Leva à Pergunta: Por Que é Tão Importante Ter uma Tabela de Preços?

A resposta para essa pergunta pode parecer óbvia (você deseja melhorar as conversões, certo?), mas é bom entender o motivo por trás da tabela de preços. Por que um plugin de tabela de preços é mais eficiente em realizar uma venda do que uma lista com marcadores comuns, um parágrafo ou até mesmo uma imagem?

Ter uma página de preços elegante pode explodir seus serviços e aumentar suas conversões. Veja esses práticos plugins WordPress de tabela de preços. 🛒Click to Tweet

O Que Procurar em um Plugin WordPress de Tabela de Preços

Agora que você conhece os benefícios de um plugin WordPress de tabela de preços, vamos abordar alguns recursos que deve buscar:

Poderíamos abordar dezenas de recursos que fazem sentido para tabelas de preços, mas esse é um bom ponto de partida para falar sobre o essencial.

Os Melhores Plugins WordPress de Tabela de Preços Comparados

  1. Responsive Pricing Table by WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table by Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsive WordPress Pricing Table Plugin
  7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress
  8. Pricing Table – Price list, Price Table, Easy Pricing Table
  9. WRC Pricing Tables
  10. How to Build a Pricing Table in WordPress From Scratch

Não há escassez de opções disponíveis quando se trata de preços de plugins de tabelas e sites do WordPress. Alguns dos melhores plugins de tabela de preços podem ser usados gratuitamente, enquanto outros são apenas premium sem oferecer opções de graça. Dito isso, todos os plugins abaixo merecem um lugar nessa lista e alguns deles apresentam recursos únicos que podem ser excelentes para indústrias ou empresas específicas.

1. Responsive Pricing Table by WP Darko

Responsive Pricing Table é um dos plugins mais amigáveis para usuários e vem recheado de recursos para criar tabelas de preços. Ele disponibiliza uma excelente versão gratuita sem limitações sobre quantos planos você pode incluir ou quantas tabelas deseja criar para seus websites. No entanto, é possível fazer o upgrade para a versão premium para ter acesso a recursos melhores, como modelos e um “equalizador” para deixar todas as colunas com a mesma altura.

Plugin WordPress Responsive Pricing Table

Plugin WordPress Responsive Pricing Table

As tabelas de preços criadas são formadas com campos simples e botões no back-end. Por exemplo, alguns dos campos incorporados que você pode usar incluem preços, descrições, títulos dos planos e caixas de ícones. Alguns dos botões personalizados permitem definir links para recursos como Stripe e PayPal, enquanto classes CSS customizadas com certeza ajudarão os desenvolvedores mais avançados.

Custo

Um plano gratuito é disponibilizado.

É possível obter o plugin premium por US$19 para um site ou US$49 para sites ilimitados.

A Darko Developers vende outros plugins. Assim, você pode adquirir todos eles pelo preço de US$79. Isso pode ser útil para algumas empresas.

Recursos que tornam a Responsive Pricing Table uma Ótima Opção

2. Go Pricing

O aplicativo Go Pricing não possui uma versão gratuita, mas impulsiona milhares de vendas e algumas excelentes avaliações no marketplace da CodeCanyon. Isso sem dizer que por apenas US$27 você recebe um dos melhores plugins de tabela de preços no mercado.

Go Pricing – Tabelas de Preços Responsivas no WordPress

Go Pricing – Tabelas de Preços Responsivas no WordPress

O que torna o Go Pricing tão especial? Para começar, ele disponibiliza planos de preços incrivelmente elegantes, com cores modernas e bastante espaço em branco para não ficar com um aspecto bagunçado. Você também pode escolher entre uma grande coleção de temas, alguns dos quais são feitos apenas para determinadas indústrias. Também adoramos o fato de que o plugin se integra com diversos construtores de páginas e possui shortcodes para garantir que ninguém precise ser um mago dos códigos para criar tabelas de preços.

Custo

Uma taxa única de US$27 com a opção para estender o suporte em um ano por US$8,25.

Recursos que tornam a Go Pricing uma Ótima Opção

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Se estiver interessado em tabelas de preços e de comparações limpas e sem tantos enfeites, o Pricing Tables WordPress Plugin parece ser uma boa opção para você. Ele acompanha tanto uma versão gratuita quanto premium, disponibilizada a partir de US$29 por ano para um website e avençando até US$99 por ano para websites ilimitados. Alguns dos recursos premium são muito bons, incluindo um complemento do WooCommerce e integração com Google Analytics.

Pricing Tables WordPress Plugin – Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

Algumas das demais integrações nas versões premium incluem Easy Digital Downloads, Stripe e um complemento para alternar preços. Além disso, você consegue iniciar o processo de design a partir de 10 modelos predefinidos. Conforme mencionamos, esse é um dos plugins de tabela de preços mais simples que existe, por isso o recomendamos para aqueles que não precisam de elementos como animações ou recursos gráficos.

Custo

O núcleo do plugin é gratuito.

O plugin premium é disponibilizado por US$29 por ano para um site, US$59 por ano para cinco sites e US$99 por ano para sites ilimitados.

Recursos que tornam a Make Easy Pricing Tables uma Ótima Opção

4. Pricing Table by Supsystic

A equipe de desenvolvimento da Supsystic é conhecida por criar todos os tipos de plugins para galerias de fotos, pop-ups, tabelas de dados e muito mais. Mas vamos nos focar no plugin Pricing Table, que é oferecido como uma solução gratuita com muitos recursos com os quais você pode se divertir. Na verdade, a versão gratuita do plugin possui recursos para modelos predefinidos, animações e personalizações de botões. É possível até mesmo importar e exportar as informações da sua tabela com facilidade.

Pricing Table by Supsystic

Pricing Table by Supsystic

Também gostamos do visual do plugin premium, já que ele é disponibilizado a partir de US$39 para um site e você recebe um pacote de modelos premium e restrições de acesso para determinadas funções. Em geral, eu diria que esse é um dos melhores plugins de tabela de preços em que é possível usar apenas seu núcleo gratuito sem precisar da versão paga. No entanto, os modelos premium são muito legais e não custam tanto assim.

Custo

Um plano gratuito é disponibilizado.

Upgrade para a versão premium por US$39 para um site. Ou US$69 para suporte em até cinco sites. Ou US$149 para sites ilimitados.

Recursos que tornam a Pricing Table by Supsystic uma Ótima Opção

5. CSS3 Responsive WordPress Compare Pricing Tables

Pelo preço de US$20, o plugin de tabela de preços CSS3 Responsive oferece um valor incrível. Ele é vendido apenas no marketplace da CodeCanyon e você deve ter em mente que nenhuma versão gratuita está disponível. Dito isso, a maioria das pessoas não se incomoda com a ideia de pagar US$20 por um plugin de preços muito bem avaliado. Em geral, o plugin possui alguns modelos bonitos para que você possa começar. É possível modificar cores e fontes, ao mesmo tempo em que destaca alguns dos melhores planos que sua empresa tem a oferecer.

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

A maioria das tabelas de preços nesta lista são responsivas, mas essa se mostrou especialmente boa após fazer testes no meu celular e tablet. Também parece que o desenvolvedor é ativo e está disposto a criar novos recursos e lançá-los através de atualizações. Por exemplo, no momento em que escrevo esse artigo, estou vendo três lançamentos importantes de recursos – colunas deslizantes, modo responsivo e importação e exportação de dados.

Custo

US$20 por todos os recursos.

Você pode pagar US$5,63 para estender o suporte ao cliente por mais um ano. Nenhuma versão gratuita do plugin é disponibilizada.

Recursos que tornam a CSS3 Pricing Tables Grids uma Ótima Opção

6. ARPrice – Responsive WordPress Pricing Table Plugin

O plugin ARPrice também é vendido no website da CodeCanyon, mas pelo preço de US$23. Começamos a perceber que muitas empresas e indivíduos preferem pagar preços bastante baixos para obter todos os recursos que precisam – ao invés de trabalhar com plugins gratuitos que não tenham algumas funcionalidades. Independentemente disso, este plugin de tabela de preços apresenta um dos melhores visuais dessa lista, pois suporta diversos tipos de itens de mídia, como imagens de plano de fundo e ícones.

ARPrice – Plugin WordPress de Tabela de Preços

ARPrice – Plugin WordPress de Tabela de Preços

O designer no back-end é um editor visual que revela exatamente como sua tabela de preços ficará quando estiver online. Em seguida, você pode escolher se seus planos de preços serão anuais, mensais ou entre várias outras opções de tempo disponíveis. O processo começa com a seleção de um modelo e, na sequência, é possível importar dados, alterar efeitos e selecionar suas fontes. Em geral, o plugin ARPrice oferece uma interface de usuário bonita com resultados ainda melhores no front-end.

Custo

Uma taxa única de US$23 com um custo adicional de US$6,75 para estender seu suporte por um ano.

Recursos que tornam a ARPrice uma Ótima Opção

7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

Aqui está outro plugin premium de tabela de preços com um bom preço. O WP Pricing Table Builder acompanha cerca de 90 modelos de tabela para que você utilize. Há também um gerador de temas personalizados e um construtor de arrastar e soltar para ter a experiência definitiva de design visual.

WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

Gosto desse plugin porque ele não tenta criar uma biblioteca de modelos com centenas de opções. Ao invés disso, é possível afirmar que os desenvolvedores se focaram na qualidade e passaram um bom tempo criando todos os modelos da forma mais moderna e bonita possível. O gerador de cores de temas é um recurso interessante que não parece estar presente em nenhum outro plugin. Ele permite que você gere um tema colorido, usando uma cor da sua escolha. Assim, garante que, pelo menos, a cor da sua tabela de preços terá um bom visual.

Custo

O plugin está disponível por US$24.

O upgrade para 12 meses de suporte sai por US$7,13.

Recursos que tornam a WP Pricing Table Builder uma Ótima Opção

8. Pricing Table – Price list, Price Table, Easy Pricing Table

O plugin Pricing Table – Price List foi desenvolvido pelo pessoal da A WP Life. É uma solução mais nova no mercado, mas ainda assim respeitada. A versão gratuita possui opções bonitas para personalizações, incluindo alguns modelos que acompanham o plugin. Também são oferecidas animações e você pode inserir itens como ícones e listas em destaque. Posicione botões de “Comprar Agora” nas listas e incorpore tags nos itens para detalhes como “Em destaque” ou “Popular”.

Suas páginas lentas impactam negativamente seus números de vendas? Aproveite a arquitetura otimizada para desempenho da Kinsta e venda mais! Confira nossos planos de hospedagem

Pricing Table – Price list, Price Table, Easy Pricing Table

Pricing Table – Price list, Price Table, Easy Pricing Table

A versão premium deste plugin te oferece todos os recursos, juntamente com 19 modelos adicionais. Ela custa apenas US$9,99, portanto, se encontrar um modelo que combina com sua marca, vá em frente com esse plugin.

Custo

Gratuito e US$9,99 pela versão premium.

Recursos que tornam a Pricing Table uma Ótima Opção

9. WRC Pricing Tables

O plugin WRC Pricing Tables é disponibilizado como uma versão gratuita, mas você tem a escolha de fazer um upgrade por US$10. A versão premium é um pouco mais avançada, com mais de 500 modelos extras, uma integração com PayPal e alterações de preço para configurações diferentes, como planos mensais e anuais. Diversos outros recursos acompanham o plano premium, então vale a pena considerá-lo por ter um preço tão baixo.

WRC Pricing Tables

WRC Pricing Tables

O plugin gratuito é ótimo para construir tabelas de preços simples e você pode criar um número ilimitado de linhas e colunas. Todo o design é feito com a ajuda de um editor de arrastar e soltar. Um dos detalhes que mais gostamos no plugin WRC Pricing Tables é que você pode utilizar um selecionador de cores, que essencialmente leva em conta sua cor escolhida e gera um design aleatório de tabela.

Custo

Gratuito. US$10 pela versão premium.

Recursos que tornam a WRC Pricing Tables uma Ótima Opção

Qual É o Melhor Plugin WordPress de Tabela de Preços Para Você?

Todos os plugins listados acima estão prontos para serem testados. No entanto, ainda consigo facilitar um pouco mais sua escolha, com algumas recomendações adicionais.

Todos os outros plugins da tabela de preços nesta lista também têm suas vantagens. No entanto, esses são os que eu mais gosto de aproveitar.

Mas e se você não estiver interessado em usar um plugin e quiser codificar sua própria tabela de preços?

Veja como fazer isso!

Como construir uma tabela de preços no WordPress a partir do zero

Construir uma tabela de preços a partir do zero é feito com código HTML que nos dará a estrutura para a nossa tabela e em seguida, estilizando-a com CSS.

Para começar, faça o login no seu site WordPress, navegue até o painel e clique em Páginas → Adicionar Novo. Você também pode adicionar o código a uma página já existente na qual gostaria que suas tabelas de preços fossem exibidas.

Depois que o editor do WordPress for carregado, alterne para o modo de texto e cole o seguinte código:

<div class="pricing-table">
<div class="one-third first">
<ul>
       <li class="header">Basic</li>
       <li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
              <li>List Item #4</li>
              <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul> 
       <li class="header-blue">Pro</li>
       <li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
<div class="one-third">
<ul>
       <li class="header">Business</li>
       <li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
</div>

O código é bastante simples: primeiro, criamos um “div” para manter nosso código de tabela de preços e facilitar o estilo deles com CSS. Então, como estamos criando três tabelas, cada uma delas é encapsulada em uma coluna de um terço. A última parte é a própria tabela, com classes adicionadas para um cabeçalho e ponto de preço, o que fará com que elas se destaquem no restante da tabela.

Antes de clicar em Publicar ou Atualizar, substitua o texto entre as tags [pre] <li> e </li> [/pre] pelo seu e adicione o link ao seu formulário de pagamento após a parte href do link .

Depois de substituir todas as informações, vá em frente e clique em Publicar se você criou uma nova página ou em Atualizar, se tiver adicionado a tabela a uma página existente.

Se você olhar sua página agora, perceberá que a tabela de preços parece muito simples. Vamos adicionar um pouco de estilo a ele.

Se você estiver usando um tema filho, adicione o seguinte código à folha de estilo do seu tema filho ou ao editor CSS personalizado.

A primeira parte do código garantirá que nossa tabela de preços seja exibida em colunas e, se você quiser ou precisar exibir mais de três tabelas, essas classes permitirão substituí-las facilmente:

/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;

}
.first {
clear: both;
margin-left: 0;
}

A segunda parte do código dará o estilo real para as tabelas.

/* ## Pricing Table
 --------------------------------------------- */

.pricing-table {
 line-height: 1;
 }
 li.header {
 background-color: #2f79a9;
 color: #fff !important;
 font-size: 25px;
 border-bottom: 1px solid #2f79a9 !important;
 margin-bottom: 0 !important;
 }
 li.grey-blue {
 background-color: #569dcc;
 color: #fff !important;
 font-size: 20px;
 }

li.header-blue {
 background-color: #00b9eb;
 color: #fff !important;
 border-bottom: 1px solid #00b9eb !important;
 font-size: 25px;
 margin-bottom: 0 !important;
 }
 li.light-blue {
 background-color: #72dffd;
 color: #fff !important;
 font-size: 20px;
 }

.middle {
 box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 }
 .pricing-table .one-third {
 background-color: #fff;
 margin: 20px 5px;
 padding: 40px;
 width: 32.33%;
 }

.pricing-table .one-third:nth-child(3n+1),
 .pricing-table .one-third:nth-child(3n+2),
 .pricing-table .one-third:nth-child(3n) {
 border: 1px solid #ddd;
 }

.pricing-table .one-third ul {
 margin: 0;
 }

.pricing-table ul li {
 border-bottom: 1px solid #ddd;
 color: #333;
 margin-bottom: 10px;
 padding: 10px;
 text-align: center;
 list-style-type: none;
 }

.pricing-table a.pricing-button {
 background-color: #00b9eb;
 border: 3px solid #00b9eb;
 color: #fff;
 display: block;
 text-align: center;
 padding: 16px 24px;
 }

.pricing-table a.pricing-button:hover {
 background-color: #000;
 border: 3px solid #000;
 color: #fff;
 }

/* Pricing Table - Media Queries for Mobile Devices
 --------------------------------------------- */

@media only screen and (max-width: 1140px) {
 .pricing-table .one-third {
 width: 32%;
 }
 }

@media only screen and (max-width: 800px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 568px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 480px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 420px) {
 .pricing-table .one-third {
 width: 100%;
 margin: 20px 0;
 }
 }

Adicionamos um estilo simples e básico para as tabelas de preços e estilizamos o cabeçalho e o preço de maneira diferente para que eles se destacassem. Também adicionamos uma sombra de caixa ao redor da tabela do meio para destacar esse pacote específico. Finalmente, adicionamos algumas consultas de mídia para garantir que as tabelas sejam responsivas.

tabela de preços no wordpress com código

Tabela de preços no wordpress com código

Depois de colar os dois snippets CSS, vá em frente e clique em Atualizar arquivo. Agora, dê uma olhada na sua página e verifique se tudo é exibido da maneira desejada.

Se você tem alguma dúvida sobre as melhores tabelas de preços ou sugestões para outras pessoas, compartilhe conosco nos comentários!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos