Aprende a crear tablas de precios para tu web

Categoría: Plugins, Programación, WordPress
Fecha: 18 septiembre 2019

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
- 4 puntos clave para crear una tabla de precios en tu web
Crear una pricing table con Bootstrap para tu web a medida
Los mejores plugins de tablas de precios para WordPress
Crea tu tabla de precios para WordPress sin plugins
Conclusión

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:

<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>

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>

<h1>Bootstrap Pricing Table</h1>

</div>

</div>

<span>Basic</span>

</div>

</div>

</span>

</div>

</div>

<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>

</div>

</div>

</div>

<span>Standard</span>

</div>

</div>

</span>

</div>

</div>

<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>

</div>

</div>

</div>

<span>Unlimited</span>

</div>

</div>

</span>

</div>

</div>

<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>

</div>

</div>

</div>

</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:

<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>

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);

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:

administracion tabla de precios 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

Email*

Política de privacidad*
He leído y acepto la política de privacidad.*
CAPTCHA
Comments
Este campo es un campo de validación y debe quedar sin cambios.

Santi Centelles

Me apasionan el desarrollo web, el SEO y los videojuegos, no siempre en ese orden. Me gusta escribir sobre ello y compartir conocimientos con los demás.

Articulos relacionados

Si te ha gustado este post, aquí tienes otros que pueden interesarte. ¡No pares de aprender!

WP-Admin, wp-login.php o cómo acceder a WordPress

Boilerplate code: Qué es y cómo aplicarlo en WordPress

LiteSpeed cache y LiteSpeed Web Server

WP Rocket, optimizar WordPress al alcance de todos

¿Te gusta el blog?

¿Alguna duda?

Artículos destacados

Crea una galería de imágenes para tu web

6 plugins gratuitos para coger reservas online con Wordpress

Cómo poner WordPress en modo mantenimiento [Tutorial]

Duplicar páginas y entradas en WordPress con un solo clic

Guía de creación de plugins WordPress para principiantes

7 mejores plugins de slider WordPress gratis

Autores destacados

Alvaro Fontela

Cova Diaz

Andrea Barreiro

Pablo Moratinos

Últimos posts comentados

Duplicar páginas y entradas en WordPress con un solo clic

Guía rápida de Mailchimp en WordPress para principiantes

6 plugins de inmobiliaria para WordPress

$Rank Math : uno de los mejores plugins de SEO para WordPress$

Rank Math: uno de los mejores plugins de SEO para WordPress

¿Conoces nuestras redes?

Sé el primero en enterarte de ofertas, sorteos y novedades.

Tenemos 1 comentarios en

"Aprende a crear tablas de precios para tu web"

Laura dice:

16/03/2020 a las 11:35

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

Responder

Deja una respuesta

RESPONSABLE:	RAIOLA NETWORKS, S.L. C.I.F.: B27453489 Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo) Telefono: +34 982776081 e-mail: info@raiolanetworks.es
FINALIDAD:	Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:	Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:	No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield
DERECHOS:	Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:	Se puede consultar la política de privacidad de forma más detallada aquí.