Cómo cambiar el aspecto del botón comprar en los listados y en la ficha de artículo
/* Actualización Mayo 2016 */
Referente al texto del botón de compra ahora existen dos etiquetas de traducción para que puedas modificar más facilmente el texto de los botones según se muestre en la home y listados o en la ficha de artículo.
Las dos etiquetas de traducción las puedes modificar desde Contenidos > Traducciones y son las siguientes:
etiG_carrito_img corresponde al texto del botón de la ficha de artículo
etiG_carrito_list_img corresponde al texto del botón de la home y de los listados
/* Anterior a la actualización de Mayo 2016 */
Si precisas modificar o diferenciar el botón de comprar que se muestra en la página principal y en los listados y el que se muestra en la ficha de artículo, lo puedes realizar mediante CSS (hoja de estilos).
En primer lugar debes eliminar cualquier valor que pueda existir en la constante de traducción etiG_carrito_img desde Contenidos > Traducciones.
Luego tendrás que personalizar los estilos aplicados a los mismos desde Diseño > Plantillas CSS > botón Personalizar CSS de la plantilla activa.
/* ESTILO PARA LA HOME Y LOS LISTADOS */
.web-mod-art-compra-carrito .btn-compra.btn-primary:before {
content: "Más Información"
}
/* ESTILO PARA LA FICHA DE PRODUCTO */
.precio-comprar .btn-compra.btn-primary:before,
.art-pre-compra .btn-compra.btn-primary:before,
.inicial-boton-compra .btn-compra.btn-primary:before {
content: "Añadir a la Cesta"
}
Recuerda que también puedes modificar el estilo aplicado a los diferentes botones que hay en la tienda modificando otras clases aplicadas a los mismos.
/* ESTILOS COMUNES para los botones */
.btn-compra.btn-primary {
color: white;
background-color: #6ECA3F;
border-color: #2F951C;
text-transform: uppercase;
}
.btn-compra.btn-primary:after {
font-family: 'Glyphicons Halflings';
content: "\e116"; /* entidad que muestra el icono carrito */
margin-left: 5px;
}
.btn-compra.btn-primary:hover {
background-color: #269312;
border-color: #6ECA3F;
}
.btn-primary {
background: #6ECA3F;
background-image: linear-gradient(to bottom, #6ECA3F, #2F951C);
border-radius: 5px;
font-size: 15px;
text-decoration: none;
display: inline-block;
}
.btn-primary:hover {
background: #2F951C;
background-image: linear-gradient(to bottom, #2F951C, #6ECA3F);
text-decoration: none;
}
.btn {
border: 1px solid transparent;
}
En el ejemplo anterior te indicamos unas clases para dejar dichos botones con tonalidades en verde degradado e incluso con un icono de un carrito en el botón de comprar.
