• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

Cómo poner una tabla de precios en WordPress con un theme de Genesis

26/10/2017 Por Ramón 2 comentarios

Es muy recomendable indicar varios precios de un mismo producto o servicio con diferentes opciones y extras para que el cliente elija el que más conveniente le resulte.

El proceso para añadir una tabla de precios es muy sencillo, simplemente debemos realizar 2 pasos:

1.- CSS

El primero añadir este pequeño código CSS adicional:

/* Tabla de precios/* Tabla de precios--------------------------------------------- */.amount { font-size: 38px; text-align: center;}
.pricing-table { line-height: 1;}
.pricing-table h4 { background: none repeat scroll 0 0 #ddd; border: 1px solid #ddd; color: #333; padding: 20px 0 30px; text-align: center !important; text-transform: uppercase;}
.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;}
.pricing-table a.button { background-color: #ddd; border: 3px solid #fff; color: #000; display: block; text-align: center;}
.pricing-table a.button:hover { background-color: #000; border: 3px solid #000; color: #fff;}
/* Tabla de precios - Responsive Media Queries --------------------------------------------- */
@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; }}

 

2.- HTML

Y el segundo, añadir este código HTML en la página en la que queramos mostrar la tabla de precios:

 

<div class="pricing-table">
<div class="one-third first">
<h4>Básico
<span class="amount">190€</span></h4>
<p style="padding-left: 30px;">- Item 1<br>- Item 2<br>- Item 3</p>

<a class="button" href="#">Lo quiero!</a>

</div>
<div class="one-third">
<h4 style="background-color: #d5abab;">Estándar
<span class="amount">290€</span></h4>
<p style="padding-left: 30px;">- Item 1<br>- Item 2<br>- Item 3</p>
<a class="button" style="background-color: #d5abab;" href="#">Lo quiero!</a>

</div>
<div class="one-third">
<h4>Premium
<span class="amount">390€</span></h4>
<p style="padding-left: 30px;">- Item 1<br>- Item 2<br>- Item 3</p>
<a class="button" href="#">Lo quiero!</a>

</div>
</div>

Si queremos modificar el color de la columna central, deberemos hacerlo en este código:

style="background-color: #d5abab;"

que se repite 2 veces. Si queremos que las 3 columnas tengan el mismo color, simplemente habría que eliminar ese mismo código en los 2 lugares en los que aparece.

Gracias a estos 2 simples pasos, no necesitaremos instalar ningún plugin.

Si tienes cualquier problema aplicando esta solución, déjanoslo en los comentarios y estaremos encantados de responderte.

Quizá te interese:

posts relacionados genesis sin plugins
Mostrar posts relacionados en Genesis sin plugins
Google recomienda usar SSL
Alergias, ejercicio, campañas locales y paquetizar servicios

Publicado en: Diseño web Etiquetado como: genesis, precios, pricing, tabla, wordpress

Interacciones con los lectores

Comentarios

  1. CubeNode dice

    08/11/2017 a las 10:24

    ¡Dios, Gracias!! Andaba buscando esto por todas partes, así que tenía que dejarte un gran GRACIAS aquí debajo <3

    Responder
    • Ramón dice

      08/11/2017 a las 10:34

      Un placer haberte sido de ayuda! Se agrade tu comentario.

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!