Etiqueta: hooks

About hooks

Subscribe Feeds

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

Posted on by Óscar Abad Folgueira

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!!

Cómo eliminar pestañas en los ajustes de producto de WooCommerce

Posted on by Óscar Abad Folgueira
Cómo eliminar pestañas en los ajustes de producto de WooCommerce

WooCommerce añade una sección dentro de cada página de procuto, en el modo edición desde donde podemos realizar varios ajustes a nivel de producto. Esto quiere decir que los ajuste que hay ahí son solo para cada producto individual y los cambios que realicemos en un producto no afectan a los demás productos.

En la siguiente imagen podemos ver la sección de «Datos del producto» a la que me estoy refiriendo.

Cómo eliminar pestaña avanzado en datos de producto en WooCommerce

Si nos fijamos, esta sección (Datos del producto), en su parte izquierda dispone de diferente pestañas o tabs sobre las que podemos pulsar para que se muestren los ajustes de cada una de ellas.

Estas pesañas, por defecto son «General«, «Inventario«, «Envío«, «Productos relacionados«, «Atributos» y «Avanzado«.

Como digo, estas son las pestañas por defecto de WooCommerce porque es posible que algún plugin añada alguna otra para añadir sus propios ajustes.

Nosotros nos vamos a centrar en estas.

Si queremos aliminar alguna de estas pestañas para que no se muestren, lo podemos hacer utilizando el hook «woocommerce_product_data_tabs» de la siguiente forma:

El snippet anterior tendríamos que adaptarlo a nuestras necesidades ya que quita todas las pestañas pero si por ejemplo queremos quitar sólo la pestaña «Avanzado» usaríamos el siguiente código:

Nos quedarías así:

Cómo eliminar pestaña avanzado en datos de producto en WooCommerce

Y así, dependiendo de la pestaña, podemos quitar las que queramos.

Espero que este post os sea de utilizar y que me dejéis cualquier observación en los comentarios.

Saludos y mucho ánimo!

Excluir productos de cualquier cupón creado en WooCommerce

Posted on by Óscar Abad Folgueira
Excluir productos de cualquier cupón creado en WooCommerce

Los cupones de WooCommerce son una fantástica herramienta que podemos utilizar en cualquier momento.

Podemos crear todos los cupones que necesitemos e incluso configurarlos para que se adapten a las necesidades que tenemos en nuetra tienda online.

Es más, WooCommerce nos permite bloquear cada cupón por producto y esto es fantástico. Pero ¿qué pasa cuando tenemos muchos cupones y queremos que un producto en concreto no haga caso a cualquier cupón?

Para entendernos…. Queremos no se pueda utilizar ninguno de los cupones que tenemos en un producto en concreto.

El comportamiento por defecto de WooCommerce no nos permite hacer esto, tendríamos que ir cupón por cupón y establecer desde cada uno de ellos, el producto sobre el que no se aplicará.

Ahora bien, si tenemos varios o muchos cupones y no queremos ir cupón por cupón haciendo esto que comentamos, lo ideal sería disponer de una opción a nivel de prodcuto en la cual podamos activar para que no se aplique ningún cupón de nuestro WooCommerce.

Con el siguiente trocito de código hacemos eso, creamos una opción dentro de cada producto de WooCommerce donde, al activarla, le decimos a WooCommerce que no aplique ningún tipo de cupón sobre ese producto.

Este es el código:

Y este es el aspecto de la opción que encontraremos en

WooCommerce - Deshablitar uso cupones por producto

Espero que os sea de utilidad y cualquier cosa ya sabéis, dejad un comentario.

Mucho ánimo!

Obtener el contenido de cualquier post en WordPress

Posted on by Óscar Abad Folgueira

Cuando estamos desarrollando en WordPress, picando código en los diferentes ficheros php, ya sabemos que nos muestra el contenido de ese fichero como es el caso de los ficheros de archivo.

En el ejemplo que os presento queremos ya tenemos un fichero archive-hook.php donde tenemos implementado todo el código necesario para que muestre todos los posts del CPT «hook» en forma de listado como nosotros/as queremos pero, la casualidad es que también queremos mostrar algún tipo de contenido más estático en la parte superior de esa página, como si fuera el ancabezado de la página de archivo y después que muestre el listado que ya tenemos preparado en el código.

Dependiendo de cómo lo tengamos, es posible que al crear la página «hooks» en el panel de administración de WordPress, no nos muestre ese contenido y solo nos muestre lo que tenemos implementado en el fichero «archive-hook.php«.

Nota: He dicho crear la página «hooks» porque se trata de un CPT y tenemos reescrita el slug por «hooks«.

Bien, en estos casos vamos a tener que echar mano de una función de WordPress para coger el contenido de la página «hooks» y decirle por código que nos la muestre antes del listado de los hooks que tenemos implementado en el fichero «archive-hook.php«.

Esto que comento, podemos hacerlo usando la función: «get_post();«

A continuación podemos ver el formato y parámetros de esta función:

get_post( int|WP_Post|null $post = null, string $output = OBJECT, string $filter = 'raw' )

Tenéis más información sobre la función get_post() en el siguiente enlace: https://developer.wordpress.org/reference/functions/get_post/

Para el caso que nos ocupa, lo único que necesitamos es el ID del post (en este caso, página) que tiene el contenido que queremos mostrar por código antes del listado.

Por consiguiente, una forma de hacerlo sería la siguiente:

Con esto conseguimos mostrar el contenido de ese post que hemos creado en forma de página, entrada o de otro tipo en nuestro código.

Es una forma sencilla de tener el control de la parte estática a través del editor de WordPress y dejar la parte dinámica al código.

Espero que os sea de utilidad y cualquier duda o sugerencia, ya sabéis, dejadme un comentario o hacédmelo saber de cualquier otra forma.

Saludos a todos/as!

Mostrar la descripción de los productos en la tienda y en las páginas de archivo de WooCommerce

Posted on by Óscar Abad Folgueira
Mostrar la descripción de los productos en la tienda y en las páginas de archivo de WooCommerce

En este pequeño snippet vamos conseguir mostrar la descripción corta del producto en los listados de procuto, tanto en la página de la tienda como en el resto de páginas de archivo como las páginas de categoría, etiquetas, etc…

Para ponernos en situación, lo que queremo conseguir es lo siguiente:

WooCommerce - Mostrar descripción corta de los productos en la tienda y páginas de archivo

La descripción corta de l producto se establece por cada producto, en la pantalla de edición.

Por lo tanto, con este snippet conseguiemos lo que se muestra en la imagen anterior.

Tan sencillo como utilizar la función the_excerpt() en el hook «woocommerce_after_shop_loop_item_title» que nos permite posicionar el contenido bajo el título.

Cualquier duda o sugerencia me podéis dejar un comentario.

Saludos y ánimo!

WooCommerce Snippet: Cambiar el icono de Paypal

Posted on by Óscar Abad Folgueira
WooCommerce Snippet- Cambiar icono de Paypal

Volvemos con otro WooCommerce Snippet en el que vamos a cambiar el icono que WooCommerce establece para Paypal.

Para que os hagáis una idea, os muestro el icono en cuestión:

woocommerce-snippet-cambiar-ionono-paypal-01

Si, como es el caso que muestro en el que no disponemos de pagos con tarjeta de crédito, es posible que sea mejor que el visitante no vea ese icono porque es posible que no sepa que a través de Paypal también puede pagar con tarjeta.

Pues bien, para estos casos podemos sustituir esa imagen o icon por otra imagen.

Yo voy a utilizar la siguiente imagen:

icono-paypal-tarjetas

Creo que con esta imagen el visitante puede hacerse una idea más clara de que puede pagar con tarjeta de crédito o débito a través de esta opción, ¿verdad?

La cosa es dar facilidades a los visitantes y clientes.

Esto lo vamos a hacer, como es costumbre en los snippets que estoy publicando desde hace tiempo, en el fichero functions.php aunque os recuerdo que también podemos hacerlo creando un plugin para esto en concreto.

Por cierto, habrá que empezar a hacer plugins de un momento a otro porque con tanto snippet estamos dejando el fichero functions.php a tope!

Os prometo que en breve comenzaré a publicar tutoriales para hacerlo a través de plugins e incluso daré la opción para que os los descarguéis y los instaléis tranquilamente en vuestros WordPress, WooCommerce o incluso otro tipo de plugins.

Lo más «limpio» si lo hacemos a través del fichero functions.php de nuestro tema, sería subir la imagen o icono que vamos a utilizar y colocarla en el directorio «images» de este tema pero como todo, tiene su cosa buena y cosa mala porque si cambiamos de tema, perdemos la url a la imagen sino volvemos a ubicar la imagen en el directorio «images» del nuevo tema.

Pues bien, para este ejemplo y aunque pueda parecer un poco «sucio«, voy a subirla a través del gestor de medios de WordPress. Es decir, la subiré como si de una imagen más se tratara. De hecho ya la he subido puesto que la he puesto hace un momento en este post. Utilizaré ese mismo enlace en lugar de colocar la imagen en un directorio del tema.

Si hiciéramos un plugin, estaría bien que la imagen la pudiéramos subir para cambiarla cuando queramos. Apunte: interesante para un plugin!! Apuntado queda!

De acuerdo, entonces obtenemos la url de la imagen que queremos y que hemos subido a WordPress. En mi caso es esta: https://oscarabadfolgueira.com/wp-content/uploads/2016/03/icono-paypal-tarjetas.png

Ahora lo que nos queda es encontrar el hook que nos permitirá hacer esto. Aunque os parezca mentira, existe este hook:

woocommerce_paypal_icon

Con esto queda claro que tanto WordPress como WooCommerce están repletos de Hooks. Perfecto!

Seguimos… Y como es costumbre debemos crear una función que se ejecute en este hook.

Y ¿Qué tiene que hacer esta función exactamente? Pues nada más sencillo que devolver la url de la nueva imagen que queremos que aparezca en lugar del icono que WooCommerce establece por defecto.

Esto lo haremos fácilmente así:

return "url_de_la_imagen.png";

Que en mi caso será:

return "https://oscarabadfolgueira.com/wp-content/uploads/2016/03/icono-paypal-tarjetas.png";

Hasta aquí todo bien.

Ahora creamos la función de esta manera y colocamos la línea que acabamos de indicar. Es decir, el retorno de la función.

function oaf_change_paypal_icon_image() {
     
     return "https://oscarabadfolgueira.com/wp-content/uploads/2016/03/icono-paypal-tarjetas.png";
}

Pues ya está, ya lo tenemos listo. Ahora sólo tenemos que indicar a través de «add_filter«, el hook y la función.

add_filter( 'woocommerce_paypal_icon', 'oaf_change_paypal_icon_image' );

Perfecto!!

Nos quedaría algo así:

woocommerce-snippet-cambiar-ionono-paypal-03

Queda mejor ahora, ¿o no?

Yo creo que si, que ahora el visitante o posible cliente tiene más claro que puede pagar con tarjeta a través de Paypal seleccionando esta opción.

Y como siempre, a continuación os pongo el código completo de este WooCommerce Snippet para vuestro uso y disfrute:

Bien, espero que os haya gustado este trocito de código para WooCommerce y que lo uséis cuando os haga falta.

Cualquier duda sobre este o cualquier otro tema, me los podéis hacer llegar a través del formulario de contacto o dejando un comentario.

Sin más, nos vemos en el siguiente post.

Seguid bien!!

Saludos.

WooCommerce Snippet: Excluir categorías de la lista de categorías

Posted on by Óscar Abad Folgueira
WooCommerce Snippet- Excluir categorías de la lista de categorías

Volvemos con otro WooCommerce Snippet para WordPress y en este caso vamos a intentar que no aparezcan ciertas categorías en la lista de categorías del correspondiente Widget.

Es posible que en alguna ocasión nos venga bien este trozo de código por lo que si os gusta, apuntadlo o guardad el enlace a esta página para tenerlo a mano.

Para no extendernos demasiado, a continuación os pongo el código del snippet y luego lo comento un poco para que lo comprendamos.

¿Que os parece?

No tiene nada del otro mundo. Simplemente se trata de utilizar los hooks correctos que en este caso son:

woocommerce_product_categories_widget_dropdown_args

Que se ejecuta en el menú desplegable del widget de lista de categorías

y

woocommerce_product_categories_widget_args

Que se ejecuta en el widget de categorías de productos como indica en su nombre.

Hasta aquí todo correcto porque no es más que encontrar los hooks correctos.

Ahora toca lo de siempre, crear la función que realice la o las tareas que necesitamos que se ejecuten en estos dos hook que acabamos de comentar.

function oaf_wc_exclude_categories_from_list_widget( $cat_args ) {
  
	$cat_args['exclude'] = array('14','17'); // array with categories ids to exclude
	return $cat_args;
}

Queda claro que la función que he preparado es: «oaf_wc_exclude_categories_from_list_widget«. Pues bien, lo que hacemos es asignar a la clave «exclude» una serie de ids que corresponden a las categorías que queremos excluir del listado de categorías.

Estas ids o aunque sólo sea una, se la pasamos en forma de array. Como podemos ver en la función, yo le estoy asignando «array(’14’, ’17’)» Con esto consigo que las categorías cuyos IDs coincidan con estos, sean excluidas de la lista y por consiguiente no aparezcan en la misma.

Pues sin más, ya está todo porque la última sentencia es el retorno de «$cat_args«.

Ya se que no hace falta que lo diga pero lo digo por si acaso. Este código lo podéis incluir en el fichero «functions.php» de vuestro tema o incluso crear vuestro propio plugin.

Espero que este snippet os sea de ayuda en un momento dado pero de todas formas, si tenéis alguna duda o queréis hacer algo parecido y no os sale bien, podéis contactar conmigo a través del formulario de contacto y estaré encantado de ayudaros en todo lo que pueda.

De la misma forma, si tenéis alguna duda sobre cualquier otra cosa sobre la que trata este blog, es decir sobre WordPress y todo lo que hay detrás, pues lo mismo, formulario de contacto.

Además, si queréis que haga algún tutorial sobre algo en concreto, lo mismo.

Venga, nos vemos en el próximo!

WordPress Snippet: Redirigir a nuevos usuarios registrados a una página específica

Posted on by Óscar Abad Folgueira
Wordpress Snippet - Redirigir nuevos usuarios registrados a una página específica Raw

Este snippet o trocito de código nos puede servir en aquellos casos en los que queramos redirigir a los nuevos usuarios registrados a una página específica. Generalmente será de nuestra web pero podría ser una página externa.

Podríamos utilizarlo para llevar a los nuevos usuarios a una página en la que expliquemos ciertas ventajas o servicios de nuestra empresa o a algún que otro regalito para los nuevos.

Como este Snippet es muy sencillo, dejo el código a continuación:


Como siempre, este código lo podemos incluir en el fichero functions.php de nuestro tema o crear nuestro propio plugin.

También como siempre os invito a que me hagáis llegar vuestras dudas sobre este y cualquier otro tutorial o artículo que haya publicado e incluso a proponerme algún otro artículo que os pueda ser de interés.

Saludos y seguimos!

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

Posted on by Óscar Abad Folgueira
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