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.
Deja una respuesta