Ayuda Rápida

La base de conocimiento (KB) es una colección de respuestas por categorías a las preguntas mas frecuentes (FAQ) y artículos de su interés. Usted puede leer los artículos en esta categoría o seleccionar una subcategoría en la que usted se interese.



 Cómo cambiar el aspecto del botón comprar en los listados y en la ficha de artículo

Solución

/* 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"

}

Botón comprar en home y listados

 

/* 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"

}

 

Botón comprar en ficha de artículo

 

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. 

Botón comprar en ficha de artículo con icono

 

 
¿Le ha sido útil este artículo? si / no

 
Powered by Help Desk Software HESK, brought to you by SysAid