Shortcodes en WooCommerce

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Ahora que hemos visto los widgets y como pueden añadir más funciones a nuestra tienda con WooCommerce, en este video hablaremos sobre los shortcodes.

Los shortcodes son pequeños códigos que podemos pegar en cualquier lugar de nuestro sitio web WordPress, y mostrarán información o añadirán funciones, en este caso de nuestra tienda online.

Puede que este tema sea un poco avanzado, pero veremos más adelante como podemos añadir shortcodes muy fácilmente.

Pero, ¿Para que necesitarías utilizar un shortcode?

Bien, supongamos que tenemos nuestra tienda online, y como estrategia de marketing tenemos nuestro blog.

Entonces si en algún artículo hablamos sobre un tema relacionado a un producto que vendemos, podríamos añadir el producto y el botón para comprar directamente en nuestro artículo, y eso lo hacemos con un shortcode.

Como hemos mencionado en un video anterior, la mayoría de la información oficial de WooCommerce, por no decir toda, se encuentra en inglés.

Debajo de este video podrás encontrar el link para ver la información oficial sobre los shortcodes desde la documentación en woothemes.

Pero también hemos añadido muchos de ellos abajo del video con la descripción de lo que hacen.

Para entender mejor este tema vamos a crear una nueva página en nuestro sitio web, y vamos a suponer que en este página deseamos mostrar los productos más recientes que hemos añadido.

Si vamos a la documentación de woothemes, podremos ver que tenemos varios shortcodes, los principales que nos permiten mostrar el carrito de compra, la página de pago.

Algunos otros que nos permiten editar nuestra cuenta de cliente, cambiar la contraseña, mostrar la página de agradecimiento y entre muchos otros.

Y si bajamos un poco más encontraremos este que como su nombre lo indica, mostrará los productos más recientes.

En esta parte nos indica cómo es que este shortocode funciona a nivel de código, y es este código el que necesitamos copiar.

Así que vamos a copiarlo y lo pegamos en nuestra página.

Como puedes ver este código tiene algunos valores adicionales que podemos configurar, por ejemplo, per page define cuántos productos deseamos mostrar, en este caso le dire que únicamente deseo ver 3 productos y en columns podemos definir la cantidad de columnas en las que se organizarán los productos.

Vamos a dejarlo en 3 igualmente.

Le daré un título a esta página, y la publicamos.

Ahora veamos la página.

Como puedes ver tenemos una lista de los 3 últimos productos añadidos organizados en 3 columnas.

Lo importante de los shortcodes es que como decíamos antes, podemos añadirlos en prácticamente cualquier lugar.

Entonces esta página podría fácilmente tener texto, ser una página de información o una entrada de nuestro blog.

Añadiremos un poco de texto desde lorem ipsum para demostrarlo.

Ahora guardamos los cambios, y visualizamos la página.

Como puedes ver no hay inconvenientes en mostrar esta información de nuestra tienda en cualquier lugar.

Si regresamos a la documentación de woothemes, podremos ver que existen muchos shortcodes que podemos utilizar, para mostrar los productos destacados, mostrar un producto específico y muchos más.

Pero aprendernos todos estos shorcodes o tener que estar visitando la documentación cada vez que deseas añadir un shortcode en una página o una entrada de tu blog puede ser algo molesto.

Es por eso que te mostraré como puedes añadir shortcodes visual y fácilmente.

Para lograrlo añadiremos un nuevo plugin llamado WooCommerce Shortcodes, lo buscamos y lo tenemos aquí.

Este plugin ha sido desarrollado por woothemes y es completamente gratis, así que vamos a instalarlo y recuerda activar el plugin.

Muy bien, una vez lo instalamos y activamos, vamos a regresar a la edición de la página que hemos creado.

Y como puedes ver ahora tenemos este nuevo elemento dentro del editor visual.

Para demostrar como podemos añadir este mismo shortcode pero con esta nueva herramienta, borraremos primero el shortcode que ya tenemos.

Ahora debemos colocar el puntero donde deseamos añadir el nuevo shortcode.

Demos clic en el editor de shortcodes de WooCommerce y podremos ver un gran listado de opciones.

Podemos añadir shortcodes que muestren productos directamente, listados de productos,  mostrar el mensaje para la tienda que configuramos en los ajustes de WooCommerce y la página de seguimiento del pedido.

En este caso deseamos añadir un listado de los productos recientes, así que entramos en list y luego en recent products.

Desde aquí debemos configurar el shortcode, tenemos las mismas opciones y aún más de las que habíamos configurado en el shortcode de forma manual.

Primero indicamos la cantidad de productos que deseamos mostrar, luego la cantidad de columnas.

Y aunque este shortcode dice que debe mostrar los productos recientes, podemos cambiar eso desde aquí.

Por defecto ordenará los productos por fecha, pero podemos cambiarlo hacia ordenar por título o incluso de forma aleatoria, esto sería muy bueno para que los clientes puedan descubrir nuevos productos.

Pero en este caso lo dejaremos en fecha, en la siguiente opción podemos definir si deseamos ordenarlo de forma ascendente o descendente.

Y una vez terminamos de configurar nuestro nuevo shortcode damos clic en aceptar, pero creo que cambiaremos las columnas y los productos hacia 4 para poder notar la diferencia con nuestro shortcode anterior.

Y tendremos aquí nuestro nuevo shortcode, gracias a que conocemos la forma en la que podemos crear los shortcodes de forma manual, tenemos la capacidad de leer lo que este código hará.

Vemos que mostrará un listado de los productos recientes, mostrará cuatro productos, en cuatro columnas, ordenados por fecha de forma descendente.

Ahora actualizaremos la página y daremos clic para ver esta página.

Y tenemos aquí el resultado de nuestro nuevo shortcode, contamos con 4 productos en 4 columnas.

Añadiremos otro debajo de esta lista, así que regremos a la edición de nuestra página.

Vamos a colocarle aquí en un título 3 productos recientes.

Dejaremos un poco de espacio y aquí colocaremos productos aleatorios en un título 3 también.

Ahora utilizaremos la herramienta para shortcodes, vamos a listas, seleccionaremos igualmente 4 productos en 4 columnas, pero en orden, seleccionaremos random y añadiremos el shortcode.

Actualizamos la página, y luego vamos a visualizarla.

Muy bien, ahora contamos con dos listados, nuestros productos recientes y productos aleatorios, el shortcode productos aleatorios puede parecer poco útil en nuestra tienda, ya que tenemos muy pocos productos.

Pero en una tienda con muchos productos, es una buena forma para que nuestros clientes descubran nuevos productos.

Como observamos en este video, los shorcodes son una gran forma de añadir contenido de nuestra tienda en cualquier lugar, puede ser en una página como en este caso, en una entrada de nuestro blog he incluso dentro de un widget.

Te invito a jugar un poco con el creador de shortcodes para descubrir los shortcodes que más le funcionarán a tu tienda online con WooCommerce.

2 Comments on “Shortcodes en WooCommerce”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image