fbpx
Plugin de associação do WordPress
  1. Início
  2. Base de conhecimento
  3. Exibir opções de preços usando tabelas em sua página de vendas

Exibir opções de preços usando tabelas em sua página de vendas

Seus membros querem opções, mas não muitas. Este artigo fornece um exemplo de como você pode oferecer aos seus membros 3 opções diferentes em uma página de vendas usando uma combinação de CSS e HTML. Este exemplo pressupõe que você tenha um conhecimento básico de HTML e CSS.

Lembre-se de que este exemplo é fornecido como ponto de partida. Ele pode ser copiado e colado em suas páginas e, em seguida, você pode alterar os links href para refletir suas SmartTags de link de compra e os atributos de estilo nas diferentes seções para ajustar a aparência. No final deste artigo, você encontrará o CSS e o HTML em arquivos separados, caso você e/ou seu desenvolvedor queiram editar essas diferentes áreas de forma mais completa.

Para criar tabelas de preços em sua página, basta copiar e colar o código a seguir em um bloco HTML ou na visualização "Texto" do editor se estiver usando o antigo editor do WordPress:

<estilo>
@media somente tela e (largura máxima: 600px) {
  .colunas {
    largura: 100%;
  }
}
</estilo>
<div classe="colunas" estilo="Dimensionamento de caixa: caixa de borda; flutuar: esquerda; largura: 33.3%; acolchoamento: 8px;">
	<ul classe="preço" estilo="Dimensionamento de caixa: caixa de borda; tipo de estilo de lista: nenhum; fronteira: 1px sólido #eee; margem: 0; acolchoamento: 0; -webkit-transition: 0.3s; transição: 0.3s;">
		<li classe="cabeçalho" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #358E39; cor: branco; tamanho da fonte: 25px; sombra de texto: 0 1px 1px rgba(0,0,0,0.4);">Produto 1</li>
		<li classe="cinza" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #eee; tamanho da fonte: 20px;">$ 9,99 / ano</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">10 Vídeos</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">Vantagens incríveis</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">E-mails mensais</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">Acesso limitado</li>
		<li classe="cinza" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #eee; tamanho da fonte: 20px;">
			<a href="https://membermouse.com/pt/checkout/?rid=pK2qyz" classe="botão" estilo="Dimensionamento de caixa: caixa de borda; Cor de fundo: #4CAF50; fronteira: nenhum; cor: branco; acolchoamento: 10px 25px; alinhamento de texto: centro; Decoração de texto: nenhum; tamanho da fonte: 18px;">Registrar-se</a>
		</li>
	</ul>
</div>
<div classe="colunas" estilo="Dimensionamento de caixa: caixa de borda; flutuar: esquerda; largura: 33.3%; acolchoamento: 8px;">
	<ul classe="preço2" estilo="Dimensionamento de caixa: caixa de borda; tipo de estilo de lista: nenhum; fronteira: 1px sólido #eee; margem: 0; acolchoamento: 0; -webkit-transition: 0.3s; transição: 0.3s; sombra de caixa: 0 8px 12px 0 rgba(0,0,0,0.2);">
		<li classe="cabeçalho" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; cor: branco; tamanho da fonte: 25px; sombra de texto: 0 1px 1px rgba(0,0,0,0.4); Cor de fundo: #4CAF50;">Produto 2</li>
		<li classe="cinza" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #eee; tamanho da fonte: 20px;">$ 24,99 / ano</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">25 Vídeos</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">Ainda mais vantagens</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">E-mails quinzenais</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">Acesso estendido</li>
		<li classe="cinza" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #eee; tamanho da fonte: 20px;">
			<a href="https://membermouse.com/pt/checkout/?rid=p57LaD" classe="botão" estilo="Dimensionamento de caixa: caixa de borda; Cor de fundo: #4CAF50; fronteira: nenhum; cor: branco; acolchoamento: 10px 25px; alinhamento de texto: centro; Decoração de texto: nenhum; tamanho da fonte: 18px;">Registrar-se</a>
		</li>
	</ul>
</div>
<div classe="colunas" estilo="Dimensionamento de caixa: caixa de borda; flutuar: esquerda; largura: 33.3%; acolchoamento: 8px;">
	<ul classe="preço" estilo="Dimensionamento de caixa: caixa de borda; tipo de estilo de lista: nenhum; fronteira: 1px sólido #eee; margem: 0; acolchoamento: 0; -webkit-transition: 0.3s; transição: 0.3s;">
		<li classe="cabeçalho" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #358E39; cor: branco; tamanho da fonte: 25px; sombra de texto: 0 1px 1px rgba(0,0,0,0.4);">Produto 3</li>
		<li classe="cinza" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #eee; tamanho da fonte: 20px;">$ 49,99 / ano</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">50 Vídeos</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">A maioria das vantagens</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">E-mails semanais</li>
		<li estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro;">O maior acesso</li>
		<li classe="cinza" estilo="Dimensionamento de caixa: caixa de borda; borda inferior: 1px sólido #eee; acolchoamento: 20px; alinhamento de texto: centro; Cor de fundo: #eee; tamanho da fonte: 20px;">
			<a href="https://membermouse.com/pt/checkout/?rid=pGpM60" classe="botão" estilo="Dimensionamento de caixa: caixa de borda; Cor de fundo: #4CAF50; fronteira: nenhum; cor: branco; acolchoamento: 10px 25px; alinhamento de texto: centro; Decoração de texto: nenhum; tamanho da fonte: 18px;">Registrar-se</a>
		</li>
	</ul>
</div>
HTML

Aqui está a aparência do código acima quando usado:


Você pode usar os documentos anexados para ver o HTML e o CSS em arquivos separados. Isso permite que você faça edições e alterações rapidamente, conforme necessário.

Anexos de artigos

Este artigo foi útil?
Sim Não

Não consegue encontrar a resposta que está procurando?

Entre em contato com nossa Equipe de Sucesso do Cliente
Entre em contato conosco!
Plugin de associação do WP
pt_BR PT
pt_BR PT en_US EN es_ES ES de_DE DE fr_FR FR
Recursos
Empresa
Recursos
Conectar
Do blog
10 sites de associação de nicho que vão inspirar você
O guia completo para nomear seus níveis de associação
Então você quer começar um negócio de associação?
16 dos melhores temas de associação do WordPress em 2023

© 2025 MemberMouse, LLC   Política de privacidade   |   Reembolsos   |   Termos e condições   |   Divulgação da FTC