Icono carrito de Font Awesome para botón de añadir al carrito

Resuelto Alessandra
(@alessandra77)

hace 3 años, 7 meses
Hola, he leído que se puede sustituir el texto Aggiungi al carrello (Añadir al carrito) por un icono de carrito que he encontrado en font awesome

El código sería <i class=»fas fa-shopping-basket»></i>

He intentado hacer como dicen aquí

He copiado el archivo add-to-cart.php en la carpeta woocommerce del tema hijo,
He añadido
```
add_filter( 'woocommerce_product_add_to_cart_text', 'change_text_woo' );
function change_text_woo() {
return '<i class="fas fa-shopping-basket"></i>';
}
```
He eliminado también la función esc_html como sugieren, pero nada, así que la he vuelto a poner.

Aquí sugieren poner esto en css
.add_to_cart_button:before {
content: «\f07a»;
font-family: FontAwesome;
}

Aparece un carrito cualquiera, antes del texto pero el icono debería ser otro y el texto sobra.

En el producto sigue apareciendo el texto solo.

Por si me quedaba corta he copiado también la carpeta add-to-cart donde están los php external, grouped, simple, variable, variation, variation add-to-cart-button
Pero no se que hacer.

He desactivado el plugin Add to Cart Button Labels for WooCommerce para traducir el texto, por si dependía de esto, pero nada.
He instalado el plugin Font Awesome pero no he entendido porque el icono no corresponde.

Que hago mal?
- Este debate fue modificado hace 3 años, 7 meses por LGrusin.
La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)

Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses

Ya veo porque aparece otro carrito, el código css contiene «\f07a» que corresponde a este icono, el de la cesta no está en esta pagina.

He vuelto a buscar el icono de la cesta que quiero, veo que corresponde al numero f291, lo sostituyo a f07a pero desaparece, se queda solo el texto.

Si valdría de algo lo dibujaría en la pantalla del ordenador 🤦‍♀️

Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses

Lo del icono lo he solucionado, lo tenía que escribir no copiar y pegar…
Sigue apareciendo el texto
Moderador LGrusin
(@lgrusin)

hace 3 años, 7 meses
@alessandra77 el código debes ponerlo en el archivo functions.php del tema hijo, si no existe creas el archivo. Prueba esto para quitar el texto:
```
add_filter( 'woocommerce_product_add_to_cart_text', 'change_text_woo' );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'change_text_woo' );
function change_text_woo() {
  return __( ' ', 'woocommerce' );
}
```
Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses

Gracias @lgrusin el texto ha desaparecido, el icono también..
Eso creo depende del plugin WooCommerce Custom Add To Cart Button que acababa de instalar poco antes de tu respuesta y poco después de arrepentirme.
Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses
He recuperado el icono de la cesta, solo que ha desaparecido el texto de algunos productos que no tienen precio, allí nunca he visto ningún icono, había Leggi tutto (Leer mas) que si fuera posible me gustaría poner otro icono.
Serían los productos de las categoría heartmade y Frida, pero no todos los que pondré en futuro irán sin precio.
Que puedo hacer?
- Esta respuesta fue modificada hace 3 años, 7 meses por Alessandra.
- Esta respuesta fue modificada hace 3 años, 7 meses por Alessandra.
Moderador LGrusin
(@lgrusin)

hace 3 años, 7 meses
@alessandra77 eso es complicar mucho la cosa. Hay muchas combinaciones de productos con precio sin precio. Se me ocurre lo siguiente, eliminar el texto del botón únicamente en los productos simples, los demás se quedan como están. Para eso cambia el código anterior por:
```
add_filter( 'woocommerce_product_add_to_cart_text', 'change_text_woo' );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'change_text_woo' );
function change_text_woo($default) {
 global $product;
 $product_type = $product->product_type;
 if ( $product_type == 'simple' ) {
	  return __( ' ', 'woocommerce' );	  
 } else {
 return $default;
 }
}
```
Los productos simples hay dos, con precio y sin precio. Eso lo pones en el menú Apariencia – Personalizar – CSS Adicional:
```
.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.ajax_add_to_cart:before, .single_add_to_cart_button:before {
 content: "\f291";
font-family:'Font Awesome 5 Free';
}
.button.product_type_simple:before {
	content: "Leggi tutto";
}
```
Si quieres quitar el texto ese de Leggi tutto, puedes poner un icono como en el otro caso.
Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses

Buenos días pensaba solucionarlo así, pero ya veo que no

.product_type_simple:before {
content: «\f568»;
font-family: FontAwesome;
font-size: 18px;
}

Ahora todos llevan este icono del compás, menos los variables que llevan la cesta.
Quería poner la cesta para todos, menos los que no tienen precio, que son los que antes eran el botón «Leer más».

En css tengo esto:

.add_to_cart_button:before {
content: «\f291»;
font-family: FontAwesome;
font-size: 18px;
}

.single_add_to_cart_button::before {
content: «\f291»;
font-family: FontAwesome;
font-size: 18px;
}

.product_type_simple:before {
content: «\f568»;
font-family: FontAwesome;
font-size: 18px;
}

Algo se me escapa, no pillo como diferencia los que tienen precio y los que no, por si fuera esta la vía.

Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses

Los variables se quedaban vacíos, he añadido

.button.product_type_variable:before {
content: «\f291″ » » «\f141»;
font-family: FontAwesome;
font-size: 18px;
}

Pero sale también el texto, yo no se que he hecho mal en otra vida para merecer esto.

Entonces he probado así
add_filter( ‘woocommerce_product_add_to_cart_text’, ‘change_text_woo’ );
add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘change_text_woo’ );
add_filter( ‘woocommerce_product_variable_add_to_cart_text’, ‘change_text_woo’ );
function change_text_woo($default) {
global $product;
$product_type = $product->product_type;
if ( $product_type == ‘simple’ ) {
if ( $product_type == ‘variable’ ) {
return __( ‘ ‘, ‘woocommerce’ );
} else {
return $default;
}

Varios intentos, se ha rayado y he tenido que borrar desde el panel de control.
Entonces he probado reponiendo el que había y agregando el mismo código pero para variables.

add_filter( ‘woocommerce_product_add_to_cart_text’, ‘change_text_woo’ );
add_filter( ‘woocommerce_product_variable_add_to_cart_text’, ‘change_text_woo’ );
function change_text_woo($default) {
global $product;
$product_type = $product->product_type;
if ( $product_type == ‘variable’ ) {
return __( ‘ ‘, ‘woocommerce’ );
} else {
return $default;
}
}

Que tampoco le gusta, se queda Scegli (Elige) al lado de la cesta y los tres puntitos

Lo demás ha funcionado
Moderador LGrusin
(@lgrusin)

hace 3 años, 7 meses
Quería poner la cesta para todos, menos los que no tienen precio, que son los que antes eran el botón Leer más.

Las modificaciones que te he puesto hacen eso que quieres, y además tienes la posibilidad de cambiar el Leer más por otro icono.
- Esta respuesta fue modificada hace 3 años, 7 meses por LGrusin.
Iniciador del debate Alessandra
(@alessandra77)

hace 3 años, 7 meses
Lo siento @lgrusin el mensaje al que te refieres iba a ir antes de tu respuesta, por algún motivo ha llegado después, probablemente no he actualizado la pagina antes de volver a escribir.

De hecho en el ultimo mensaje confirmo que ha funcionado tu solución, pero preguntaba como quitar el texto también de los productos variables ya que mientras daba palos a ciegas he rayado el wordpress unas cuantas veces 🙄
- Esta respuesta fue modificada hace 3 años, 7 meses por Alessandra.

Viendo 10 respuestas - de la 1 a la 10 (de un total de 10)

El debate ‘Icono carrito de Font Awesome para botón de añadir al carrito’ está cerrado a nuevas respuestas.

Icono carrito de Font Awesome para botón de añadir al carrito

Etiquetas del debate

Vistas