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:  

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.