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

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";
}

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"

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

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.

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

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

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

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.

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.

No sé si es importante.

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

Hola

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

Saludos

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

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.

Hola Jhon. buenas tardes.

Ahora perfecto. Todo bien.

Gracias por todo.

Un saludo.