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

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.