Mover las «equis» (aspas) de eliminar productos del carrito de WooCommerce debajo de la cantidad

En el carrito de WooCommerce disponemos de unas «equis» con las que podemos eliminar del carrito cada uno de los productos fácilmente.

Para que lo tengamos claro, aquí tenemos una captura de imagen donde se ve dónde estás estas «equis» de las que hablo:

Quitar las "equis" de eliminar productos del carrito de WooCommerce

Muy bien, ahora lo que queremos es quitarlas de donde están ahora y ponerlas justo debajo de los selectores de cantidad y para ello primero las vamos a quitar de donde están con el siguiente snippet:

Seguimos y ahora lo que vamos a hacer es ubicarlas justo debajo de los selectores de cantidad de producto para que nos quede de la siguiente forma:

Mover las "equis" de eliminar productos del carrito de WooCommerce debajo de la cantidad

Para eso utilizamos el siguiente snippet:

Este código lo podéis añadir al final del fichero funcions.php del tema activo.

Por supuesto habría que darle un poco de estilo con css para que se adapte mejor a nuestro tema y nuestras necesidades, pero eso es otra historia…

Cualquier cosa me dejáis un comentario y lo vemos.

Saludos y ánimo!

Quitar las «equis» de eliminar productos del carrito de WooCommerce

Como es costumbre, antes de ponernos manos a la obra, nos ponemos en situación para saber exactamente lo que queremos hacer antes de hacerlo.

En este caso lo que queremos es que los clientes no puedan eliminar los productos del carrito una vez que ya los han añadido.

Si recordamos, en el carrito se muestrar una «equis», al lado de cada producto que si pulsamos en alguna de ellas, elimina el correspondiente producto del carrito.

Para muestra un botón y en este caso una captura de pantalla:

Quitar las "equis" de eliminar productos del carrito de WooCommerce

Ahora que sabemos a lo que nos referimos, vamos a utilizar un snippet muy sencillo para eliminar esas «equis».

Os recuerdo que este código lo podéis añadir al final del fichero functions.php del tema activo.

Una vez aplicado este código y ano aparecerán las «equis»:

Quitar las equis de eliminar producto en el carrito de WooCommerce

El video

Espero que este código os sea de utilidad.

Cualquier cosa, dejadme un comentario.

Saludos y mucho ánimo!

Ocultar el aviso «El carrito está vacío» en la página del carrito de WooCommerce

¡Muy buenas!

Hoy vamos a ver otro pequeño snippet que puede sernos útil en algunas situaciones o circunstacias.

Como es habitual, primero nos ponemos en situación.

Por defecto y por regla general, cuando un cliente accede a la página del carrito o ya está en ella y elimina todos los productos del carrito, se muestra un mensaje de aviso que indica que el carrito está vacío.

Ocultar el mensaje "el carrito está vacío" en WooCommerce

Bien, por algún motivo puede que necesitemos quitar ese aviso para que no lo vean los clientes. Para eso podemos usar el siguiente snippet:

Una vez añadido este código al final del fichero funcions.php de nuestro tema activo, ya no se mostrará.

El video

Espero que este snippet os sea de utilidad.

Saludos y mucho ánimo!

Añadir un botón de «Continuar comprando» o «Volver a la tienda» en la página del carrito de WooCommerce

En la página del carrito puede ser un buen sitio para intentar recordar al visitante o cliente que puede seguir comprando, que puede volver a la página de la tienda con un simple click, algo visible para que no pase desapercibido y que al cliente no le requiera esfuerzo.

Con esto os coment que puede ser muy buena idea poner un botón de «Seguir comprando«, «Volver a la tienda» o el texto que nosotros quedamos de manera que sea útil para el cliente y lo entienda perfectamente.

Para ponernos en situación recordemos cómo se ve la página del carrito, en este caso con el tema Twenty Twenty.

Añadir un botón de "Continuar comprando" o "Volver a la tienda" en la página del carrito de WooCommerce

Por lo tanto, como he mos dicho, vamos a intentar añadir un botón con el texto «Seguir comprando» justo al lado del botón de actualizar el carrito para que los clientes puedar volver rápidamente a la tienda a añadir algún producto de última hora.

Entonces, lo que vamos a conseguir es lo siguiente:

Añadir un botón de "Continuar comprando" o "Volver a la tienda" en la página del carrito de WooCommerce

El código o snippet que podemos utilizar para conseguir esto es el siguiente:

Por supuesto, luego añadiríamos algo de css para darle el estilo que queramos dependiendo del tema que estemos usando.

Este es un snippet bien sencillo que podemos utilizar para mejorar un poco la experiencia de compra de los clientes que visiten nuestro ecommerce.

El video

Espero que os sirva de ayuda.

Cualquier cosa dejáis un comentario.

Saludos y mucho ánimo!

Redirigir al carrito después de añadir un producto en WooCommerce

Redirigir al carrito después de añadir un producto en WooCommerce

Dependiendo de la naturaleza de ecommerce que tengamos, es posible que queramos que el usuario vaya al carrito nada más añadir un producto a la cesta.

Este no es el comportamiento estándar de una tienda online pero existen muchos tipos tipos de ecommerces y en algunos casos nos interesa esta opción.

Este comprtamiento ya lo ha tenido en cuenta WooCommerce y lo único que tenemos que hacer es activar una opción que tenemos disponible en WooCommerce –> Ajustes –> Productos.

Activamos la opción «Redirigir a la página del carrito tras añadir productos con éxito«.

WooCommerce opción Redirigir a la página del carrito tras añadir productos con éxito

Una vez guardada esta opción, volvemos a nuestra tienda y probamos a añadir un producto. Automaticamente nos llevará a la página del carrito.

Si tenéis cualquier apreciación, dejadme un comentario.

Saludos y ánimo!

Añadir botón de «Seguir comprando» en la página del carrito de WooCommerce

La página del carrito de WooCommerce es una antesala a la página de checkout o finalizar compra donde los clientes están a punto de terminar su compra y seguramente abandonar nuestra tienda online.

Este puede ser un buen momento para recordarles de alguna manera que pueden volver a revisar los productos de nuestra tienda y qué mejor manera que un botón de «Seguir comprando«.

El siguiente snippet hace eso, añade un botón de «Seguir comprando» en la página del carrito para que los visitantes vuelvan a nuestra tienda antes de pasar al checkout:

WooCommerce - Añadir botón seguir comprando en página del carrito

Este código se puede personalizar de muchas formas tanto para cambiar el texto, la url o enlace del botón o incluso el sitio donde ponerlo utilizando otro hook.

El video

Espero que este tutorial te sirva de ayuda.

Cualquier apreciación que tengas puedes dejárla en los comentarios.

Saludos y ánimo!!

Comprobar si un producto está en el carrito de WooCommerce

Hoy traigo otro pequeño snippet para que sepamos cómo comprobar si un producto en concreto está en el carrito.

Para ello usaremos la función «find_product_in_cart( $product_id )» de la siguiente forma:

La función «find_product_in_cart()» nos devolverá true si encuentra el producto que le pasamos como parámetro se encuentra en el carrito.

De esta forma podremos trabajar con este resultado para, por ejemplo, mostrar algo, o añadir ese producto al carrito porque siempre tiene que estar, como en el ejemplo del «Producto regalo» que ya hicimos en otro tutorial.

Por lo tanto, aquí teneís el código de este snippet que primero comprueba si el producto cuyo ID es 80 está en el carrito y si no está, lo añade automaticamente.

El video


Ahora vamos a modificar un poco el ejemplo de tal forma que queremos que se añada cierto producto al carrito siempre que ya exista en el carrito otro en concreto.

Para este ejemplo, al producto que añadimos lo seguiremos llamando «Producto regalo» y al otro, al que tiene que estar en el carrito para que se añada éste lo llamaremos «Producto promoción«.

Entonces lo que hacemos es modificar un poquito el código para que:

  • Compruebe que el «Producto promoción» está en el carrito.
  • Si está, añadir el «Producto regalo» automaticamente.
  • Además, si está, antes de añadirlo, que compruebe si ya existe en el carrito.

Como podéis observar, esto se anima y podríamos hacer infinidad de cosas pero por hoy ya hemos tenido bastante.

El video

Si os interesa todo esto o tenéis dudas, dejadme un comentario y lo comentamos.

Saludos y mucho ánimo!

Añadir un producto al carrito de WooCommerce automaticamente mediante código

En este tutorial vamos a ver cómo podemos añadir un producto al carrito cada vez que un cliente entra en nuestra tienda online de manera automática y con solo unas pocas líneas de código.

Para ponernos en situación, imaginemos que por el motivo que sea, queremos regalar un producto a nuestros visitantes simplemente por visitar nuestra tienda online.

Pues bien, podemos crear un producto con coste 0 y activamos la opción para que sólo se pueda comprar un elemento de este producto en cada pedido.

Por supuesto este código será sólo la base para realizar cualquier otra configuración atendiendo a vuestra imaginación.

Bien, una vez que ya tenemos el producto creado. Pongamos «Producto regalo«, apuntamos el ID de ese producto para usarlo en el código.

Añadir un producto al carrito de WooCommerce automaticamente mediante código

El producto que utilizaremos en nuestro ejemplo tiene el ID 80. Apuntado!

Ahora pegaremos el siguiente código al final del fichero «functions.php» o en el fichero de nuestro plugin de funciones (opción más correcta).

Es muy sencillo aunque de esta forma, según está, la aplicación es realmente limitada o reducida pero ya veremos en otros tutoriales como ir complicando este ejemplo para adaptarlo a nuestras necesidades.

Como ya supondréis, debéis modificar el ID del producto en el código anterior por el ID de vuestro producto.

Si probáis este código veréis que en el carrito siempre va a aparecer este producto y si lo elimináis del carrito, vuelve a aparecer.

El video

Espero que os sea de utilidad este tutorial.

Cualquier cosa, como siempre, dejadme un comentario y lo vemos.

Saludos y mucho ánimo!

Función WooCommerce para comprobar si el carrito está vacío

En alguna ocación nos hemos encontrado con la necesidad de comprobar si el carrito está vacío para realizar alguna acción si es así o si no es así.

Es más, podemos incluir esta función en muchos snippets para filtar de alguna manera dependiendo de si el carrito está vacío o no.

La función que usaremos para comprobar si el carrito está vacío es is_empty().

Nos devuelve un valor true si está vacío y false si no lo está.

Ejemplo:

Vamos a realizar un ejemplo sencillo y para ello retomamos el post donde comentábamos cómo añadir un producto al carrito.

En este caso vamos a añadir ese producto al carrito sólo en el caso en el que el carrito esté vacío.

El código para realizar eso es el siguiente.

Poco a poco vamos conociento ciertas funciones y la forma de utilizarlas para sacarle mayor partido a nuestras tiendas online o nuestros desarrollos con WooCommerce.

Si tienes alguna duda sobre esto, déjame un comentario.

Mucho ánimo!

No mostrar los mensajes de aviso de WooCommerce al actualizar el carrito

En la página del carrito disponemos, o más bien nuestros clientes disponen de un botón para actuzalizar los datos y contenido del carrito para que se refresquen y actualicen cada vez que se haga un cambio en el mismo.

Pongamos que tenemos el siguiente carrito:

WooCommerce - Ocultar mensajes al actualizar el carrito

Como vemos, sólo tenemos un producto y 13 como tantidad seleccionada.

Pues bien, si cambiamos algo en el carrito como por ejemplo la cantidad, pongamos a 15 unidades y pulsamos el botón «Actualizar Carrito«, se actualizará y mostrará un aviso de «Carrito actualizado», como podemos ver en la siguiente imagen:

WooCommerce - Ocultar mensajes al actualizar el carrito

Ahora bien, si no queremos que cada vez que se actualice el carrito, muestre este aviso, podemos usar el siguiente snippet de código:

De esta forma evitamos que se muestren estos avisos.

Espero que os sea de utilidad.

Podéis dejar vuestras observaciones en los comentarios.

Saludos y ánimo!!

WooCommerce Shortcode: Carrito [woocommerce_cart]

WooCommerce Shortcode: Carrito [woocommerce_cart]

[woocommerce_cart]

Éste shortcode muestra la página del carrito de WooCommerce.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [woocommerce_cart].

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

WooCommerce Shortcode - Carrito [woocommerce_cart]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Carrito [woocommerce_cart]
WooCommerce Shortcode - Carrito [woocommerce_cart]

WooCommerce Snippet: Cambiar el texto «Añadir al carrito»

WooCommerce Snippet- Cambiar el texto -Añadir al carrito-

Continuamos con los Snippets para WooCommerce y es que hay muchísimas cosas que se pueden modificar para dejarlo o adaptarlo a nuestras necesidades y gustos.

En este caso vamos a modificar el texto que aparece en el botón «Añadir al carrito» tanto en la lista de categorías de productos como en la página de producto simple. Si, son dos cosas diferentes y debemos utilizar dos hooks diferentes aunque la función sea la misma.

Y para ver lo que vamos a hacer, os pongo un par de imágenes a continuación con el «antes» y el «después«:

Para el caso de las lista de productos:

WC Snippet - cambiar texto -Añadir al carrito-

Y para el caso de las página de producto:

WC Snippet - cambiar texto -Añadir al carrito- - 02

Se ve claro, verdad?

No, si ya digo yo que a veces una imagen vale más que mil palabras. Vale, que no me lo he inventado yo, pero se entiende…

Bien, comenzamos y como siempre lo hacemos recurriendo al hook que necesitamos. Bueno, a los hooks, porque en este caso vamos a utilizar dos hooks. Uno para el listado de productos y otro para las páginas de producto.

Para las paginas de listado de productos utilizaremos el siguiente hook:

woocommerce_product_add_to_cart_text

Y para las páginas de producto el siguiente:

woocommerce_product_single_add_to_cart_text

Y ahora, como ya sabemos de otras veces, creamos los filters asi:

add_filter( 'woocommerce_product_add_to_cart_text', 'oaf_wc_change_add_to_cart_text' );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'oaf_wc_change_add_to_cart_text' );

Hasta aquí nada del otro mundo, simplemente hemos utilizado un par de hooks.

Ahora procedemos a crear la función que se ejecutará en estos filters.

Seguro que te has dado cuenta que el la función es la misma, verdad? No pasa nada, el proceso que tenemos que hacer en ambos hooks es el mismo por lo que no necesitamos crear dos funciones diferentes.

Pues bien, creamos la función:

function oaf_wc_change_add_to_cart_text() {
  
  return __('¡Comprar Ya!', 'woocommerce');
}

Si, ya, no tiene nada del otro mundo pero es que es así.

Simplemente modificamos el texto.

Hemos utilizado la función de traducción.

A continuación pongo el código completo de este Snippet:

Pues ya está.

Espero que os sea de utilidad y recordad que este Snippet lo podéis incluir en el fichero «functions.php» de vuestro Tema o crear vuestro propio Plugin para el.

Cualquier duda me la podéis comentar a través del formulario de contacto o dejándome un comentario en este artículo.

Venga, seguimossss!

Ir al contenido