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?

  • Uma tabela de preços permite destacar e comparar de forma organizada seus serviços ou pacotes oferecidos.
  • Os recursos mais importantes são exibidos em uma tabela de preços, acabando com a desordem e deixando-a para outra página.
  • A tabela de preços possui botões com call-to-actions claros, que demonstram às pessoas como prosseguir com a compra.
  • A maioria das tabelas de preços utiliza nomes de pacotes/planos que facilitam o entendimento por parte dos clientes.
  • Você consegue enfatizar certas palavras, planos ou recursos, através do uso de fontes maiores ou ilustrações.
  • É muito mais interessante ler uma tabela de preços baseada em elementos gráficos do que uma que tenha somente texto.
  • Você consegue melhorar as conversões demonstrando urgência (por exemplo, “o tempo para essa oferta está acabando”) ou oferecendo testes gratuitos.
  • As tabelas de preços requerem um espaço mínimo na página. Portanto, você pode adicionar mais informações, como um FAQ ou um chat para o cliente falar com seus vendedores.

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:

  • Opções gratuitas e premium – Meus plugins de tabela de preços favoritos oferecem uma tabela padrão para melhorar o visual dos seus preços. Além disso, sua versão premium com recursos extras não deve ser muito cara.
  • Integrações com os melhores construtores de páginas – Alguns dos construtores de páginas até mesmo acompanham suas próprias tabelas de preços. Dentre os construtores de páginas mais populares temos Divi Builder, Elementor e WPBakery.
  • Modelos ou temas para lançar as tabelas de preços em segundos.Também gostamos de ver ferramentas de personalização para cores, fontes e ícones.
  • Uma configuração para exibir selos em determinados planos, como “Melhor Preço” ou plano “Mais Popular”.
  • Múltiplas opções de moedas para usuários ao redor do mundo.
  • Suporte para botões grandes e personalizáveis em cada plano de preços.
  • Um construtor de arrastar e soltar também seria excelente.
  • Também gostamos de ter acesso a CSS e HTML, pois usuários mais avançados poderão buscar oportunidades para fazer ajustes mais complexos.

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. Pricing Table – Price list, Price Table, Easy Pricing Table
  8. WRC Pricing Tables
  9. 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

  • O plano gratuito oferece as ferramentas necessárias para uma vasta gama de pequenas empresas, uma vez que você recebe tabelas e planos ilimitados.
  • O preço da versão premium também é baixo.
  • Os modelos têm visual moderno e são altamente personalizáveis, com diversos botões e fontes para ajustar.
  • Ícones e outros recursos visuais são acessíveis.
  • Você consegue incluir quantos recursos quiser em seus planos de preços.
  • Os botões de call-to-action podem direcionar para sistemas de pagamento terceirizados, como PayPal.
  • Uma grande variedade de símbolos de moedas está disponível para atingir países diferentes.
  • É possível exibir uma insígnia nos planos recomendados.
  • Planos recorrentes (por mês ou ano) podem ser exibidos com configurações especiais.

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

  • Cada parte da sua tabela de preços é dividida em sua própria seção no editor visual. Isso inclui o cabeçalho, o corpo e a área do botão.
  • Mas de 250 tabelas de demonstração são oferecidas após a aquisição do plugin. Isso permite que a maioria das empresas escolha um modelo e lance sua página de preços em questão de minutos.
  • Elementos de arrastar e soltar podem ser incluídos com as integrações com construtores de páginas. O Go Pricing funciona com Beaver Builder, Elementor e WPBakery.
  • O processo de criação da tabela de preços é fácil para usuários com todos os níveis de experiência. O plugin possui uma excelente interface no back-end, com opções para shortcodes, importações e configurações.
  • Inclui animações para deixar suas tabelas de preços mais atrativas.
  • Use mais de 2000 ícones para tornar suas tabelas ainda mais visuais.
  • Um modulo CSS é oferecido para aqueles que desejam ir além dos recursos básicos.
  • Adicione recursos únicos, como elementos de mídia, botões do PayPal e Google Maps.

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

  • Os designs das tabelas de preços são limpos e simples, possibilitando a criação de um visual moderno sem efeitos desnecessários.
  • Você pode ajustar as cores e demais elementos de praticamente todos os itens da tabela de preços. Isso inclui colunas, botões e fontes.
  • Todas as tabelas de preços são construídas com uma lista simples de campos visuais no back-end. Sua configuração fica formatada da mesma maneira que a tabela de preços aparecerá no front-end.
  • É possível especificar se um ou múltiplos planos serão destacados em relação aos demais.
  • Você pode arrastar e soltar as colunas para reordená-las.
  • Um módulo CSS customizado é disponibilizado para criar personalizações mais avançadas em suas tabelas de preços.
  • Até mesmo a versão gratuita oferece suporte a um número ilimitado de linhas na tabela de preços.
  • Algumas das versões premium possuem excelentes integrações para ferramentas como WooCommerce, Google Analytics e Stripe.

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

  • O plugin Pricing Table da Supsystic é o mais próximo de apresentar uma solução completa de tabela de preços em sua versão gratuita. O único upgrade que você recebe com o plugin premium são alguns modelos melhores.
  • Todas as tabelas de preços são bonitas, com elementos responsivos e cores brilhantes.
  • Os modelos da versão gratuita são ótimos e os premium são incríveis.
  • Escolha entre ter um botão que exiba às pessoas ofertas especiais, como pagar um ano adiantado ou realizar a compra hoje.
  • Apresente alguns de seus planos com ícones visuais.
  • Use ferramentas como shortcodes, barras de cores e construtor visual para garantir que não precisará encostar em nenhuma linha de código durante o processo de criação.
  • O plugin acompanha animações para tornar seus planos mais atrativos para os visitantes.
  • Imagens e vídeos também são suportados, para que você possa exibir certos recursos ou partes de sua empresa.
  • Um construtor de arrastar e soltar fica localizado no back-end do seu painel WordPress.

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

  • O preço é, com certeza, um dos melhores que vimos para os recursos que você recebe com o plugin de preços.
  • A grande coleção de ferramentas de personalização permite criar milhares de tabelas de preços únicas. Isso inclui 20 versões de cores, 60 fitas, 42 ícones em formato de X e dois estilos de tabela.
  • Crie um número ilimitado de linhas e colunas.
  • Acesse os módulos CSS e HTML para ter personalização adicional.
  • Você recebe opções para ajustar a largura e a altura de todas as colunas e linhas.
  • Compatibilidade com multisite.
  • Shortcodes te ajudam a implementar suas tabelas de preços em qualquer lugar dos seus websites.
  • Ferramentas de importação e exportação de dados permitem que você mova seus dados para outras tabelas ou os importe a partir de uma planilha.
  • Suporte a ícones para incluir recursos visuais, como sinais de verificação e X.
  • Suporte para animações e mídia para adicionar mais recursos visuais e fazer seus planos se destacarem.

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

  • É um plugin premium bastante acessível.
  • Mais de 300 modelos de tabela de preços são oferecidos para que você faça download através do plugin.
  • As ferramentas de personalização são excelentes, com opções ilimitadas de cores, modelos completamente responsivos, botão para alternar preços e mais de três mil ícones.
  • Os efeitos de animação são destinados a te ajudar a tornar suas tabelas de preços mais atraentes.
  • Há um módulo CSS e um sistema de orientação CSS para personalizações avançadas.
  • Você recebe algumas integrações únicas com outros programas de terceiros, como Google Maps.
  • O editor de modelos em tempo real oferece uma linda interface visual para ajustar itens como colunas, cabeçalhos e planos de fundo.
  • Há um recurso extra de “vitrine da equipe”, que basicamente usa o mesmo formato de colunas e permite que você compartilhe informações sobre os colaboradores do website.
  • O plugin WordPress de tabela de preços é compatível com os mais populares construtores de páginas, como Elementor, Gutenberg e WPBakery.

7. 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”.

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

  • Você recebe todos os bons recursos na versão gratuita. A única razão necessária para fazer o upgrade é caso queira um modelo em especial que não esteja no plugin grátis.
  • Diversos modelos bonitos de tabela de preços estão inclusos na versão gratuita. Você também pode fazer o upgrade para receber mais 20.
  • Todas as tabelas que acompanham o plugin são consideradas totalmente responsivas.
  • Ícones permitem que você crie tabelas mais visualmente atraentes.
  • Os shortcodes ajudam a posicionar suas tabelas em qualquer lugar no seu website.
  • Tabelas de preços podem ser adicionadas e removidas de seu site com o clique de um botão.
  • As opções de personalização incluem cores ilimitadas, cores para botões, cores de cabeçalho e mais.
  • Estilos de CSS personalizado podem ser criados no painel.
  • A área de design não é um construtor completamente visual, mas é configurada com colunas múltiplas para simular como as tabelas ficarão em seu site.

8. 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

  • O plugin WRC Pricing Tables tem recursos excelentes na versão gratuita, com uma solução premium por apenas US$10 (taxa única).
  • O plugin oferece shortcodes para que você posicione suas tabelas de preços em qualquer lugar de seu website WordPress. Por exemplo, um shortcode poderia, tecnicamente, ser colocado em qualquer página, post ou até mesmo em um widget.
  • Os ícones da Font Awesome adicionam um pouco mais de recursos visuais ao seu design.
  • O plugin também oferece suporte a Google Fonts.
  • A integração com o botão do PayPal assegura que você receba dinheiro de seus clientes.
  • Muitos modelos acompanham o plugin.
  • Você pode adicionar um número ilimitado de linhas e colunas, ao mesmo tempo em que pode duplicar as tabelas de preços e salvá-las para usar depois.
  • Desenvolvedores avançados têm a chance de melhorar suas tabelas com CSS personalizado.

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!

Matteo Duò Kinsta

Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.