WordPress developer in the middle of the night
About 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…
Con este snippet añadimos a los singles de un cpt en el desplegable que aparece para seleccionar la página estática del sitio.
Esta opción está en: Ajustes -> Lectura
GIST URL: https://gist.github.com/Oscar-Abad-Folgueira/ebc85aac65319ba3605b156c87a60c2a
WordPress pone a nuestra disposición un buen número de funciones para realizar comprobaciones o chequeos de dónde estamos para que nosotros realicemos una acción u otra en función del resultado de esa función.
Pues bien, hoy vengo a hablarte de «is_page_template()«. Esta función, como ya habrás adivinado, nos permite comprobar si se trata de una template.
El modo sencillo sería este:
Ahora bien, si queremos comprobar una template en concreto lo que podemos hacer es esto:
Y así, sin más, muy sencillo pero muy útil. Pero échale un vistazo a la documentación de «is_page_template()» por si tienes alguna duda.
Ahora lo que hagas con este condicional es sólo cosa tuya, de tu imaginación y de tus necesidades.
Espero que te sea de utilidad.
Seguimos…
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!
WooCommerce almacena el número de unidades que se venden de cada producto por lo que podemos aprovechar esta característica para mostrar el número de unidades vendidas de cada producto a través de un snippet de código muy sencillo.
Para dejar claro lo que vamos hacer, te muestro una imagen donde puedes ver que efectivamente se muestran las unidades en la página de producto.
Como podemos observar en la imagen anterior, se ha añadido el apartado «Unidades vendidas: 1». Esta tarea es muy sencilla de hacer pero ya que vamos a hacer esto vamos a intentar poner también un mensaje para los casos en los que no se ha vendido ninguna unidad de ese producto de manera que podemos motivar al posible comprador de alguna manera.
Aquí tienes un ejemplo de un producto que todavía no hemos vendido:
Como vemos, tenemos que en el caso en el que el producto no se haya vendido nunca, se mostrará el mensaje «Serás la primera persona que compre este producto. ¡Anímate!. Por supuesto este mensaje lo puedes cambiar a tu gusto.
Como ya supondrás, esto lo vamos a hacer mediante un snippet de código sencillo que podemos incluir en el plugin de funciones de nuestro tema, en el fichero functions.php o usando un plugin como «code snippets». El código es el siguiente:
Este código lo podríamos complicar un poco más para realizar alguna cosa como que pudiéramos ofrecer un porcentaje de descuento sólo en los productos que no tengan ventas pero esto es otra historia. Si te interesa, me lo comentas y lo miramos…
Y como no:
Saludos y hasta la próxima.
En el post anterior te mostré cómo deshabilitar la opción de zoom en las imágenes de los productos de WooCommerce en las páginas de producto simple:
En este post voy a mostarte la opción contraria que es presiamente habilitar esta opción de zoom.
Por consiguiente, si en nuestro tema no está activada la opción de zoom por defecto como podemos ver en la dos imágenes siguientes:
Si queremos activarla, podemos hacerlo a través de un sencillo snippet o trozo de código como te muestro a continuación:
Es tan sencillo como esto.
Espero que os sea de utilidad.
Venga…
Antes de nada te voy a explicar a qué me refiero cuando digo «opción de zoom»….
Aunque esto depende del tema que estés utilizando, buena parte de los últimos tema de WordPress ya tienen activada esta opción.
En una página de producto individual de WooCommerce, como se puede observar en la imagen siguiente, vemos el icono de la lupa en la parte superior derecha de la imagen del producto.
Es más, si pasamos el cursor del ratón por encima de la imagen, nos mostrará la imagen en modo zoom.
Es una buena opción para que los posibles clientes vean más de cerca el producto que queremos verderle pero habrá ocasiones en las que no queramos que esta opción de zoom y lupa estén activadas. En esos caso podemos desactivar esta opción con un pequeño trocito de código o snippet que te muestro a continuación:
Como digo, de esta forma desactivamos la opción de zoom en las imágenes de los productos de WooCommerce.
Espero que os sea de utilidad.
Venga…
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!!
WooCommerce ha añadido una nueva opción al menú de administración de WordPress con el nombre de «Márketing» y que podemos encontrar justo debajo de la opción «Análisis» del menú de administración.
Es muy posible que esta opción no nos interese por lo que podemos desactivarla con un sencillo snippet:
Y ya está.
Espero que esta información os sea de ayuda.
Podés dejar un comentario si lo queréis.
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!!
