Argentina
Chile
Colombia
Costa Rica
Estados Unidos
Guatemala
Honduras
México
Paraguay
Perú
República Dominicana
Uruguay
Venezuela
En la era de la inmediatez, ofrecer una información concisa y visual puede marcar la diferencia a la hora de vender tus productos o servicios. Es importante encontrar una forma eficiente de mostrar las características y precios de tus servicios a tus usuarios, así como poder compararlos rápidamente.
Crear una tabla de precios para tu web es la solución. En este artículo te explicaré que es una tabla de precios y qué debes tener en cuenta a la hora de crearla. Además, aprenderás crear tu propia tabla de precios en WordPress, con plugins y sin ellos, o en una web a medida gracias a Bootstrap.
¿Vamos a ello?
Índice del artículo
Qué es una tabla de precios y para que se usa
Una tabla de precios no es más que una representación visual de las principales características de tus servicios o productos. La finalidad es que tus usuarios puedan hacerse una idea de ellas, compararlas y, evidentemente, mejorar la conversión.
Como vale más una imagen que mil palabras, voy a mostrarte unos ejemplos de tablas de precios bien implementadas y luego vemos el porqué.
Para el primer ejemplo, no me hace falta irme muy lejos. En nuestra web utilizamos tablas de precios para cada producto que ofrecemos. Y para este ejemplo he usado la tabla de precios de los servidores VPS SSD:
Como puedes ver, la tabla muestra los distintos paquetes ofrecidos para este tipo de servidores con el precio, las características destacables de cada uno para que se puedan comparar de forma rápida y un botón de llamada a la acción para que el usuario pueda comprar directamente el servicio.
En este caso concreto, al pasar por encima de un paquete con el ratón, este queda destacado en color azul cielo.
Para el segundo ejemplo, te traigo la tabla de precios de la página de venta de un conocido plugin de WordPress:
Mucho más escueta que la anterior, la funcionalidad es la misma, te permite comparar de un vistazo sus planes y escoger el que mejor se adapte a tus necesidades.
En este caso, uno de los planes se encuentra ya destacado como “El más popular”. Es una práctica común en este tipo de tablas y aprovecha el efecto ancla para persuadir a los usuarios a comprar ese paquete en concreto.
4 puntos clave para crear una tabla de precios en tu web
Para tener éxito en la creación de tablas de precios, debes tener en cuenta cuatro criterios clave. En esta sección, te explicaré qué es lo que hace que estos puntos sean tan importantes y la mejor forma de implementarlos en tu tabla de precios.
1. Resumir las opciones con claridad
Una tabla de precios es tan buena como la información que muestra, por lo que es importante delimitar claramente las opciones que ofreceremos antes de crear la tabla.
Mi recomendación es hacer una lista de las características clave que cada plan proporciona en comparación con los demás, manteniendo el enfoque en los aspectos en los que los clientes podrían estar más interesados.
Por ejemplo, en el caso de una empresa de hosting como Raiola Networks, centra sus tablas de precios en los recursos que proporciona cada plan. Es importante evitar, en la medida de lo posible, los términos técnicos y centrarse en sus beneficios más fácilmente comprensibles.
2. Escoge buenos nombres para tus planes
Una vez que conozcas la información que cada uno de tus planes incluirá, es el momento de buscarles un nombre apropiado. Es fácil caer en la tentación de utilizar nombres más o menos estándar. Y, si bien pueden resultar perfectamente apropiados para los servicios que ofreces, posiblemente estés perdiendo la oportunidad de utilizar ese nombre para dar la primera pista a tu cliente sobre lo que le ofreces en cada plan.
Veamos un ejemplo muy claro:
En este primer caso, tenemos nombres de planes para un servicio que podríamos llamar estándar. Por un lado no le estamos dando ninguna información al cliente y, por otro lado, nos obliga a clarificar lo que ofrece el servicio, justo debajo.
En este segundo caso, solo con el título el cliente ya sabe lo que va a comprar. No necesita más aclaraciones.
¿Ves por dónde voy? Aprovecha los nombres de tus planes.
3. Resalta tus mejores ofertas
Resaltar un plan en particular en tu tabla de precios puede ser una muy buena idea. Idealmente, este plan debería proporcionar la mejor relación calidad-precio o rendimiento.
Con esto conseguirás dos cosas.
La primera, como comenté anteriormente, es mejorar la conversión de ese plan en concreto destacándolo por encima de los demás.
La segunda, guiar a tus potenciales clientes con pocos conocimientos de lo que necesitan hacia un plan adecuado para ellos.
Dos pájaros de un tiro.
4. Ofrece información completa
Mantener tus tablas de precios claras y concisas es la mejor forma de asegurarte de que tus visitantes no se sobrecarguen de información y decidan buscar en otro sitio lo que necesitan.
Sin embargo, algunos de tus clientes podrían preferir examinar todos los detalles antes de tomar una decisión, especialmente para productos más complejos.
La mejor manera de abordar este problema es enlazar tus tablas de precios con alternativas más completas. Por ejemplo, incluyendo un enlace hacia una página de producto o de servicios donde expongas toda la información completa sobre el mismo.
Aclarado todo esto, veamos cómo crear una tabla de precios para tu página web según la tecnología que uses o tus preferencias.
En concreto, veremos cómo crear una tabla de precios para una web a medida con Bootstrap, con plugins para WordPress y con un maquetador visual sobre WordPress como Elementor.
Crear una pricing table con Bootstrap para tu web a medida
Si tienes una web a medida, la forma más sencilla de implementar una tabla de precios es utilizando Bootstrap y sus librerías CSS. Para hacer esto tienes que tener unos conocimientos mínimos de desarrollo web o al menos debes saber dónde tienes que colocar cada cosa.
En este caso, parto de que ya tengo Bootstrap instalado y puedo utilizar el código que te voy a enseñar a continuación.
Por un lado tengo el HTML que deberás introducir en el código de tu web, justo en el lugar donde quieras mostrar la tabla de precios:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
<code> <div id="generic_price_table"> <section> <div class="container"> <div class="row"> <div class="col-md-12"> <!--PRICE HEADING START--> <div class="price-heading clearfix"> <h1>Bootstrap Pricing Table</h1> </div> <!--//PRICE HEADING END--> </div> </div> </div> <div class="container"> <!--BLOCK ROW START--> <div class="row"> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Basic</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">$</span> <span class="currency">99</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>2GB</span> Bandwidth</li> <li><span>150GB</span> Storage</li> <li><span>12</span> Accounts</li> <li><span>7</span> Host Domain</li> <li><span>24/7</span> Support</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">Sign up</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content active clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Standard</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">$</span> <span class="currency">199</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>2GB</span> Bandwidth</li> <li><span>150GB</span> Storage</li> <li><span>12</span> Accounts</li> <li><span>7</span> Host Domain</li> <li><span>24/7</span> Support</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">Sign up</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Unlimited</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">$</span> <span class="currency">299</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>2GB</span> Bandwidth</li> <li><span>150GB</span> Storage</li> <li><span>12</span> Accounts</li> <li><span>7</span> Host Domain</li> <li><span>24/7</span> Support</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">Sign up</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> </div> <!--//BLOCK ROW END--> </div> </section> </div> <code> |
Esto creará la estructura de tu tabla.
Y ahora el segundo paso: darle los estilos mediante CSS.
El código que usarás es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 |
<code> @import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); body{background-color:#eee;} #generic_price_table{ background-color: #f0eded; } /*PRICE COLOR CODE START*/ #generic_price_table .generic_content{ background-color: #fff; } #generic_price_table .generic_content .generic_head_price{ background-color: #f6f6f6; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ color: #525252; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li{ color: #a7a7a7; } #generic_price_table .generic_content .generic_feature_list ul li span{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ background-color: #E4E4E4; border-left: 5px solid #2ECC71; } #generic_price_table .generic_content .generic_price_btn a{ border: 1px solid #2ECC71; color: #2ECC71; } #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{ border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71; color: #fff; } #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span, #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{ color: #fff; } #generic_price_table .generic_content:hover .generic_price_btn a, #generic_price_table .generic_content.active .generic_price_btn a{ background-color: #2ECC71; color: #fff; } #generic_price_table{ margin: 50px 0 50px 0; font-family: 'Raleway', sans-serif; } .row .table{ padding: 28px 0; } /*PRICE BODY CODE START*/ #generic_price_table .generic_content{ overflow: hidden; position: relative; text-align: center; } #generic_price_table .generic_content .generic_head_price { margin: 0 0 20px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content{ margin: 0 0 50px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-style: solid; border-width: 90px 1411px 23px 399px; position: absolute; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head{ padding-top: 40px; position: relative; z-index: 1; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ font-family: "Raleway",sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; } #generic_price_table .generic_content .generic_head_price .generic_price_tag{ padding: 0 0 20px; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price{ display: block; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ display: inline-block; font-family: "Lato",sans-serif; font-size: 28px; font-weight: 400; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ font-family: "Lato",sans-serif; font-size: 60px; font-weight: 300; letter-spacing: -2px; line-height: 60px; padding: 0; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ display: inline-block; font-family: "Lato",sans-serif; font-size: 24px; font-weight: 400; vertical-align: bottom; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ font-family: "Lato",sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; vertical-align: bottom; } #generic_price_table .generic_content .generic_feature_list ul{ list-style: none; padding: 0; margin: 0; } #generic_price_table .generic_content .generic_feature_list ul li{ font-family: "Lato",sans-serif; font-size: 18px; padding: 15px 0; transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li .fa{ padding: 0 10px; } #generic_price_table .generic_content .generic_price_btn{ margin: 20px 0 32px; } #generic_price_table .generic_content .generic_price_btn a{ border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; display: inline-block; font-family: "Lato",sans-serif; font-size: 18px; outline: medium none; padding: 12px 30px; text-decoration: none; text-transform: uppercase; } #generic_price_table .generic_content, #generic_price_table .generic_content:hover, #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content .price, #generic_price_table .generic_content:hover .price, #generic_price_table .generic_content .generic_price_btn a, #generic_price_table .generic_content:hover .generic_price_btn a{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } @media (max-width: 320px) { } @media (max-width: 767px) { #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 768px) and (max-width: 991px) { #generic_price_table .col-md-3{ float:left; width:50%; } #generic_price_table .col-md-4{ float:left; width:50%; } #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } #generic_price_table_home{ font-family: 'Raleway', sans-serif; } .text-center h1, .text-center h1 a{ color: #7885CB; font-size: 30px; font-weight: 300; text-decoration: none; } .demo-pic{ margin: 0 auto; } .demo-pic:hover{ opacity: 0.7; } #generic_price_table_home ul{ margin: 0 auto; padding: 0; list-style: none; display: table; } #generic_price_table_home li{ float: left; } #generic_price_table_home li + li{ margin-left: 10px; padding-bottom: 10px; } #generic_price_table_home li a{ display: block; width: 50px; height: 50px; font-size: 0px; } #generic_price_table_home .blue{ background: #3498DB; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .emerald{ background: #2ECC71; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .grey{ background: #7F8C8D; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .midnight{ background: #34495E; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .orange{ background: #E67E22; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .purple{ background: #9B59B6; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .red{ background: #E74C3C; transition:all 0.3s ease-in-out 0s; } #generic_price_table_home .turquoise{ background: #1ABC9C; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .blue:hover, #generic_price_table_home .emerald:hover, #generic_price_table_home .grey:hover, #generic_price_table_home .midnight:hover, #generic_price_table_home .orange:hover, #generic_price_table_home .purple:hover, #generic_price_table_home .red:hover, #generic_price_table_home .turquoise:hover{ border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .divider{ border-bottom: 1px solid #ddd; margin-bottom: 20px; padding: 20px; } #generic_price_table_home .divider span{ width: 100%; display: table; height: 2px; background: #ddd; margin: 50px auto; line-height: 2px; } #generic_price_table_home .itemname{ text-align: center; font-size: 50px ; padding: 50px 0 20px ; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-decoration: none; font-weight: 300; } #generic_price_table_home .itemnametext{ text-align: center; font-size: 20px; padding-top: 5px; text-transform: uppercase; display: inline-block; } #generic_price_table_home .footer{ padding:40px 0; } .price-heading{ text-align: center; } .price-heading h1{ color: #666; margin: 0; padding: 0 0 50px 0; } .demo-button { background-color: #333333; color: #ffffff; display: table; font-size: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium ; padding: 10px; text-align: center; text-transform: uppercase; } .bottom_btn{ background-color: #333333; color: #ffffff; display: table; font-size: 28px; margin: 60px auto 20px; padding: 10px 25px; text-align: center; text-transform: uppercase; } .demo-button:hover{ background-color: #666; color: #FFF; text-decoration:none; } .bottom_btn:hover{ background-color: #666; color: #FFF; text-decoration:none; } <code> |
El código CSS lo puedes añadir como un archivo nuevo y llamarlo desde el <head> de tu web, como cualquier otro archivo de este tipo, o puedes añadir el código directamente a tu archivo CSS ya existente. Yo te recomiendo la segunda opción para no hacer llamadas extra al servidor.
Una vez implementado el código, tu tabla de precios debería lucir así de bien:
En el siguiente enlace puedes ver el código original, su autor y una preview de cómo queda. Además, puedes jugar con el código e ir viendo cóomo queda al vuelo antes de implementarlo en tu web.
Los mejores plugins de tablas de precios para WordPress
Vamos ahora con la implementación mediante plugins sobre WordPress.
Antes de nada, en el repositorio de WordPress hay cientos de plugins para tablas de precios. Yo te voy a recomendar dos que para mí son la mejor opción, tanto en su versión gratuita, como de pago.
El primero de ellos es Pricing Table de Pickplugins.
Como siempre, lo primero es descargar e instalar el plugin. Puedes descargarlo desde este enlace o directamente desde el repositorio oficial mediante la opción de añadir plugin de tu WordPress.
Una vez instalado y activado, aparecerá una nueva opción en tu panel de administración de WordPress:
Evidentemente, el primer paso es “Add Pricing Table”.
Esto te llevará a las opciones para crear tu primera tabla.
Empieza por los datos de la tabla. En primer lugar, selecciona la cantidad de filas y columnas que necesitas:
Aquí debo destacar que hay 3 filas que son fijas: la cabecera, el precio y el botón de llamada a la acción. Así que si eliges 7 filas, la tabla tendrá esas 3 fijas más 4 filas de datos. Ten esto en cuenta al elegir las filas totales de tu tabla.
Un detalle: para que se muestren los cambios debes guardar la tabla, ya sea publicándola o guardándola como borrador.
Una vez elegido esto, ya puedes pasar a rellenar los datos de tu tabla, un poco más abajo:
Justo debajo, podrás ver cómo va quedando tu tabla cuando la guardes.
Tu siguiente paso debería ser la pestaña Style. No me voy a detener mucho en este punto.
En este apartado encontrarás todas las opciones gráficas para darle estilos a tu tabla. Son muy simples e intuitivas. Solo debes jugar un poco para conseguir un diseño a tu gusto.
Entre otras, podrás elegir el orden de los datos, algún diseño predeterminado, imagen de fondo si la quieres, etc.
Cuando tengas la tabla a tu gusto y la hayas publicado, puedes pasar al apartado shortcode.
Simplemente, copia el shortcode y pégalo en tu contenido. Ya tienes tu tabla de precios funcionando como verás en la siguiente imagen:
Seguro que la tuya queda mucho mejor que la mía…
Si necesitas más opciones de configuración o quieres tener una gran variedad de plantillas predeterminadas, puedes comprar la versión premium. En el momento en que escribo estas líneas, está en oferta por 5$ aunque su precio normal son 15$.
Vamos con la segunda opción que quiero mostrarte.
El plugin se llama Responsive Pricing Table de WP Darko y, como el anterior, lo puedes descargar desde el enlace o desde el repositorio oficial, como prefieras.
Una vez descargado e instalado, verás una nueva opción en tu panel de administración muy similar a lo que ocurría en el caso anterior.
Por supuesto, no tendrás ninguna tabla creada, así que vamos a crear la primera con “Add New”.
En este caso, deberás introducir tus planes uno a uno, pero no te preocupes, es muy intuitivo. Busca el botón de “Add a pricing plan”.
Y te aparecerá la pantalla para introducir todos los campos:
Rellenar los campos es muy sencillo. Sólo quiero destacar un par de puntos.
En la parte inferior, puedes activar que el plan se muestre destacado (¿te acuerdas de lo que hablamos antes?), mostrar u ocultar la moneda, añadir una clase CSS para luego trabajarla aparte o elegir el color si vas a destacar ese plan.
El segundo punto es el botón “Clone” que tienes arriba a la derecha. Si tus planes son muy parecidos, los puedes clonar, modificar lo necesario y agilizar así el proceso.
Una vez publicada la tabla, en el sidebar de la derecha te aparecerá el shortcode para añadir la tabla a tu contenido. Lo mismo que en el caso anterior, solo tienes que copiar y pegar.
Un último detalle, en el mismo sidebar, arriba tienes un par de opciones extra. El comportamiento al hacer clic en el botón de llamada a la acción (misma página/página nueva) y la moneda que quieres usar.
Una vez pegado el shortcode en tu contenido, ya tienes tabla de precios.
Como en el caso anterior, este plugin también ofrece una versión premium de pago. Obtendrás algunas opciones extra y, sobre todo, más plantillas para usar en tus tablas. El precio, 19$ en pago único. Asumible.
Crea tu tabla de precios para WordPress sin plugins
Llegamos al último método: usaremos un maquetador visual como Elementor para crear una tabla de precios. Eso sí, necesitarás Elementor Pro pues la versión gratuita no ofrece esta funcionalidad.
La otra opción es que dispongas de algún pack de complementos como el Essential Addons for Elementor, que añade nuevas funcionalidades a la versión gratuita de Elementor.
Una vez aclarado esto, añadir una tabla de precios a tu web con Elementor es muy sencillo.
Edita una página o artículo existente o crea uno nuevo.
Una vez en la interfaz de Elementor, añade un nuevo elemento con el botón más.
Selecciona las columnas que necesites para tu tabla de precios. En mi caso, voy a usar tres.
Y ya con las columnas creadas, solo necesitas arrastrar el componente de la tabla de precios a cada columna.
Ahora que ya tienes los planes creados, puedes editarlos individualmente para elegir nombre, precio, características o botón de llamada a la acción mediante el formulario que aparece al seleccionar cada uno en la barra lateral izquierda.
Una vez rellenadas las opciones, publica tu página o artículo y disfruta de tu nueva y flamante tabla de precios. ¡A vender!
Conclusión
Una tabla de precios te ayudará a mostrar tus productos y servicios de una forma más visual, permitiendo así comparar fácilmente entre ellos a tus usuarios.
Además, con el botón de llamada a la acción mejorarás tus conversiones.
Como has visto en este artículo, su creación e implementación son muy sencillos y variarán en función de cómo esté montada tu página web.
Si tu web funciona con WordPress hay infinidad de plugins disponibles en el mercado para ello. Yo te recomiendo utilizar uno de los que te he presentado en este artículo y me decantaría por uno o por otro según tus preferencias a la hora de crear las tablas, todos los datos a la vez o plan a plan.
Si además de WordPress, usas un maquetador visual como Elementor, aunque sea otro, infórmate de si incorpora esta funcionalidad porque puede ahorrarte instalar otro plugin más.
Para webs a medida, nada que no pueda solucionarse con un poco de HTML y CSS gracias a Bootstrap y sus librerías.
¿Y tú, ya utilizas tablas de precios en tu web? ¿Conoces otra forma de implementarlas? Escríbelo en un comentario.
Crea páginas de producto imposibles de rechazar
Una respuesta
Santi, gracias por el articulo, está bien saber lo que se puede hacer en con los codigos css y todo eso, que no controlo personalmente. Te puedo dar una idea si me permites, ampliar el articulo a no solo tablas de precios, sino tablas de caracteristicas de productos, tablas comparativas, usando TablePress por ejemplo, o los plugin JETPACK de Elementor (creo que se llama asi, te lo digo de memoria….) Digo para futuro que los que tratamos de hacer una wes de afiliacion miramos mucho sobre esto, saber que hay en el mercado para hacer tablas responsive. Gracias y Saludos