WordPress developer in the middle of the night
About WooCommerce Snippets
En el post anterior comenté la forma de saber si WooCommerce está instado.
Ahora bien, si en lugar de eso queremos saber si está activado para realizar algún proceso en el que necesitemos que está activo y no sólo instalado, podemos utilizar el siguiente código.
Sobra decir que, tanto este código como el del post anterior, lo podemos adaptar a cualquier otro plugin del que necesitemos conocer si está instalado o activado.
Seguimos…
Si queremos saber si está instalado el plugin de WooCommerce en el WordPress en cuestión sobre el que vamos a realizar alguna tarea contra WooCommerce o lo necesitamos porque vamos a desarrollar algún plugin para WooCommerce y no debería de activarse si WooCommerce no está instalado, podemos utilizar el siguiente código para saber si está instalado y tomar las medidas oportuna en caso contrario.
Espero que os sea de utilidad.
Seguimos…
WooCommerce ponde a nuestra disposición una serie de características y funcionalidades que, en ocasiones puede que no sean necesarias para nuestro caso concreto.
Uno de estos casos que comento podría ser la necesidad de disponer de un campo «extra» en los ajustes generales de cada producto. Bien para nuestra propia gestión interna o bien para poder mostrarlo en la ficha de producto.
En cualquier caso, en el post de hoy te voy a dar el código necesario para añadir un campo de tipo «textarea» en los ajustes de cada producto.
Supongamos para nuestro ejemplo que necesitamos un campo para incluir una serie de especificaciones o «notas» en cada producto. A este campo le vamos a llamar «Especificaciones» y el código que utilizaremos para crear ese campo e incluirlo en los ajustes de cada producto será el siguiente:
Pues bien, una vez aplicado este código obtendremos algo como lo que se ve en la siguiente captura de pantalla:
Así de fácil conseguimos no sólo que se muestre este campo en los ajustes generales de un producto simple de WooCommerce sino que, lo que introduzcamos en ese campo, se guardará en la base de datos y se mostrará las próximas veces que editemos el producto.
Esto es sólo un ejemplo sencillo pero a partir de aquí podremos hacer un montón de cosas de manera sencilla.
Y ahora…
Bien, espero que te sea de utilidad este turorial y cualquier cosa me comentas.
Saludos y hasta la próxima.
Vuelvo con otro pequeño código un tanto extraño.
La verdad es que, aunque parezca increíble, simpre me encuentro con tareas un poco «raras» que necesitan mis clientes y esta es una de ellas.
La idea es añadir un texto que podría se un «Anuncio» o «Aviso» en la parte superior de las páginas de producto individual y ya puestos, que se muestre sólo en la página de un producto en concreto. Voy a explicarte cómo hacer los dos casos, ok?
Pues vamos allá!
A modo de ejemplo, te muestro una captura en la que puedes ver el anuncio de «¡¡ESTE ES NUESTRO PRODUCTO ESTRELLA!!». Eso si, muy sencillo porque el objetivo de esta entrada es mostrarte cómo hacerlo y luego tu puedas darle aspecto y diseño a este «anuncio».
Y este es el código necesario:
Lo único que tendríamos que hacer sería modificar el texto del «h2» a nuestro gusto y ya puestos poner un poco de estilos a la clase «anuncio-estrella».
Ahora vamos a añadir un poco de código para que el anuncio se muestre sólo en uno de los productos y para ello usaremos el «id» del producto.
Supongamos que el producto en el que queremos que se muestre el anuncio tiene la «id» «18». Añadimos el código «&& get_the_id() == 18» a la comprobación del «if». Total, que nos quedaría así:
Fácil y sencillo, ¿Verdad?
Claro que esto lo podríamos adaptar de muchas maneras y formas diferentes. Tanto para que se muestre en otras circunstancias como en categorías, etiquetas, etc… así como para que ese anuncio se muestre en cualquier otro sitio de nuestra web. Lo dejo a tu imaginación.
Pero antes de terminar…
Venga, a por el siguiente…
WooCommerce, entre otras cosas, al instalarse, crea un menú en el panel de administración de WordPress con diferentes páginas o secciones dentro del menú «WooCommerce»:
Generalmente son suficientes para la mayoría de los casos pero si queremos añadir una nueva página a este menú para cualqueir cosa que necesitemos, lo tenemos fácil porque lo único que debemos hacer es añadir el siguiente código:
Como vemos, es muy sencillo.
En primer lugar, creamos la página de submenu y desde esta misma función llamamos a la función que pintará la página en si para que nos quede algo similar a lo siguiente:
Ahora sólo nos quedaría escribir el código que necesitemos para esta página.
Y como no, para que no se diga…
En este post te mostraré el código necesario para que puedas añadir un campo de tipo «checkbox» en el checkout de tu WooCommerce.
La finalidad puede ser variada pero para este ejemplo vamos a suponer que queremos ese campo de tipo checkbox para que el cliente indique si quiere que le enviemos el manual de instrucciones por email. Como digo, este es sólo un ejemplo y puede que no sea muy real pero seguro que hay muchísimas posibilidades para este campo.
Para ponernos en situación, a continuación te muestro una captura de un checkout sin el campo que te acabo de comentar:
Pues bien, ahora te muestro el resultado que vas a obtener tras añadir el código necesario:
Como puedes observar en ésta última imagen, hay un nuevo campo de tipo «checkbox» que reza: «¿Quieres que te enviemos las instrucciones por email?».
Ahora te muestro el código que hace esto y algo más. Ese algo más te lo muestro en un momento. El código:
Vale, una vez que ya tienes el código para añadir a tu plugin de funciones u otro sitio que más te guste, te indico otra de las cosas que hace este código.
El código recoge el contenido de ese checkbox al «Realizar el pedido» y muestra el resultado de dicha selección en el pedido en cuestión, en la parte de administración. Te muestro un ejemplo a continuación:
Ya ves que este cliente quiere que le enviemos las instrucciones por email. Habrá otros que no querrán que se la enviemos.
Como decía al inicio, esta funcionalidad daría para un buen número de cosas que podamos tener en mente y no sólo con campos de tipo checkbox sino con otros tipos de campos.
Bueno, espero que este post te sea útil.
Pero espera… que nos falta…
Esto es todo por ahora.
Nos vemos en el siguiente.
Mucho ánimo!
Seguro que ya te habías dado cuenta de que en el checkout o «finalizar compra» de WooCommerce hay varios campos que son requeridos y el Código Postal es uno de ellos.
En la siguiente captura de imagen puedes ver que el campo Código Postal es obligatorio.
Hay diferentes motivos por los que necesitemos desactivar ese comportamiento del campo Código Postal de WooCommerce pero eso es lo de menos. Si estás leyendo este post es que esto te interesa de una manera o de otra. Bien para desactivar ese comportamiento o bien para quitar el campo del Código Postal del formulario de la página de finalizar compra de WooCommerce.
Voy a explicarte de manera sencilla ambos casos.
En este caso lo que vamos a hacer es desactivar la verificación del Código Postal haciendo que ese campo no sea obligario. Es decir, haremos que el campo sea opcional de manera que si el cliente lo rellenga, bien. Si no, también.
Para esto utilizaremos el siguiente código:
Aplicando este código conseguiremos que el campo no sea obligatorio como podemos observar en la siguiente captura de pantalla:
Perfecto, si esto es que buscabas, ya lo tienes.
Te recuerdo que este código lo deberías incluir en un plugin de funciones o en su defecto, utilizar el plugin «Code Snippets» y como último recurso añadirlo en el fichero functions.php del tema activo.
Pasamos a la segunda opción…
En este caso, como dice claramente el título, vamos a eliminar el campo Código Postal del formulario del checkout de manera que no se muestre, que no aparezca, ¿ok?
Pues no se hable más, para ese caso utilizaremos el siguiente código:
Sencillo…
Y para no ser menos, en este caso también te he preparado un video en el que implemento ambos casos.
Bueno, hasta aquí hemos llegado. Espero que todo esto te sea de utilidad.
Saludos y mucho ánimo!
WooCommerce dispone de varios estados de pedido por defecto que son:
Pues bien, es posible que quieras disponer de uno o varios estados de pedido más de los que te ofrece WooCommerce, Como por ejemplo el estado «Enviado».
Como no, lo haremos mediante un snippet de código, claro que si.
A continuación tienes el código necesario para crear un nuevo estado de pedido con el nombre «Enviado»:
Básicamente, en el código anterior observamos que consta de dos partes, una para crear el nuevo estado de pedido «Enviado» y otra en la que lo añadimos a la lista de estados de pedidos de WooCommerce.
Puedes modificar el código para cambiar el estado de pedido «Enviado» a cualquiera que necesites.
Y a continuación…
Mucho ánimo y hasta la próxima!!
Vuelvo con un nuevo snippet de código para WooCommerce.
En esta oscación te traigo un trocito de código que te va a permitir habilitar la gestión de stock en todas las variaciones de productos variables de tu WooCommerce y establecer la cantidad de stock de cada una de esas variaciones a la que tu quieras.
Para este ejemplo he usado «1» como cantidad de stock para todas las variaciones.
Sin más dilación, aquí tienes el código:
Si no quieres establecer a «1» la candidad de stock, puedes establecer otra cantidad y lo único que tienes que hacer es cambiar «.val(1);» por la cantidad que quieras al final de la línea 20, por ejemplo: «.val(9);»
Hasta el siguiente y mucho ánimo!
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:
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:
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!
Si quieres que no se muestren el resto de métodos de envío en el checkout de WooCommerce cuando existe el método de envío gratuito, a continuación te explico cómo hacerlo.
Nos ponemos en la situación en la que ya disponemos de un método de envío con coste fijo de, por ejemplo, 5 euros para los envíos que no superen los 50 euros pero a partir de ahí, que el envío sea gratis.
Asumimos que ya tenemos los métodos de envío configurado de manera similar a la que podéis ver en las siguientes imágenes:
Una vez que ya lo tenemos configurado de esta forma, podemos realizar la prueba de comprar algo y ver el resultado.
Como podemos ver en la imagen siguiente, como el pedido supera los 50 euros, se muestra el método de envío «Envío gratuito» pero claro, también se muestra el otro método de envío: «Envío fijo: 5,00€«.
Ahora bien, nosotros queremos que cuando se muestre el método de envío «Envío gratis«, no se muestre el otro método de envio y para ello podemos aplicar el siguiente snippet:
Una vez implementado este snippet, si no te funciona, prueba a borrar las sesiones del cliente en WooCommerce -> Esado -> Herramientas –> Borrar las sesiones del cliente.
Ahora si, volvemos comprar productos y nos vamos de nuevo al carrito para ver el resultado.
Compramos por un valor superior a 50€ para ver qué pasa y…
Perfecto!
Ahora ya no tenemos el problema que teníamos antes. Ahora, cuando el cliente compre por un valor superior a 50€ sólo tendrá la opción de envío gratuito que es lo que queremos para no liarle.
Bueno, espero que este post os sea de utilidad y como siempre, cualquier cosa me podéis dejar un comentario y lo vemos.
Saludos y mucho ánimo!
La sección de ajustes de WooCommerce dispone de varias pestañas con diferente información para configurar nuestro ecommerce a nuestras necesidades pero en ocasiones no utilizamos todas esas pestañas y puede que nos estorben a nosotros o incluso a alguno de nuestros colaboradores.
En primer lugar vamos a ver a qué me refiero y para ello, desde el panel de administración de WordPress vamos a WooCommerce –> Ajustes. Ahí podremos ver algo similar a lo siguiente:
Para este ejemplo, vamos a suponer que nosotros queremos ocultar o eliminar la pestaña «Integración» porque no la vamos a usar y por lo que sea, nos estorba, confunde o cualquier otro motivo.
Pero antes de nada vamos a ver cuales son las pestañas que hay, a mostrar el array con los nombres de las pestañas para poder elegir la que queremos.
Para realizar esto de manera sencilla y rápida, podemos utilizar el siguiente snippet de código que lo que hace es eso, mostrarnos en el admin el array con los diferentes nombres de las pestañas de ajustes de WooCommerce.
Como siempre, este snippet lo podemos añadir al final del fichero functions.php de nuestro tema activo o a nuestro plugin de funciones. De todas formas, como es algo temporal, lo pondremos y lo quitaremos porque sólo lo queremos para eso, para saber los nombres de las pestañas de ajustes que hay ahora mimos para quitar una o varias de ellas.
Bien, una vez añadido el código, en el admin nos mostrará el array de las pestañas de ajustes de WooCommerce. Algo similar a lo siguiente:
Como vemos en la imagen anterior, el array está compuesto de las siguientes pestañas:
Ahora, antes de seguir adelante, elegimos la o las pestañas que queremos ocultar o eliminar. En este caso, para este ejemplo, yo voy a ocultar la pestaña de Integración (integration).
Ahora que ya lo tenemos claro, que sabemos qué pestaña o pestañas queremos ocultar o eliminar, vamos a proceder con el código necesario para realizar esto.
El código para quitar la pestaña «Integración es el siguiente»:
Y el resultado será el siguiente:
Bien, no?
Hemos quitado u ocultado la pestaña «Integración» muy facilmente.
Este código es para el caso de la pestaña integración pero si queremos ocultar otra pestaña, no tenemos mas que cambiar el nombre de la pestaña en $tabs_array[‘pestaña’].
Ahora que ya sabemos cómo quitar u ocultar una pestaña de los ajustes de WooCommerce, vamos a ver cómo quitar 2 o más en una misma línea de código.
Es tan sencillo como separar cada pestaña entre comas. Pero para muestra, un ejemplo.
Para este ejemplo vamos a ocultar las pestañas «Integración», «Cuentas y privacidad» y «Avanzado».
El código sería el siguiente:
Y el resultado seria:
Ya vemos que es realmente sencillo ocultar o quitar pestañas de los ajustes de WooCommerce.
Ahora, si queremos quitar otras pestañas, lo único es sustituir por los nombres adecuados.
Esto que acabamos de hacer también lo podemos hacer para que sólo uno o varios roles de usuario vean o no vean esas pestañas porque puede que nos interese que ciertos roles de usuario no vean ciertas pestañas.
Para este ejemplo voy a ocultar esas tres pestañas del ejemplo anterior para los usuarios con el rol de «administrador».
El código sería el siguiente:
Y el resultado ya nos lo podemos imaginar, ¿verdad?
El video
Pues esto es lo que hemos hecho hoy, espero que os haya gustado y os sea de provecho.
Como siempre, cualquier cosa me dejáis un comentario.
Saludos y mucho ánimo!
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:
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»:
El video
Espero que este código os sea de utilidad.
Cualquier cosa, dejadme un comentario.
Saludos y mucho ánimo!
¡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.
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!
Por defecto se muestran los precios de los productos en la tienda de WooCommerce, esto es normal para que los usuarios vean el precio, claro.
Es posible que tengamos algún tipo de membresía, asociación, seamos mayoristas, o cualquier otra situación que requiera que no se muestren los precios a todos los visitantes de la web sino sólo a los usuarios que accedan con su cuenta privada.
Es éste último caso el que nos ocupa hoy, vamos a ocultar los precios de la tienda y sólo los mostraremos si el usuario ha accedido.
Ah, y ya puestos, mostraremos un mensaje para que el visitante sepa que debe estar registrado para poder ver los precios.
Para ello, utilizaremos el siguiente código que deberemos añadir al final del fichero functions.php de nuestro tema activo:
De esta forma, los usuarios que no están registrados ni logueados (claro), verían lo siguiente:
El video
Espero que os sea de utilidad esta información.
Cualquier cosa, dejáis un comentario y lo vemos.
Saludos y mucho ánimo!
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.
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:
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.
Espero que os sirva de ayuda.
Cualquier cosa dejáis un comentario.
Saludos y mucho ánimo!
Por regla general, no tenemos ningún tipo de limitación en WooCommerce para que los clientes compren todos los productos que quieran y cuantos más mejor.
Con esto quiero decir que pueden comprar productos de diferentes categorías sin problemas. Es lo normal, claro.
Pero puede suceder que no nos interese que puedan comprar productos de varias categorías a la vez, ya sea por cuestiones de envío o por el motivo que sea.
Para ello podemos utilizar el siguiente Snippet de código que lo que hará será no permitir que se añada un producto de una categoría diferente a la categoría del producto que ya está en el carrito.
Si ya hay un producto en el carrito y el cliente intenta añadir al carrito un producto de otra categoría se mostrará un mensaje como el que vemos en la siguiente imagen:
Este mensaje lo podéis cambiar para adaptarlo a vuestras necesidades.
Me podéis dejar un comentario con vuestra apreciaciones.
Saludos y mucho ánimo!!
Por defecto WooCommerce muestra la descripción corta del producto por encima del botón de «Añadir al carrito«.
Si queremo mover esa descripción corta para que esté debajo del botón de «Añadir el carrito», podemo usar el siguiente snippet de código y añadirlo a nuestro plugin de funciones o al fichero functions.php de nuestro tema activo.
Una vez que utilicemos este código, se motraría así:
Espero que este código os sea de utilidad.
Cualquier cosa me podéis comentar en los comentarios.
Saludos y mucho ánimo!!
WooCommerce nos permite establecer o más bien limitar los páises a los que venderemos. Si sólo seleccionamos un país en los ajustes, ese país estará seleccionado pero si seleccionamos varios o no seleccionamos ninguno para que se pueda vender a todo el mundo, tal vez queramos que el país que se muestra por defecto en el campo de «País» del checkout de WooCommerce sea otro y no el que se muestra.
Como podemos ver en la siguiente imagen, el país por defecto en el campo de «país» de los detalles de facturación es «España«:
Por el motivo que sea, queremos otro país por defecto, pongamos… «Finlandia«.
Antes de nada, necesitamos saber el código de ese país por lo que podemos mirarlo en el siguiente listado:
Bien, comprobamos y vemos que el código para «Finlandia» es «FI», como cabía esperar…
Una vez que ya sabemos el código del país que vamos a establecer por defecto en el campo «país» del formulario de «Detalles de facturación» del checkout, procedemos a añadir el siguiente snippet en el functions.php de nuestro tema activo o mejor en nuestro plugin de funciones:
Sencillo, ¿verdad?
Ahora, si queremos, podemos cambiar el código del país para que sea otro y no Finlandia el que se muestre por defecto.
Espero que este tutorial os sea util.
Os invito a dejar un comentario.
Saludos y ánimo!
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:
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.
Espero que este tutorial te sirva de ayuda.
Cualquier apreciación que tengas puedes dejárla en los comentarios.
Saludos y ánimo!!
