Los shortcodes Woocommerce son muy importantes para poder crear páginas estáticas y de esta forma mostrar el contenido a modo de tienda online. Yo lo utilizo mucho a la hora de crear Landing pages de e-commerce muy optimizadas. Son muy recomendables. Consigues darle dinamismo y freshess a tu página web estática.
Un shortcode tiene esta forma: [shortcode]
Puntos importantes:
- hay que tener instalado woocommerce.
- Yo recomiendo insertarlos en la vista HTML para evitar que codigo de formato se te pueda colar si usas la vista visual del editor de WordPress. A veces se te cuelan dentro de un <pre> <span> <div> Y el shortcode no funciona igual.
Shortcodes Woocommerce:
1. Página de Checkout y Página de carrito
[woocommerce_checkout]
[woocommerce_cart]
Muestran el contenido de las páginas checkout y carrito en cualquier página, yo lo he usado a veces para crear una one page checkout combinando ambos shortocodes en la misma página, ojo esto no es tan fácil y requiere de retocar código y css así como de testear ya que puede dar problemas, pero en muchos casos yo lo he implementado con éxito.
2. Mostrar productos individuales y los productos de una categoría concreta.
Para mí esta es la parte más importante de los shortcodes de woocommerce, permite crear landings muy dinámicas y atractivas para la venta en un e-commerce. También se pueden utilizar para los TSA de Romuald Fons.
Hay mucha varedad entre los shortcodes que te ayudan a mostrar los productos como te convenca, vamos a ver las más comunes y usadas:
a. Mostrar un producto.
Para hacer esto necesitamos o bien el id del producto (puedes verlo en el backend de woocommerce) o el SKU que es la referencia que identifica de forma única el producto.
ID ejemplo: [product id=»1234″]
SKU ejemplo: [product sku=»REF001″]
b. Mostrar varios productos eligiendo cuales mostrar.
Este shortcode también funciona con los campos ID y SKU y te permite crear una lista de productos elegida por ti. El aspecto de la lista depende del tema que uses. Has de separar cada producto con comas.
ID ejemplo: [products ids = «1, 2, 3»]
SKU ejemplo: [products skus = «REF001, REF002, REF003»]
c. Mostrar los productos destacados
Como sabrás woocommerce te permite seleccionar una serie de productos destacados, normalmente se utiliza para los productos que están en temporada y es muy común usarlo en la home de tu tienda online. Con este shortcode puedes añadirlo a la página que desees.
Para ello usamos el shortcode [featured_products] además se puede configurar con los argumentos per_page y columns. Para adaptarlo al layout de tu tienda eligiendo así cuantos productos mostrar y en cuantas columnas hacerlo.
Para usarlo
ejemplo: Mostrar 15 productos destacados en 3 columnas
[featured_products per_page=»15″ columns=»3″]
d. Mostrar los productos nuevos
Si lo que quieres es mostrar las novedades de tu tienda puedes hacerlo sencillamente gracias al siguiente shortocde [recent_products] además admite configurarlo con los argumentos: per_page y columns. Para adaptarlo al layout de tu tienda eligiendo así cuantos productos mostrar y en cuantas columnas hacerlo.
ejemplo: Mostrar los últimos 30 productos de tu tienda en 3 columnas
[recent_products per_page=»10″ columns=»3″]
e. Mostrara una página de producto completa
Es como mostrar una pagina de producto completa, puedes mostrar un producto utilizando su ID de wordpress o su SKU.
ID ejemplo: [product_page id=»25″]
SKU ejemplo: [product_page sku=»25″]
f. Mostrar una categoría de productos completa
Puedes mostrar todos los productos de una categoría completa. Usando el shortcode: [product_category] . Puedes configurar el shortcode con los siguientes 5 argumentos:
- per_page – número de productos a mostrar.
- columns – número de columnas en el que mostrar los productos.
- orderby – Ordenar por titulo, fecha, precio…
- order – Orden descendente o ascendente (de mayor a menor o de menor a mayor).
- category – Categoría de producto de la cual que quieres mostrar sus productos. Usar el nombre del Slug de la categoría para que funcione.
ejemplo: Mostrar 16 productos de la categoría portátiles ordenados por fechas, de menor a mayor y mostrado en 4 columnas.
[product_category category=»portatiles» columns=»4″ per_page=»16″ orderby=»date» order=»asc»]
g. Mostrar los productos mejor vendidos
Mostrar los productos más vendidos. Puedes mostrarlos con el shortcode [best_selling_products] Además acepta el argumento per_page para elegir cuantos productos mostrar.
ejemplo: Mostrar los 15 productos mejor vendidos de tu tienda online
[best_selling_products per_page=»15″]
h. Mostrar los productos en oferta
[sale_products] – Mostrará los productos en oferta de tu tienda. Acepta 4 argumentos para personalizarlo.
- per_page
- columns
- orderby
- order
Ejemplo: mostrar 20 productos en oferta ordenados por titulo en orden descendiente y mostrado en 2 columnas
[sale_products per_page=»20″ orderby=»title» order=»desc» columns=»2″]
4. Botón de Añadir al carrito y URL
Éste es un shortcode muy importante, puede ayudarte a personalizar el estilo del botón de añadir al carrito e incluso utilizarlo para hacer test A/B con una landing page y luego aplicarlo al sitio completo…
Puedes colocarlo en Posts o en páginas de tu sitio para optimizar el proceso de venta o generar ventas en los post del blog de tu tienda online.
Utilizaremos el shortcode [add_to_cart] que permite el uso de 3 argumentos: id, style y sku.
Ejemplo: Mostrar el botón de añadir al carrito el producto con ID 25 con los siguientes estilos css {border:2px solid #ccc; background:#999; color:#000; 12px;}
[add_to_cart id=”25″ style=”border:2px solid #ccc; background:#999; color:#000; 12px;” sku=”pro”]
Al hacer click el producto automáticamente será añadido al carrito de la compra.
muy buen blog te felicito queria saber especificamente cual es el shortcode de los ejemplo que colocas en tu articulo el que usa romualdo en su video tsa sobre calaveras
Buenas,
Sería este: [product_category category=»portatiles» columns=»4″ per_page=»16″ orderby=»date» order=»asc»]
Saludos!
Hola,
¿Alguna idea de como añadir paginacion a esos shortcodes?
Saludos y gracias
Buenas, lo siento pero no sabría como.
Lo he intentado alguna vez pero sin éxito.
Saludos!
Hola! muy buenos datos. Hay alguna manera de pedirle menos datos al cliente en woocommerce para que realice la compra?
Gracias!
Tienes que modificar el código (no es del todo sencillo…) yo suelo utilizar algún que otro plugin que hay para ello. Saludos!
genial, algo dificil, hay algun shortcode que muestre el listado de una categoria sin ningun tipo de boton de compra ni añadir al carrito?, que luego salga en el producto vale, pero me gustaria que en el listado no apareciese..
Tendrías que quitarlo con CSS, se me ocurre que el shortcode lo encierres en un div con una clase y todos los botones de ese div los ocultes con css. Es una idea.
Saludos.
Como puedo hacer, para que en la version movil mi pagina de tienda.
Losbprodicto se cizualicen de 2 en 2 y no de 1 en 1 como esta actualmente.
Gracias por su ayuda.
felicitaciones esta my bien explicado, tengo una duda al respecto.
es posible seperar [woocommerce_my_account]
en un login
y un registro.
es decir que queden indiviualmente
Buenas, Tendrías que modificar las plantillas php, es algo más avanzado pero si se podría.
hOLA, hay un sortcode para colocar la cantidad añadir al carrito?
Hola
Buen post al respecto y me gustaría saber si es posible que los títulos de los productos no salieran al usar el shortcode de product por ids. O que en vez del titulo se viera un fragmento de la descripción. Siento que me genera muchos titulos H2 y eso podría confundir al robot del buscador sobre un término a posicionar en un proyecto parecido a TSA.
Gracias