WooCommerce

En WooCommerce nos apoyamos de diferentes pestañas para incluir información sobre los productos que ponemos a la venta en nuestra tienda online. Estas pestañas son la de «Descripción», «Información adicional» y «Valoraciones».

En algunas ocasiones puede que queramos eliminar alguna de estas pestañas, cambiarles el nombre, reordenarlas, personalizarlas o agregar pestañas nuevas. Vamos a ver cómo hacer cada una de estas cosas.

Cómo eliminar pestañas de la página de producto en WooCommerce

Como decíamos anteriormente, puede que por algún motivo queramos eliminar alguna o algunas de las pestañas de WooCommerce. Esto es algo muy sencillo de hacer con el siguiente fragmento de código:

Como podemos observar en las imágenes superiores, en este ejemplo hemos utilizado el snippet para ocultar la pestaña de «Información adicional». Evidentemente, con el snippet podrás ocultar otra pestaña distinta o, incluso, todas.

Cómo cambiar el nombre de las pestañas de la página de producto en WooCommerce

Puede que en realidad, por las características de la tienda online, queramos cambiarle el nombre a una o varias pestañas de la página de producto. Por ejemplo, puede que nos resulte interesante que la pestaña de «Descripción» pase a llamarse «Especificaciones técnicas».

Al igual que siempre hacemos, haremos este cambio con el siguiente snippet:

Como podéis observar, además de cambiar los títulos a las pestañas, también hemos cambiado los encabezados para que haya concordancia entre ambos.

Cómo cambiar el orden de las pestañas de la página de producto en WooCommerce

Entre las posibilidades de personalización de la página de producto de una tienda online con WooCommerce, ya sea nuestra o para un cliente, puede que también necesitemos o queramos cambiar el orden en el que se muestras las pestañas.

A través del siguiente snippet vamos a modificar el orden de las pestañas de «descripción», «información adicional» y «valoraciones». Por ejemplo, vamos a hacer que la pestaña de «valoraciones» se muestre en primera posición, la pestaña de «descripción» en segunda y la pestaña de «información adicional» se muestre en tercer lugar:

Como podéis observar es muy sencillo cambiar el orden en el que se muestran las pestañas.

¡Ojo!: El orden no depende de la posición de las líneas de código, sino de la prioridad que le asignemos a cada una.

Cómo personalizar las pestañas de la página de producto en WooCommerce

Aunque algo no sea lo habitual siempre nos lo podemos encontrar. Como en este caso, en el que vamos a ver cómo personalizar una pestaña de la página de producto en WooCoomerce.

En este caso, vamos a modificar la pestaña de «descripción», aunque en el propio fragmento de código tenéis las indicaciones para modificar otras pestañas diferentes.

En muchos casos (en algunos sí), no tiene mucho sentido que si nuestros clientes cumplen las condiciones para que sus pedidos tengan envío gratuito, se les muestren opciones de envío por los que tengan que pagar. Para evitar esto, vamos a ver cómo hacer desaparecer otras tarifas de envío cuando se hayan cumplido las condiciones del envío gratuito.

A la hora de hacer esto nos podemos encontrar con tres casos, principalmente:

1. El primer caso sería cuando queremos ocultar un método de envío específico al cumplirse las condiciones de envío gratuito. Imaginad que tenemos un envío estándar y uno premium con entrega al día siguiente a las 8:00. En este caso, puede que queramos ofrecer el envío gratuito estándar cuando se cumplan ciertas condiciones (normalmente un pedido mínimo), pero queramos darle la posibilidad al cliente que elija y pague por el envío premium. Para esto, tenemos que utilizar este snippet:

2. Un segundo caso sería cuando queremos ocultar todos los métodos de envío que tenemos disponibles al cumplirse las condiciones de envío gratuito. Para esto, tenemos que utilizar este otro snippet:

3. Y el tercer caso sería cuando queremos ocultar todos los métodos de envío que tenemos disponibles al cumplirse las condiciones de envío gratuito pero, además, queremos dar la opción de recoger el pedido en el local o en la tienda. Para esta tercera posibilidad, tenemos que modificar un poco el snippet anterior, quedando así:

Estos snippets que acabamos de ver están muy relacionados con el que vimos para recordarle a nuestros clientes cuánto les falta para conseguir que su envío sea gratis, el cual te recomiendo que le eches un vistazo.

Ofrecer envío gratuito a partir de cierta cantidad es una estrategia muy buena para aumentar el valor del ticket medio de cualquier tienda online. La mayoría de clientes deciden comprar algo más al saber que de esta forma conseguirán que el envío les salga gratis.

Pero, ¿cómo podemos conseguir que nuestros clientes añadan algo más al carrito? La clave está en informarles en el momento de pagar. Por esta razón, vamos a utilizar el siguiente snippet para generar un aviso en la página del carrito indicando la cantidad que resta para conseguir envío gratuito:

En este, como se indica, debéis indicar vuestro límite para obtener los gastos de envío gratis. También podéis modificar el texto que se muestra a vuestro gusto.

También puede ser que queráis añadirlo en la página de finalizar compra, para ello tenéis que usar este otro fragmento de código:

Y, por último, si queréis mostrar este mensaje en ambas páginas, que es lo que os recomiendo, tenéis que utilizar esta otra pequeña variación del snippet:

En varias tiendas online de clientes he tenido la necesidad de enviar a los clientes al checkout tras pulsar el botón de «Añadir al carrito» de algún producto.

Esta necesidad podéis tenerla, por ejemplo, en una tienda que venda un único producto. Aquí, incluso os recomendaría modificar el texto del botón por «Comprar ahora» o «Realizar pago».

En cuanto a la redirección del cliente tras pulsar el botón «Add to cart», «Añadir al carrito» o el nombre que le hayamos puesto, es tan sencilla como utilizando este snippet:

Lo que si tenéis que tener en cuenta es que para que este snippet funcione correctamente debéis tener activada esta opción:

De esta forma, en cuanto pulsemos el botón «Añadir al carrito», o como lo hayamos nombrado, redigiremos al cliente al checkout.