Agregar icono al botón de "Añadir al Carrito"  

 
Luis
 Luis
Usuario experto

Buenas noches.

¿Alguna opción de poder agregar un icono al botón de "Añadir Al Carrito" en woocommerce?

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 19/05/2018 3:23 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Entiendo que lo que requieres es agregar un icono cuando se pasa el ratón sobre el producto.

Se puede intentar hacer por CSS prueba como indica este articulo agregando la funcionalidad: https://decodecms.com/como-usar-dashicons-en-wordpress/ y luego en el fichero de estilos de tu plantilla insertar el código:

.fusion-rollover div a::before{
	font-family: "dashicons";
	content: "f344";
}
ResponderCitar
Respondido : 19/05/2018 4:03 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Luis
 Luis
Usuario experto

No, no es eso, simplemente lo que pregunté.

En el botón de "Añadir al Carrito" insertar un icono (por ejemplo cesta, o carro, etc) antes o después de la frase "Añadir al Carrito"

ResponderCitar
Respondido : 19/05/2018 4:19 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Quizás será necesario que nos adjuntes una captura ya que la respuesta que te di anteriormente hace precisamente esto, insertar un icono antes de la frase "Añadir al Carrito".

ResponderCitar
Respondido : 19/05/2018 5:43 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Luis
 Luis
Usuario experto

He insertado el código pero nada.

Envío archivo donde se ve el botón en la página individual de un producto. En la página de archivos eliminé la opción del botón en cada producto.

ResponderCitar
Respondido : 19/05/2018 6:19 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Luis.

¿ Que pasos realizaste ? añadiste primero la funcion como se indica en el articulo, para que carge la fuente con los iconos ?

Revisa de nuevo el articulo te alias los pasos que te indica, primero tienes que añadir la función en el archivo wp-content -> themes -> Avada-Child-Theme -> functions.php y una vez cargada la fuente ya podrás utilizar los iconos

Un saludo

ResponderCitar
Respondido : 19/05/2018 12:07 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Luis
 Luis
Usuario experto

Hola.

He cargado este código:

add_action( 'wp_enqueue_scripts', 'dcms_load_dashicons_front_end' );

function dcms_load_dashicons_front_end(){
wp_enqueue_style( 'dashicons' );
}

en Avada-Child-Theme -> functions.php

Luego en insertado el siguiente código en CSS personalizado (donde content: "f174"; es el icono del carrito):

.fusion-rollover div a::before{
font-family: "dashicons";
content: "f174";
}

pero nada, sigue sin icono. He probado esto: before {, separar before de {, que en el código están juntos, pero tampoco, sigue sin icono

ResponderCitar
Respondido : 19/05/2018 1:30 pm
Luis
 Luis
Usuario experto

Una anotación: mi tema tiene activado los iconos FontAwesome

ResponderCitar
Respondido : 19/05/2018 2:22 pm

Cursos Gratuitos WordPress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si ya tienes fontawesome no sería necesario cargar dashicons, ya que fontawesome tiene más cantidad y variedad de iconos, en tu caso simplemente puedes probar con el siguiente código CSS:

.single_add_to_cart_button.button:before{
	font-family: "FontAwesome";
	content: "f217";
	margin-right:10px;
}

Puedes agregar este código al final del archivo:
/wp-content/themes/Avada-Child-Theme/style.css

Si quires cambiar el icono usa en content el código unicode, puedes buscar en;
https://fontawesome.com/icons?d=gallery&q=cart (ingresa el icono que quieres y aparecerá el código unicode)

PD. Asegúrate de limpiar la cache de tu navegador o refrescar tu navegador.

Saludos.

ResponderCitar
Respondido : 19/05/2018 4:38 pm
Luis
 Luis
Usuario experto

Hola.

Perfecto cuando sólo hay una existencia y no aparece la caja de elección de cantidad.
Si hay más de una existencia el icono queda encima de la frase. Adjunto imágenes.
He probado a cambiar los px pero nada.

ResponderCitar
Respondido : 19/05/2018 5:56 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Luis
 Luis
Usuario experto

No sé si es importante.

En este código me indica una "i" (envío imagen) que pone "don't use adjoining classes"

ResponderCitar
Respondido : 19/05/2018 6:10 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Podrías envíarnos la url de algún producto para cada caso para revisar?

Saludos

ResponderCitar
Respondido : 19/05/2018 6:11 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Luis
 Luis
Usuario experto

Parece que se cruzaron los mensajes. Te copio el mío anterior por si no lo leíste.

No sé si es importante.
En este código me indica una "i" (envío imagen) que pone "don't use adjoining classes"

Te vuelvo a enviar el archivo.

Te envío dos url de los dos ejemplos. La web está en construcción:
Contenido solo visible a usuarios registrados

ResponderCitar
Respondido : 19/05/2018 6:21 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla

En lugar del código anterior prueba con el siguiente código

.single_add_to_cart_button:before {
    font-family: "FontAwesome";
    content: "f217";
    margin-right: 10px;
    float:left;
}

Puedes agregar este código al final del archivo:
/wp-content/themes/Avada-Child-Theme/style.css

PD. La sugerencia que te da tu editor es una sugerencia, no es estricta, igual te indicará que no uses IDs, etc. sin embargo tienes seguramente varios estilos propios de tu theme o de plugins que no siguen estas recomendaciones, igual he cambiado el código anterior para que no concatene clases.

Saludos.

ResponderCitar
Respondido : 19/05/2018 6:26 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Luis
 Luis
Usuario experto

Hola Jhon. buenas tardes.

Ahora perfecto. Todo bien.

Gracias por todo.

Un saludo.

ResponderCitar
Respondido : 19/05/2018 6:38 pm