En ocasiones cuando diseñamos nuestra página de producto es frecuente requerir un dato en concreto de dicho producto. Por ejemplo el precio, y como es normal el precio debe estar actualizado, por lo que no tiene sentido hardcodearlo (introducirlo a mano en el texto o código).
Para que puedas solucionar esta situación y otras similares, te dejo los principales shortcodes de WooCommerce.
Los shortcodes son pequeños textos entre corchetes que ejecutan una función en concreto y devuelven un dato o código HTML. Hay diferentes tipos: simples, con apertura y cierre y parametrizados. Por orden:
[shortcode]
[otro-shortcode] [/otro-shortcode]
[parametrizado parametro1="woo" parametro2="boo"]¡Vamos con WooCommerce!
Índice de contenidos
Shortcodes principales de WooCommerce
- [woocommerce_my_account] Muestra la página de configuración de cliente «Mi Cuenta»
- [woocommerce_cart] Muestra la página del «Carrito»
- [woocommerce_checkout] Muestra la página de pago (checkout)
- [woocommerce_order_tracking] Muestra el estado del pedido
Shortcodes de producto en WooCommerce
El shortcode de producto [product] admite diferentes parámetros lo que facilita seleccionar el producto en concreto. Esto generará una vista previa del producto en modo tarjeta (imagen, nombre, precio y botón de compra)
- [product id=»1″] Producto con el «id: 1»
- [product sku=»u458″] Producto con la referencia u458
Si quieres generar la página completa del producto con toda la información debes usar alguno de los siguientes códigos:
- product_page id=»1″] Página completa del producto con el «id: 1»
- [product_page sku=»u458″] Página completa del producto con la referencia u458
Si quieres añadir botones de «Añadir al carrito» un producto en concreto puedes usar los siguientes:
- [add_to_cart id=»1″] Muestra el botón de añadir al carrito para el producto con id: 1
- [add_to_cart_url id=»123″] Muestra la URL para añadir al carrito el producto con id:1, una vez se haga clic sobre ese enlace
Shortcodes de relaciones de producto
También existen otros shortcodes que te permiten mostrar productos relacionados o que nos interesan destacar.
- [related_products] Selección de productos relacionados con el principal de la página
- [top_rated_products] Selección de los productos con mejor valoración
- [best_selling_products] Selección de los productos más vendidos
- [sale_products] Selección de productos con descuento
- [featured_products] Selección de productos destacados
- [recent_products] Selección de los últimos productos añadidos al stock
- [product_categories] Muestra las categorías de la tienda
Shortcodes de selección de productos
Esta clasificación de shortcodes, muestra selecciones de producto basados en parámetros que le introduzcamos.
- [products ids=»1, 2, 1″] Selección de 3 productos con los id 1, 2 y 3
- [product_category category=»guantes»] Selección de los productos que pertenecen a la categoría «guantes»
- [product_attribute attribute=’color’ filter=’blanco’] Selección de productos por un atributo en concreto
Parámetros para shortcodes de listados
Si estás usando un shortcode que realiza una selección de productos puedes añadirle los siguientes atributos que permiten modificar el orden en el que aparecen los productos.
El atributo «orderby» te permite seleccionar el criterio principal por el que se va a realizar la selección. Puedes seleccionar por los siguientes parámetros:
- menu_order: por el número marcado en la ficha de productos
- id: por el identificador del producto en la base de datos
- title: por el nombre del artículo, se ordena alfabéticamente
- date: por la fecha en la que se publicó el producto
- rand: muestra un orden aleatorio
El atributo «order» puede acompañar al anterior, y permite ordenar de manera ascendente o descendente la selección creada. Hay dos opciones:
- asc: orden ascendente (por defecto, si no se indica)
- desc: orden descendente
Ejemplos de shortcodes de listado con parámetros
Te muestro algunos ejemplos que te sirvan de ilustración del apartado, aunque no tengan mucha utilidad realizar esa selección.
- [product_category category=»guantes» orderby=»randon»] Selección aleatoria de los productos que pertenecen a la categoría «guantes»
- [top_rated_products orderby=»id»] Selección de los productos con mejor valoración ordenados por el id de producto
- [product_category category=»guantes» orderby=»date» order=»desc»] Selección aleatoria de los productos que pertenecen a la categoría «guantes» dando relevancia a los primeros que introducimos en la web
- [top_rated_products orderby=»title» order=»asc»] Selección de los productos con mejor valoración ordenados por el título de producto en orden alfabético