Añadir contenido en la cabecera de los productos o en productos en concreto

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».

Mostrar anuncio en la cabecera de los productos o en productos en concreto

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…

El video

Venga, a por el siguiente…

WooCommerce Snippet: Mover la descripción corta del producto debajo del botón de «Añadir al carrito» en las páginas de producto

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í:

WooCommerce Snippet - Mover la descripción corta debajo del botón "Añadir al carrito"

El video

Espero que este código os sea de utilidad.

Cualquier cosa me podéis comentar en los comentarios.

Saludos y mucho ánimo!!

Establecer que sólo se puedan comprar cantidades de 2 en 2 en WooCommerce

El WooCommerce, a la hora de comprar un producto, disponemos de un campo en el que podemos indicar la cantidad de elementos de ese productos que queremos comprar:

WooCommerce campo cantidad comprar producto

Ya sabremos que podemos ir aumentando el número de productos con el indicador correspondiente así como reducir ese número con el otro botón.

El comportamiento por defecto de WooCommerce es que cada vez que pulsamos en el botón de «añadir», se suma un elemento y si pulsamos en el botón de «disminuir cantidad» hace lo contrario.

Como este es el comportamiento por defecto de WooCommerce, si queremos que este «paso» no sea de 1 en 1 sino de 2 en 2 o de otra cantidad, podemos usar un pequeto snippet que nos resolverá este problema rápidamente.

Para este snippet utilizaremos el hook «woocommerce_quantity_input_args» de la siguiente forma:

add_filter( 'woocommerce_quantity_input_args', 'woocommerce_quanty_imput_step', 10, 2 );

Ahora tenemos que añadir el código neceario a nuestra función «woocommerce_quantity_input_step()» para que en lugar de incremetar y decrementar de 1 en 1, lo haga de 2 en 2. Pero como digo, esto lo podemos cambiar a nuestro gusto (ej: de 8 en 8).

En esta función establecemos el parámetro ‘step’ igua a 2 así:

function woocommerce_quanty_imput_step( $args, $product ) {
	$args['step'] = 2;  // de 2 en 2.
	return $args;
}

Si añadimos el código que tenemos hasta ahora, nos funcionará pero si nos fijamos, no funciona como queremos ya que cuando entramos en la página de un producto, la cantidad inicial es «1» y claro, esto no es lo que tenemos en mente porque no queremos que puedan comprar uno sino un mínimo de 2 y a partir de ahí, de 2 en 2.

Pare establecemos que el valor inicial de ‘input_value’ sea 2. Esto lo hacemos de la siguiente manera:

$args['input_value'] = 2;

Vamos avanzando…

Pero… ¿y si el usuario indica la cantidad modificando el valor con el teclado? No funciona nuestro invento, claro que no.

Entonces, para ello lo que vamos a hacer es establecer un valor mínimo para que no pueda ser nunca uno. Siempre el mínimo será 2.

$args['min_value'] = 2;

Si hacemos esto y probamos a poner «1» en la cantidad y pulsamos en el botón de «Añadir al carrito», nos mostrará un mensaje similar al siguiente:

WooCommerce mensaje cantidad mínima

Ya lo tenemos funcionando.

Ahora vamos a recopilar todo el código para que lo tengáis listo para copiar, pegarlo donde queráis y modificar a vuestro gusto:

El video

Espero que os sea de utilidad este tutorial y cualquier cosa, me dejáis un comentario.

Saludos y mucho ánimo!!

WooCommerce Shortcode: Página de producto [product_page]

[product_page]

Éste shortcode muestra la página de un producto simple por ID o for SKU.

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 id=»53″].

En el ejemplo anterior, mostraríamos la página del producto cuya id es 53.

De la misma manera también prodíamos utilizar el atributo «sku» para mostra un producto con un sku específico.

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

WooCommerce Shortcode - Página de producto [product_page]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Página de producto [product_page]

Crear una nueva pestaña en la página de producto de WooCommerce

Crear una nueva pestaña en la página de producto de WooCommerce

En la página de producto de WooCommerce disponemos por defecto de una serie de «pestañas» con información diversa como se muestra en la siguiente captura:

WooCommerce - Creaer una nueva pestaña en la página de producto

Es posible que tengamos alguna pestaña más dependiendo de nuestra configuración, plugins y demás.

Pero… ¿Y si queremos añadir una pestaña con cierta información en todos los prodcutos y esta va a ser la misma para todos?

Una forma sencilla es utilizar el código que pongo a continuación:

Cambiaremos el nombre de la pestaña a nuestro gusto y necesidades así como el contenido de la misma.

Cón esto, podremos tener nuestra nueva pestaña en cada producto:

WooCommerce - Creaer una nueva pestaña en la página de producto

Como siempre, esto podemos complicarlo todo lo que queramos o necesitemos ya que podríamos incluir código para que muestre inforación del producto en cuestión, algún campo personalizado, etc… Pero esto lo dejo para otro artículo si os interesa.

Y como siempre, cualquier cosa me dejáis un comentario y lo vemos, ok?

Saludos y mucho ánimo!!

Cómo saber el ID de un producto de WooCommerce

Cómo saber el ID de un producto de WooCommerce

¿En algún momento te ha hecho falta o te hace falta ahora conoce el ID de un producto de WooCommerce?

Es muy sencillo y te lo explico a continuación.

En primer lugar vamos a intentar explicar qué es un ID de un producto en WooCommerce.

WordPress crea y asigna un ID a cada post que se crea independientemente de que se trate de una entrada, una página, un producto, etc… Todo contenido en WordPress tiene un ID que no es más que un número o código que se le asigna para tenerlo identificado y poder acceder a el cuando sea necesario.

Teniendo claro esto, ahora vamos a ver cómo conocer el ID de un producto en concreto en WooCommerce y para ello tenemos que ir al listado de productos que tenemos en el panel de administración de WordPress y echar un vistazo.

A simple vista no vemos el ID del producto:

WooCommerce - Cómo saber el ID de un producto

Pero si nos posicionamos con el ratón encima de uno de los productos podemos ver que si que nos muestra el ID del mismo.

WooCommerce - Cómo saber el ID de un producto

En el caso del ejemplo que se muestra, el ID del producto «Logo Collection» es «33».

Espero que esto os sea de utilidad.

Hay otras formas de saber esto pero esto es otra historia y si os interesa, lo veremos en otro tutorial.

WooCommerce Snippet: Cambiar el orden en la página de producto

WooCommerce Snippet- Cambiar el orden en la página de producto

Me han llegado varios correos pidiéndome más Snippets, sobre todo para WooCommerce. Pues bien, aquí tenéis: WooCommerce Snippet: Cambiar el orden en la página de producto.

¿Qué vamos a hacer?

En primer lugar vamos a ver cómo se ordenan las cosas en WordPress.

Luego vamos a ver cómo están ordenadas en la página de producto de WooCommerce.

También veremos cómo podemos cambiar el orden.

Y por supuesto haremos una prueba de todo esto.

Espero que os guste, vamos allá!

Cómo ordena WordPress las cosas

Supongo que alguno ya sabrá algo acerca de los hooks. De los actions y los filters pero bueno, para no complicarlo ni enrollarme demasiado comentaré que WordPress distribuye hooks (ganchos) y de un modo sencillo lo podemos entender mejor como si fueran lugares o sitios.

Si, ya se que no es lo mismo pero creo que es más fácil de entender para alguien que no ha tomado contacto con esto si lo hacemos así.

Pongamos el ejemplo con el que vamos a probar en este tutorial: «woocommerce_single_product_summary«.

Los nombres de los hooks suelen ser bastante descriptivos por lo que de éste podríamos entender algo como «woocommerce«, «single product» y «summary«. Que si lo intentamos llevar a nuestro terrenos podríamos decir algo como: «woocommerce resumen de producto individual» y si le damos una vuelta si que podríamos saber que se refiere al resumen o sumario de la página de producto de WooCommerce.

Para que nos entendamos:

sumario de la pagina de producto de woocomerce 01

A eso se refiere el hook que acabo de comentar. A este sitio dentro de la página de producto.

El orden de las cosas en la página de producto

Después de comentar sobre qué hook o lugar vamos a enfocar este tutorial, vamos a ver qué orden tienen por defecto estas «cosas» en la página de producto.

Por defecto nos hacemos a la idea de la siguiente lista:

woocommerce_template_single_title - 5
woocommerce_template_single_price - 10
woocommerce_template_single_excerpt - 20
woocommerce_template_single_add_to_cart - 30
woocommerce_template_single_meta - 40
woocommerce_template_single_sharing - 50

En la lista anterior podemos ver los diferentes elementos que componen o podrían componer la región a la que nos referimos. Digo que podrían porque es posible que no aparezcan todos o que incluso añadamos alguno que no está en esta lista.

El número que aparece a la derecha de cada uno indica la prioridad del mismo. Por lo tanto entendemos que los de número menor están más arriba es decir, que tienen más prioridad.

Nos quedamos con esto último porque lo podremos en práctica dentro de un momento.

Cómo cambiar el orden

Como acabamos de ver, la prioridad se gestiona a través de un número entero que, cuanto más pequeño es, más prioridad tendrá sobre los demás en el sitio o hook en cuestión.

Teniendo esto claro, podemos decirle a WordPress que modifique el orden de las cosas indicándole el número de prioridad para poner antes o después de otro elemento que queramos.

Por ejemplo, si nos fijamos en la lista anterior, el precio tiene un número menor que el correspondiente a «Añadir al carrito«.

woocommerce_template_single_price - 10
woocommerce_template_single_add_to_cart - 30

Si queremos que el precio aparezca después del botón de añadir al carrito deberíamos asignarle al primero, un número superior a 30.

Tengo que decir que la lista que he puesto anteriormente es mas bien para hacernos una idea y no tiene por que se exacta. Además, es posible que WooCommerce modifique estos números o prioridades en diferentes versiones.

A continuación vamos a hacer un par de pruebas para cambiar cosas de prioridad y por consiguiente, de ubicación.

Cambiando el orden

Si, vamos a hacer esto rápido. Vamos a cambiar el orden de lo que hemos comentado en el apartado anterior pero antes veamos como están estos elementos sin haber realizado ningún cambio:

woocommerce cambiar sitio precio 01

Vemos que el precio está situado justo después de las estrellitas de opinión de los clientes.

Pues bien, en un sólo paso vamos a quitarlo de ahí y ponerlo después del botón de «Añadir al carrito«:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 35 );

Con este sencillo cambio observamos que:

woocommerce cambiar sitio precio 02

El precio ahora aparece debajo del botón de «Añadir al carrito«.

Si no añadimos la línea que quita o elimina el precio de su sitio, nos sucederá esto:

woocommerce cambiar sitio precio 03

Aparecería en los dos sitios por lo que además de indicarle la nueva ubicación, debemos indicarle que quite la que ya está.

Recapitulando…

Recordamos que hemos visto cómo ordena WordPress los diferentes elemento y cómo podemos modificarlos a través de hooks o ganchos.

Os recuerdo que podéis incluir este y otros snippets de código en vuestro fichero «functions.php» del tema que estáis utilizando o también podéis hacer un plugin específico para ello.

Espero que os haya gustado este tutorial y que si tenéis alguna duda me la hagáis llegar o comentéis aquí mismo.

Saludos y mucho ánimo!

WooCommerce Snippet: Cambiar el título de las pestañas de producto

WooCommerce Snippet- Cambiar el título de las pestañas de producto

En un tutorial anterior vimos cómo ordenar las pestañas de la página de producto.

Continuando con «las pestañas» de la página de producto, en esta ocasión vamos a ver cómo podemos modificar o cambiar el texto del título de estas pestañas.

Como sabemos, WooCommerce establece por defecto «Comentarios» y «Descripción» a las dos pestañas que se activan con la instalación de este plugin.

Pues bien, nosotros/as por lo que sea, queremos modificar este título o texto de las pestañas a nuestro gusto por un título que nos atraiga más o con convenga más dependiendo de nuestras necesidades.

A continuación podemos ver una imagen en la que en la parte izquierda (Antes) los títulos de las pestañas son: «Comentarios» y «Descripción«.

En la parte derecha de la imagen hemos cambiado los títulos de estas pestañas por: «Valoraciones» e «Información«.

wc snippet cambiar titulo pestañas productos

Vamos a ver cómo hacer esto de una manera muy sencilla.

En primer lugar tenemos que utilizar un filter hook que en este caso será  «woocommerce_product_tabs«. Su propio nombre nos dice sobre qué elemento o elementos va actuar este hook, ¿verdad?

Pues bien, como siempre a la hora de trabajar con hooks, especificaremos una función que crearemos expresamente para que realice los cambios que queramos que en este caso es modificar los títulos de las pestañas.

Como digo, en primer lugar indicamos el hook con la función:

add_filter( 'woocommerce_product_tabs', 'oaf_wc_change_product_tabs_titles', 20 );

Muy bien, ahora vamos a crear la función «oaf_wc_change_product_tabs_titltes‘:

function oaf_wc_change_product_tabs_titles($tabs) {
 return $tabs;
}

Por el momento creamos la función e indicamos que recibe «$tabs«, que serán las pestañas con las que vamos a trabajar y que también devuelve el valor de $tabs una vez que hayamos modificado lo que nos interesa.

Ahora bien, como ya comenté en otro tutorial, $tabs es un array donde tenemos a nuestra disposición todas las pestañas con sus propiedades y valores. Lo que tenemos que hacer es identificar y seleccionar cada pestaña que nos interese y establecer la propiedad ‘title’ con el valor que queremos.

$tabs['pestaña']['title'] = 'Nuevo título';

Siguiendo la estructura anterior, para establecer el título «Información» en la pestaña «Descripción» (description), haremos lo siguiente:

$tabs['description']['title'] = 'Información';

Fácil, ¿verdad?

Y ahora para establecer el título «Valoraciones» en la pestaña «Comentarios» (reviews) haremos lo siguiente:

$tabs['reviews']['title'] = 'Valoraciones';

Ahora ya tenemos todo lo necesario.

A continuación tenéis el código completo de este Snippet:

Como siempre, este código lo podéis incluir directamente en el fichero «functions.php» de vuestro theme o crear un plugin.

Espero que os sea de utilidad.

Cualquier duda que tengáis sobre éste o cualquier otra cosa relacionada con los temas que trato en este blog, me la podéis hacer llegar a través del formulario de contacto o a través de las redes sociales.

Saludos y hasta la próxima!!

Ir al contenido