fbpx
Plugin de afiliación para WordPress
  1. Inicio
  2. Base de conocimientos
  3. Mostrar opciones de precios mediante tablas en su página de ventas

Mostrar opciones de precios mediante tablas en su página de ventas

Sus afiliados quieren opciones, pero no demasiadas. Este artículo proporciona un ejemplo de cómo puede ofrecer a sus miembros 3 opciones diferentes en una página de ventas utilizando una combinación de CSS y HTML. Este ejemplo asume que usted tiene una comprensión básica de HTML y CSS.

Tenga en cuenta que este ejemplo se proporciona como punto de partida. Puede ser copiado y pegado en sus páginas, y entonces usted puede cambiar los enlaces href para reflejar sus SmartTags de enlace de compra, y los atributos de estilo en las diferentes secciones para ajustar la apariencia. Al final de este artículo, encontrará el CSS y el HTML en archivos separados por si usted y/o su desarrollador desean editar estas diferentes áreas de forma más exhaustiva.

Para crear tablas de precios en su página, simplemente copie y pegue el siguiente código en un bloque HTML, o dentro de la vista "Texto" del editor si utiliza el antiguo editor de WordPress:

<estilo>
@media sólo pantalla y (max-width: 600px) {
  .columnas {
    anchura: 100%;
  }
}
</estilo>
<div clase="columnas" estilo="box-sizing: border-box; float: izquierda; anchura: 33.3%; acolchado: 8px;">
	<ul clase="precio" estilo="box-sizing: border-box; list-style-type: ninguno; frontera: 1px sólido #eee; margen: 0; acolchado: 0; -webkit-transición: 0.3s; transición: 0.3s;">
		<li clase="cabecera" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #358E39; color: blanco; tamaño de fuente: 25px; sombra de texto: 0 1px 1px rgba(0,0,0,0.4);">Producto 1</li>
		<li clase="gris" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #eee; tamaño de fuente: 20px;">$ 9,99 / año</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">10 vídeos</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Ventajas increíbles</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Correos electrónicos mensuales</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Acceso limitado</li>
		<li clase="gris" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #eee; tamaño de fuente: 20px;">
			<a href="https://membermouse.com/es/checkout/?rid=pK2qyz" clase="botón" estilo="box-sizing: border-box; color de fondo: #4CAF50; frontera: ninguno; color: blanco; acolchado: 10px 25px; alinear texto: centro; decoración de texto: ninguno; tamaño de fuente: 18px;">Inscribirse</a>
		</li>
	</ul>
</div>
<div clase="columnas" estilo="box-sizing: border-box; float: izquierda; anchura: 33.3%; acolchado: 8px;">
	<ul clase="precio2" estilo="box-sizing: border-box; list-style-type: ninguno; frontera: 1px sólido #eee; margen: 0; acolchado: 0; -webkit-transición: 0.3s; transición: 0.3s; box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);">
		<li clase="cabecera" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color: blanco; tamaño de fuente: 25px; sombra de texto: 0 1px 1px rgba(0,0,0,0.4); color de fondo: #4CAF50;">Producto 2</li>
		<li clase="gris" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #eee; tamaño de fuente: 20px;">$ 24,99 / año</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">25 Vídeos</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Aún más ventajas</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Correos electrónicos quincenales</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Acceso ampliado</li>
		<li clase="gris" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #eee; tamaño de fuente: 20px;">
			<a href="https://membermouse.com/es/checkout/?rid=p57LaD" clase="botón" estilo="box-sizing: border-box; color de fondo: #4CAF50; frontera: ninguno; color: blanco; acolchado: 10px 25px; alinear texto: centro; decoración de texto: ninguno; tamaño de fuente: 18px;">Inscribirse</a>
		</li>
	</ul>
</div>
<div clase="columnas" estilo="box-sizing: border-box; float: izquierda; anchura: 33.3%; acolchado: 8px;">
	<ul clase="precio" estilo="box-sizing: border-box; list-style-type: ninguno; frontera: 1px sólido #eee; margen: 0; acolchado: 0; -webkit-transición: 0.3s; transición: 0.3s;">
		<li clase="cabecera" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #358E39; color: blanco; tamaño de fuente: 25px; sombra de texto: 0 1px 1px rgba(0,0,0,0.4);">Producto 3</li>
		<li clase="gris" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #eee; tamaño de fuente: 20px;">$ 49,99 / año</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">50 Vídeos</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Más ventajas</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">Correos electrónicos semanales</li>
		<li estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro;">El mayor acceso</li>
		<li clase="gris" estilo="box-sizing: border-box; borde inferior: 1px sólido #eee; acolchado: 20px; alinear texto: centro; color de fondo: #eee; tamaño de fuente: 20px;">
			<a href="https://membermouse.com/es/checkout/?rid=pGpM60" clase="botón" estilo="box-sizing: border-box; color de fondo: #4CAF50; frontera: ninguno; color: blanco; acolchado: 10px 25px; alinear texto: centro; decoración de texto: ninguno; tamaño de fuente: 18px;">Inscribirse</a>
		</li>
	</ul>
</div>
HTML

Este es el aspecto del código anterior cuando se utiliza:


Puede utilizar los documentos adjuntos para ver el HTML y el CSS en archivos separados. Esto le permite realizar rápidamente ediciones y cambios según sea necesario.

Archivos adjuntos

¿Le ha resultado útil este artículo?
Sí No

¿No encuentra la respuesta que busca?

Póngase en contacto con nuestro equipo de atención al cliente
Póngase en contacto con nosotros
WP plugin de membresía
es_ES ES
es_ES ES en_US EN de_DE DE fr_FR FR pt_BR PT
Características
Empresa
Recursos
Conectar
Desde el blog
10 nichos de mercado que le servirán de inspiración
Guía completa para nombrar los niveles de afiliación
¿Quiere montar un negocio de afiliación?
16 de los mejores temas de membresía de WordPress en 2023

2025 MemberMouse, LLC   Política de privacidad   |   Reembolsos   |   Condiciones generales   |   Divulgación de la FTC