Etiqueta: Shortcodes

About Shortcodes

Subscribe Feeds

WooCommerce Shortcode: Atributos de producto [product_atttibute]

Posted on by Óscar Abad Folgueira

[product_attribute]

El shortcode [products] nos permite mostrar products por ID, SKY, categorías, atributos, con soporte de paginación, orden aleatorio y etiquetas de productos.

Este shortcode puede reemplazar el uso de otros shortcodes como:

  • [featured_products]
  • [sale_products]
  • [best_selling_products]
  • [recent_products]
  • [product_attibute]
  • [top_rated_products]

Ejemplo de uso de [products]

Antes de ahondar en las posibilidades que nos ofrecen los atributos que podemos usar con este shorcode no está de más que veamos que efectivamente, el shortcode [products] muestra la lista de productos de nuestro WooCommerce.

WooCommerce Shortcode - Productos [products]

Y este será el resultado:

WooCommerce Shortcode - Productos [products]

Atributos de producto

A continuación se indican de manera resumida los atributos que se pueden usar con el shortcode [products].

Atributos de productos

limit

Establece el número de productos que se mostrarán.

Por defecto se establece «-1» que mostrará todos los productos en el caso de productos o categorías en su caso.

Ejemplo:

Limitar el número de productos que se muestran a 7 [products limit=»7″]

columns

Establece el número de columnas que se mostrarán.

Por defecto será 4.

Ejemplo:

Establecer el número de columnas a 3 [products columns=»3″]

paginate

Habilita la paginación.

Se usa junto con el atributo limit.

Por defecto está establecido a false (desactivado). Para activar establecer a true.

Ejemplo:

Habilitamos la paginación y establecemos el número de productos a 7 por cada página que se muestre. [products limit=»7″ paginate=»true»]

orderby

Ordena los productos que se muestran en el listado.

Podemos pasarle una o varias opciones a este atributo añadiendo. Si le indicamos varias opciones, éstas debes estar separadas por espacios.

Las opciones disponibles son:

  • date – La fecha en la que fué publicado el producto.
  • id – El ID del post del producto.
  • menu_order – El orden del menú (primero se mostrarán los números más bajos).
  • popularity – El número de compras.
  • rand – Se ordenan los productos de forma aleatoria (no funciona en sitios que utilizan caché).
  • rating – El promedio de valoración del producto.
  • title – El título del producto. Esta es la opción establecida por defecto.

Ejemplos:

Orden del listado de productos por el número de compras [products orderyby=»popularity»]

Mostrar el listado por orden de lista (título) [products orderby=»title»]

skus

Muestra un listado de prodctos gracias a los SKU que le indicamos al atributo.

Este atributo se ulizará en casos muy concretos en los que tengamos que mostrar un listado con una serie de productos específicos y en lugar de usar el ID de cada producto, usaremos sus SKUS.

Ejemplo:

Mostrar tres productos cuyos SKUs son : «logo-collection», «woo-single» y «woo-polo». [products skus=»logo-collection, woo-single, woo-polo»]

WooCommerce - Shortcode "Products" atributo SKUs

category

Muestra el listado de productos de una o varias categorías especificadas por su slug.

Si indicamos varios slugs, lo haremos separados por comas.

Ejemplo:

Mostrar el listado de productos de las categorías cuyos slugs son: «music» y «hoodies». [products category=»music, hoodies»]

tag

Muestra el listado de productos de una o varias etiquetas especificadas por su slug.

Si indicamos varios slugs, lo haremos separados por comas.

Ejemplo:

Mostrar el listado de productos de las categorías cuyos slugs son: «tag1» y «tag2». [products tag=»tag1, tag2″]

order

Establece si el orden del listado de productos es ascentente (ASC) o descendente (DESC).

Por defecto está establecido como ascendente (ASC).

Se usa junto con el atributo orderby.

Ejemplo:

Mostrar el listado por orden de lista (título) en orden descdendente [products orderby=»title» order=»DESC»]

WooCommerce Shortcode - Productos [products]

class

Añade una clase CSS especificada por nosotros al contenedor del listado de productos. De esta manera podremos modificar el aspecto mediante código CSS.

Ejemplo:

Añadimos la clase «miclase» [products class=»miclase»]

WooCommerce Shortcode - Productos [products]

on_sale

Muesta un listado con productos en oferta es decir, con decuento.

Esta opción no se puede usar en junto con «best_selling» o «top_rated«.

Opciones:

  • true – Se mostrarán solo los productos en oferta.
  • false – Se mostrarán todos los productos.

Ejemplo:

Mostrar el listado de los productos en oferta [products on_sale=»true»]

best_selling

Muesta un listado con productos más vendidos.

Esta opción no se puede usar en junto con «on_sale» o «top_rated«.

Opciones:

  • true – Se mostrarán los productos más vendidos.
  • false – Se mostrarán todos los productos.

Ejemplo:

Mostrar el listado de los productos más valorados [products best_selling=»true»]

top_rated

Muesta un listado con productos mejor valorados.

Esta opción no se puede usar en junto con «on_sale» o «best_selling.

Opciones:

  • true – Se mostrarán los prodcutos mejor valorados.
  • false – Se mostrarán todos los productos.

Ejemplo:

Mostrar el listado de los productos mejor valorados [products top_rated=»true»]

Atributos de contenido de producto

attribute

Muestra los productos en base al slug del atributo especificado.

Ejemplo:

Mostrar el listado de los productos que tengan el atributo color [products attribute=»color»]

terms

Lista de términos de atributos separados por comas para usar junto con «attribute«.

En este caso podemos establecer los valores de los atributos que queremos que se muestren. En el caso del atributo color, podemos especificar que se muestren sólo los productos que tengan el color «gray»

Ejemplos:

Mostrar el listado de los productos que tengan el atributo color y su valor sea «gray» [products attribute=»color» terms=»gray»]

Mostrar el listado de los productos que tengan el atributo color y su valor sea «gray» o «blue» [products attribute=»color» terms=»gray, blue»]

terms_operator

Permite utilizar un operador para comparar los términos de atributo.

Los operadores disponibles son:

  • AND – Mostrará los productos que tengan todos los términos de atributo.
  • IN – Muestra los productos que tengan el atributo especificado. Esta es la opción establecida por defecto.
  • NOT IN – Mostrará los productos que no tengan los atributos especificados.

Ejemplos:

Mostrar el listado de los productos que no sean de color «blue» ni «gray» [products limit=»-1″ attribute=»color» terms=»blue, gray» terms_operator=»NOT IN»]

Mostrar el listado de los productos que tengan establecido como color los términos «blue» y «gray». [products attribute=»color» terms=»blue, gray» terms_operator=»AND»]

tag

Muestra un listado de productos usando el slug de las etiquetas (slug).

Ejemplo:

Mostrar el listado de los productos que que tengan la etiqueta «tag1» y los que tengan la etiqueta «tag2» [products tag=»tag1, tag2″]

tag_operator

Permite utilizar un operador para comparar las etiquetas (tags).

Es similar al atributo «terms_operantor» pero en este caso con etiquetas.

Los operadores disponibles son:

  • AND – Mostrará los productos que tengan todas las etiquetas.
  • IN – Muestra los productos que tengan la etiqueta especificada. Esta es la opción establecida por defecto.
  • NOT IN – Mostrará los productos que no tengan las etiquetas especificadas.

Ejemplo:

Mostrar el listado de los productos que tengan establecidas las etiquetas «tag1» y «tag2». [products tag=»tag1, tag2″ tag_operator=»AND»]

visibility

Muestra los productos en base a la visibilidad especificada.

Los operadores disponibles son:

  • visible – Productos visibles en la tienda y en los resultados de búsqueda. Esta es la opción establecida por defecto.
  • catalog – Productos visibles sólo en la tienda.
  • search – Productos visibles sólo en los resultados de búsqueda.
  • hidden – Productos establecidos como ocultos, solo accesibles por la URL directamente.
  • featured – Productos que se han establecido como destacados.

Ejemplos:

Mostrar el listado de los productos en lo que se ha establecido la visibilidad como «Oculto». [products visibility=»hidden»]

Mostrar el listado de productos destacados. [products visibility=»featured»]

category

Muestra los productos de la categoría indicada por slug.

Ejemplo:

Mostrar el listado de los productos de la cateogía «Music» cuyo slug es «music»: [products category=»music»]

cat_operator

Operador para comparar términos de categoría.

Las opciones disponibles son:

  • AND – Muestra los productos que tengan todas las cateogrías indicadas.
  • IN – Muestra los productos de esa categoría. Esta es la opción establecida por defecto.
  • NOT IN – Mostrará los productos que no tengan establecida la categoría indicada.

Ejemplo:

Mostrar el listado de los productos de todas las categorías excepto de las categorías «Music», «Accesories» y «Tshirts»: [products category=»music, accessories, tshirts» cat_operator=»NOT IN»]

ids

Muestra los productos basándose en los IDs de los productos indicados.

Si introducimos varios IDs, tienen que ir separados por comas.

Ejemplo:

Mostrar el listado de los productos con los IDs «24», «32» y «34»: [products ids=»24, 32, 34″]

skus

Muestra los productos basándose en los SKUs de los productos indicados.

Si introducimos varios SKUs, tienen que ir separados por comas.

Ejemplo:

Mostrar el listado de los productos con los SKUs «woo-single», «woo-polo» y «woo-cap»: [products skus=»woo-single, woo-polo, woo-cap»]

Atributos de producto especiales

Estos atributos no se pueden utilizar junto con los atributos de contenido porque pueden causar un conflicto y no mostrarse.

best_selling

Muetra los productos más vendidos.

Debemos establecer este atributo a «true»

Ejemplo:

Mostrar el listado de los productos más vendidos: [products best_selling=»true»]

on_sale

Muetra los productos más en oferta o con decuento.

Debemos establecer este atributo a «true»

Ejemplo:

Mostrar el listado de los productos más vendidos: [products on_sale=»true»]

Ejemplos variados del shortcode [products]

Ejemplo 1

Queremos mostrar los productos en oferta en 3 columnas en orden de popularidad y un máximo de 6 productos.

[products limit=»6″ columns=»3″ orderby=»popularity» on_sale=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 2

En este segundo ejemplo queremos mostrar los productos en 6 columnas y con la paginación de tal forma que en cada página se muestren 12 productos.

[products limit=»12″ columns=»6″ paginate=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 3

Queremos que se muestren los productos en una sola fila, 2 productos por fila y por página unicamente y que también se muestre la paginación para que los visitantes puedan navegar entre ellos.

Además, también queremos que sólo se muestren los prodcuctos que tenemos en oferta con descuento.

[products limit=»2″ columns=»2″ paginate=»true» on_sale=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 4

Queremos mostrar los productos más vendidos en la tienda en 5 columnas y sin límite de productos para que se muestren todos.

[products limit=»-1″ columns=»5″ best_selling=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 5

Dándole una vuelta al ejemplo anterior, queremos que además se muestren los productos que tenemos en oferta por lo que añadiremos on_sale=»true» al shortcode del ejemplo anterior y ya puestos, como son menos, los mostraremos en 3 columnas.

[products limit=»-1″ columns=»3″ best_selling=»true» on_sale=»true»]

WooCommerce Shortcode - Productos [products]

WooCommerce Shortcodes: Mensajes de la tienda [shop_messages]

Posted on by Óscar Abad Folgueira

[shop_messages]

Este shortcode nos permite mostrar los mensaje o notificaciones de la tienda en cualquier página o post que no sea de WooCommerce.

Cuando hablamos de notificaciones de la tienda nos referimos a mensajes del tipo «El producto se ha añadido al carrito» y mensajes por el estilo.

Este shortcode puede ser interesante cuando estamos usando otros shorcodes para mostrar la tienda o alguna funcionalidad de la misma fuera de las páginas habituales de WooCommerce.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [shop_messages].

WooCommerce Shortcode: Página de producto [product_page]

Posted on by Óscar Abad Folgueira

[product_page]

Éste shortcode muestra la página de un producto simple por ID o for SKU.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [woocommerce_cart id=»53″].

En el ejemplo anterior, mostraríamos la página del producto cuya id es 53.

De la misma manera también prodíamos utilizar el atributo «sku» para mostra un producto con un sku específico.

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

WooCommerce Shortcode - Página de producto [product_page]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Página de producto [product_page]

WooCommerce Shortcode: Seguimiento de pedidos [woocommerce_order_tracking]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: Seguimiento de pedidos [woocommerce_order_tracking]

[woocommerce_order_tracking]

Este shortcode muestra el formulario de seguimiento de pedidos de WooCommerce.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [woocommerce_order_tracking].

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

WooCommerce Shortcode - Seguimiento de pedidos [woocommerce_order_tracking]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Seguimiento de pedidos [woocommerce_order_tracking]

WooCommerce Shortcode: URL de añadir al carrito [add_to_cart_url]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: URL de añadir al carrito [add_to_cart_url]

[add_to_cart_url]

Éste shortcode muestra la URL en el botón de «Añadir al carrito» de un producto simple por ID .

Personalmente no le veo mucho uso pero está bien saber que existe por si en un momento dado nos surge alguna situación en la que podamos usarlo.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en el editor de bloques de WordPress y añadir el shortcode: [woocommerce_cart id=»53″].

En el ejemplo anterior, «53» se refiere al id del producto que podemos obtener desde el mismo producto en la administración de WordPress.

WooCommerce Shortcode: Productos [products]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: Productos [products]

[products]

El shortcode [products] nos permite mostrar products por ID, SKY, categorías, atributos, con soporte de paginación, orden aleatorio y etiquetas de productos.

Este shortcode puede reemplazar el uso de otros shortcodes como:

  • [featured_products]
  • [sale_products]
  • [best_selling_products]
  • [recent_products]
  • [product_attibute]
  • [top_rated_products]

Ejemplo de uso de [products]

Antes de ahondar en las posibilidades que nos ofrecen los atributos que podemos usar con este shorcode no está de más que veamos que efectivamente, el shortcode [products] muestra la lista de productos de nuestro WooCommerce.

WooCommerce Shortcode - Productos [products]

Y este será el resultado:

WooCommerce Shortcode - Productos [products]

Atributos de producto

A continuación se indican de manera resumida los atributos que se pueden usar con el shortcode [products].

Atributos de productos

limit

Establece el número de productos que se mostrarán.

Por defecto se establece «-1» que mostrará todos los productos en el caso de productos o categorías en su caso.

Ejemplo:

Limitar el número de productos que se muestran a 7 [products limit=»7″]

columns

Establece el número de columnas que se mostrarán.

Por defecto será 4.

Ejemplo:

Establecer el número de columnas a 3 [products columns=»3″]

paginate

Habilita la paginación.

Se usa junto con el atributo limit.

Por defecto está establecido a false (desactivado). Para activar establecer a true.

Ejemplo:

Habilitamos la paginación y establecemos el número de productos a 7 por cada página que se muestre. [products limit=»7″ paginate=»true»]

orderby

Ordena los productos que se muestran en el listado.

Podemos pasarle una o varias opciones a este atributo añadiendo. Si le indicamos varias opciones, éstas debes estar separadas por espacios.

Las opciones disponibles son:

  • date – La fecha en la que fué publicado el producto.
  • id – El ID del post del producto.
  • menu_order – El orden del menú (primero se mostrarán los números más bajos).
  • popularity – El número de compras.
  • rand – Se ordenan los productos de forma aleatoria (no funciona en sitios que utilizan caché).
  • rating – El promedio de valoración del producto.
  • title – El título del producto. Esta es la opción establecida por defecto.

Ejemplos:

Orden del listado de productos por el número de compras [products orderyby=»popularity»]

Mostrar el listado por orden de lista (título) [products orderby=»title»]

skus

Muestra un listado de prodctos gracias a los SKU que le indicamos al atributo.

Este atributo se ulizará en casos muy concretos en los que tengamos que mostrar un listado con una serie de productos específicos y en lugar de usar el ID de cada producto, usaremos sus SKUS.

Ejemplo:

Mostrar tres productos cuyos SKUs son : «logo-collection», «woo-single» y «woo-polo». [products skus=»logo-collection, woo-single, woo-polo»]

WooCommerce - Shortcode "Products" atributo SKUs

category

Muestra el listado de productos de una o varias categorías especificadas por su slug.

Si indicamos varios slugs, lo haremos separados por comas.

Ejemplo:

Mostrar el listado de productos de las categorías cuyos slugs son: «music» y «hoodies». [products category=»music, hoodies»]

tag

Muestra el listado de productos de una o varias etiquetas especificadas por su slug.

Si indicamos varios slugs, lo haremos separados por comas.

Ejemplo:

Mostrar el listado de productos de las categorías cuyos slugs son: «tag1» y «tag2». [products tag=»tag1, tag2″]

order

Establece si el orden del listado de productos es ascentente (ASC) o descendente (DESC).

Por defecto está establecido como ascendente (ASC).

Se usa junto con el atributo orderby.

Ejemplo:

Mostrar el listado por orden de lista (título) en orden descdendente [products orderby=»title» order=»DESC»]

WooCommerce Shortcode - Productos [products]

class

Añade una clase CSS especificada por nosotros al contenedor del listado de productos. De esta manera podremos modificar el aspecto mediante código CSS.

Ejemplo:

Añadimos la clase «miclase» [products class=»miclase»]

WooCommerce Shortcode - Productos [products]

on_sale

Muesta un listado con productos en oferta es decir, con decuento.

Esta opción no se puede usar en junto con «best_selling» o «top_rated«.

Opciones:

  • true – Se mostrarán solo los productos en oferta.
  • false – Se mostrarán todos los productos.

Ejemplo:

Mostrar el listado de los productos en oferta [products on_sale=»true»]

best_selling

Muesta un listado con productos más vendidos.

Esta opción no se puede usar en junto con «on_sale» o «top_rated«.

Opciones:

  • true – Se mostrarán los productos más vendidos.
  • false – Se mostrarán todos los productos.

Ejemplo:

Mostrar el listado de los productos más valorados [products best_selling=»true»]

top_rated

Muesta un listado con productos mejor valorados.

Esta opción no se puede usar en junto con «on_sale» o «best_selling.

Opciones:

  • true – Se mostrarán los prodcutos mejor valorados.
  • false – Se mostrarán todos los productos.

Ejemplo:

Mostrar el listado de los productos mejor valorados [products top_rated=»true»]

Atributos de contenido de producto

attribute

Muestra los productos en base al slug del atributo especificado.

Ejemplo:

Mostrar el listado de los productos que tengan el atributo color [products attribute=»color»]

terms

Lista de términos de atributos separados por comas para usar junto con «attribute«.

En este caso podemos establecer los valores de los atributos que queremos que se muestren. En el caso del atributo color, podemos especificar que se muestren sólo los productos que tengan el color «gray»

Ejemplos:

Mostrar el listado de los productos que tengan el atributo color y su valor sea «gray» [products attribute=»color» terms=»gray»]

Mostrar el listado de los productos que tengan el atributo color y su valor sea «gray» o «blue» [products attribute=»color» terms=»gray, blue»]

terms_operator

Permite utilizar un operador para comparar los términos de atributo.

Los operadores disponibles son:

  • AND – Mostrará los productos que tengan todos los términos de atributo.
  • IN – Muestra los productos que tengan el atributo especificado. Esta es la opción establecida por defecto.
  • NOT IN – Mostrará los productos que no tengan los atributos especificados.

Ejemplos:

Mostrar el listado de los productos que no sean de color «blue» ni «gray» [products limit=»-1″ attribute=»color» terms=»blue, gray» terms_operator=»NOT IN»]

Mostrar el listado de los productos que tengan establecido como color los términos «blue» y «gray». [products attribute=»color» terms=»blue, gray» terms_operator=»AND»]

tag

Muestra un listado de productos usando el slug de las etiquetas (slug).

Ejemplo:

Mostrar el listado de los productos que que tengan la etiqueta «tag1» y los que tengan la etiqueta «tag2» [products tag=»tag1, tag2″]

tag_operator

Permite utilizar un operador para comparar las etiquetas (tags).

Es similar al atributo «terms_operantor» pero en este caso con etiquetas.

Los operadores disponibles son:

  • AND – Mostrará los productos que tengan todas las etiquetas.
  • IN – Muestra los productos que tengan la etiqueta especificada. Esta es la opción establecida por defecto.
  • NOT IN – Mostrará los productos que no tengan las etiquetas especificadas.

Ejemplo:

Mostrar el listado de los productos que tengan establecidas las etiquetas «tag1» y «tag2». [products tag=»tag1, tag2″ tag_operator=»AND»]

visibility

Muestra los productos en base a la visibilidad especificada.

Los operadores disponibles son:

  • visible – Productos visibles en la tienda y en los resultados de búsqueda. Esta es la opción establecida por defecto.
  • catalog – Productos visibles sólo en la tienda.
  • search – Productos visibles sólo en los resultados de búsqueda.
  • hidden – Productos establecidos como ocultos, solo accesibles por la URL directamente.
  • featured – Productos que se han establecido como destacados.

Ejemplos:

Mostrar el listado de los productos en lo que se ha establecido la visibilidad como «Oculto». [products visibility=»hidden»]

Mostrar el listado de productos destacados. [products visibility=»featured»]

category

Muestra los productos de la categoría indicada por slug.

Ejemplo:

Mostrar el listado de los productos de la cateogía «Music» cuyo slug es «music»: [products category=»music»]

cat_operator

Operador para comparar términos de categoría.

Las opciones disponibles son:

  • AND – Muestra los productos que tengan todas las cateogrías indicadas.
  • IN – Muestra los productos de esa categoría. Esta es la opción establecida por defecto.
  • NOT IN – Mostrará los productos que no tengan establecida la categoría indicada.

Ejemplo:

Mostrar el listado de los productos de todas las categorías excepto de las categorías «Music», «Accesories» y «Tshirts»: [products category=»music, accessories, tshirts» cat_operator=»NOT IN»]

ids

Muestra los productos basándose en los IDs de los productos indicados.

Si introducimos varios IDs, tienen que ir separados por comas.

Ejemplo:

Mostrar el listado de los productos con los IDs «24», «32» y «34»: [products ids=»24, 32, 34″]

skus

Muestra los productos basándose en los SKUs de los productos indicados.

Si introducimos varios SKUs, tienen que ir separados por comas.

Ejemplo:

Mostrar el listado de los productos con los SKUs «woo-single», «woo-polo» y «woo-cap»: [products skus=»woo-single, woo-polo, woo-cap»]

Atributos de producto especiales

Estos atributos no se pueden utilizar junto con los atributos de contenido porque pueden causar un conflicto y no mostrarse.

best_selling

Muetra los productos más vendidos.

Debemos establecer este atributo a «true»

Ejemplo:

Mostrar el listado de los productos más vendidos: [products best_selling=»true»]

on_sale

Muetra los productos más en oferta o con decuento.

Debemos establecer este atributo a «true»

Ejemplo:

Mostrar el listado de los productos más vendidos: [products on_sale=»true»]

Ejemplos variados del shortcode [products]

Ejemplo 1

Queremos mostrar los productos en oferta en 3 columnas en orden de popularidad y un máximo de 6 productos.

[products limit=»6″ columns=»3″ orderby=»popularity» on_sale=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 2

En este segundo ejemplo queremos mostrar los productos en 6 columnas y con la paginación de tal forma que en cada página se muestren 12 productos.

[products limit=»12″ columns=»6″ paginate=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 3

Queremos que se muestren los productos en una sola fila, 2 productos por fila y por página unicamente y que también se muestre la paginación para que los visitantes puedan navegar entre ellos.

Además, también queremos que sólo se muestren los prodcuctos que tenemos en oferta con descuento.

[products limit=»2″ columns=»2″ paginate=»true» on_sale=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 4

Queremos mostrar los productos más vendidos en la tienda en 5 columnas y sin límite de productos para que se muestren todos.

[products limit=»-1″ columns=»5″ best_selling=»true»]

WooCommerce Shortcode - Productos [products]

Ejemplo 5

Dándole una vuelta al ejemplo anterior, queremos que además se muestren los productos que tenemos en oferta por lo que añadiremos on_sale=»true» al shortcode del ejemplo anterior y ya puestos, como son menos, los mostraremos en 3 columnas.

[products limit=»-1″ columns=»3″ best_selling=»true» on_sale=»true»]

WooCommerce Shortcode - Productos [products]

WooCommerce Shortcode: Añadir al carrito [add_to_cart]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: Añadir al carrito [add_to_cart]

[add_to_cart]

Este shortcode muestra el precio y el botón de añadir al carrito de un producto indivicual por ID.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [add_to_cart id=»53″].

Es cierto que este shortcode, al igual que otros, no está orientado tanto para usarlo en el editor de WordPress sino el código pero no está de más conocerlo.

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

WooCommerce Shortcode - Añadir al carrito [add_to_cart]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Añadir al carrito [add_to_cart]

Seguro que viendo el resultado ya estáis pensando que os puede ser de gran utilidad en ciertas ocaciones, ¿verdad?

WooCommerce Shortcode: Carrito [woocommerce_cart]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: Carrito [woocommerce_cart]

[woocommerce_cart]

Éste shortcode muestra la página del carrito de WooCommerce.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [woocommerce_cart].

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

WooCommerce Shortcode - Carrito [woocommerce_cart]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Carrito [woocommerce_cart]
WooCommerce Shortcode - Carrito [woocommerce_cart]

WooCommerce Shortcode: Finalizar compra (Checkout) [woocommerce_checkout]

Posted on by Óscar Abad Folgueira
WooCommerce Shortcode: Finalizar compra (Checkout) [woocommerce_checkout]

[woocommerce_checkout]

Este shortcode muestra el checkout o «finalizar compra» de WooCommerce.

Como todos los shortcodes, los podemos poner en cuanquier página o post de nuestra web para mostrar el carrito donde queramos.

Para usarlo, como todos los shortcodes, debemos añadir un bloque de «shortcode» en en editor de bloques de wordpress y añadir el shortcode: [woocommerce_checkout].

En el siguiente ejemplo podemos ver cómo lo hemos añadido en una página entre dos encabezados:

WooCommerce Shortcode - Finalizar compra (checkout) [woocommerce_checkout]

Y a continuación vemos el resultado:

WooCommerce Shortcode - Finalizar compra (checkout) [woocommerce_checkout]

Crear Shortcode para restringir partes del contenido – Parte 2

Posted on by Óscar Abad Folgueira
Crear Shortcode para restingir el acceso a partes del contenido - Parte 2

Continuamos con el tutorial o guía sobre cómo crear un shortcode para restringir partes del contenido – Parte 2.

Recordemos…

Recordamos dónde lo dejamos antes de nada, ok?

¿Qué vamos a hacer ahora?

En esta segunda parte de esta guía vamos a darle un poco de estilo al mensaje.

Si os fijáis, no le hemos dado ningún estilo por lo que queda un poco «soso», ¿Verdad?

mensaje de aviso - contenido restringido

En la image anterior se ve claramente que es muy posible que el usuario ni se de cuenta del mensaje.

Es por eso que vamos a darle un poco de estilo para que se vea mejor. Vamos allá!

Añadir estilo forma 1

La forma más sencilla aunque menos aconsejable sigue siendo añadir los estilos css en el mismo código html.

Como digo no es la forma más aconsejable de hacerlo ni la más limpia pero ahora vamos a hacerlo así y después lo haremos en un fichero «.CSS» a parte para que esté todo más limpio y se entienda mejor.

Tampoco vamos a complicarnos mucho la vida con esto por lo que lo que vamos a hacer es darle un tamaño más grande al texto del aviso y un color algo más visible.

Creo que para empezar nos sirve con el siguiente estilo:

<h4 style="color: red;">

No es mucho de momento pero nos va sirviendo para ir comprendiendo el funcionamiento.

Entonces, lo que hacemos es modificar lo siguiente:

return ( 'Upps, Este contenido sólo está disponible para usuarios registrados. Regístrate!');

Por esto otro:

return '<h4 style="color: red;">Upps, Este contenido sólo está disponible para usuarios registrados</h4>';

Como digo, esto es sólo un ejemplo y podemos adaptarlo a nuestras propias necesidades.

Total, que con el cambio que acabamos de realizar deberíamos tener algo así:

mensaje contenido restringido rojo y grande

Bueno, algo mejor está, ¿Verdad?

Ahora yo creo que el usuario se dará cuenta del aviso y lo leerá porque está bien grande y bien rojo.

Para que quede un poco mejor, le voy a añadir un salto de linea. Para que no quede tan justo de espacio con la siguiente línea de texto.

Sin más, añado un <br /> y listo:

Ah, bueno, ya que estamos, lo centramos…

return '<div><h4 style="color: red; text-align: center;">Upps, Este contenido sólo está disponible para usuarios registrados</h4><br /></div>';

Habréis notado que lo he metido en un <div>. Ya veremos porqué en un momentito…

Y va quedando así:

mensaje contenido restringido rojo y grande 3

Yo creo que queda un poco mejor que antes.

Pero no lo dejamos así, vamos a darle otra vuelta más.

Añadir un color de fondo

Eso es. Porque sigue quedando un pelín sosillo, vamos a darle un color de fondo clarito para que se note más el aviso.

Pues eso, toca añadir un «background-color» al estilo del <div>.

Tened en cuenta que yo no soy muy bueno para esto de los colores osea que no me lo tengáis en cuenta, ok?

Ya he elegido este color:

Y con el cambio, la linea quedaría así:

return '<div style="background-color: #F5F2F2;"><h4 style="color: red; text-align: center;">Upps, Este contenido sólo está disponible para usuarios registrados</h4></div>';

Y visualmente:

mensaje contenido restringido rojo y grande 4

Bueno, no está mal. Es diferente.

Notad que he quitado el <br />.

Pero vamos a darle un poco de espacio con un padding:

return '<div style="background-color: #F5F2F2; padding: 5%;"><h4 style="color: red; text-align: center;">Upps, Este contenido sólo está disponible para usuarios registrados</h4></div>';

Y vemos que si, que esto está mejor:

mensaje contenido restringido rojo y grande 5

No queda mal o por lo menos queda algo mejor que antes para que el visitante se de cuenta del aviso.

De momento dejamos aquí y no vamos a hacer más cambios de estilo.

A continuación, el nuevo Snippet:

Ahora vamos a hacer lo mismo pero poniendo todo el CSS en un fichero a parte

Añadir estilo forma 2

Como ya he comentado antes, la forma más limpia y más ordenada de escribir CSS es hacerlo en un fichero a parte.

Para hacer eso tenemos que hacer dos cosas.

  1. Crear el fichero css con nuestros estilos en un fichero para la ocasión.
  2. Inyectar dicho fichero en nuestro plugin.

Este segundo método está mas enfocado a la creación de un plugin puesto que en un plugin añadimos ficheros en los directorios correspondientes.

Claro que si queremos añadirlo en forma de Snippet en nuestro functions.php podríamos hacerlo de la primera forma o si no también podemos añadir el código CSS al fichero style.css.

También podemos hacerlo en un fichero a parte y ubicarlo en nuestro theme. Posteriormente, cuando lo inyectemos tendremos que indicarle bien la url de este fichero.

Pero aquí nos centramos en la creación del plugin y para ello primero creamos el ficheros CSS con los estilos.

Por lo tanto, la línea de retorno la cambiamos y añadimos una clase css así:

return '<div class="oaf_restrict_content"><h4>Upps, Este contenido sólo está disponible para usuarios registrados</h4></div>';

Y ahora el contenido del fichero css «oaf-restrict-partial-content-shortcode.css«:

.oaf_restrict_content {
	background-color: #F5F2F2;
	padding: 5%;
}
.oaf_restrict_content h4 {
	color: red;
	text-align:center;
}

Ya veis que es muy sencillo.

Como ya os digo, podéis modificar a vuestro gusto y necesidades.

Ahora pongo el código del fichero php completo y comento algo a continuación:

<?php
/*
* Plugin Name: OAF Restrict Partial Content Shortcode
* Plugin URI: https://oscarabadfolgueira.com/crear-shortcode-restringir-partes-del-contenido-parte-2
* Description: This plugin creates a

Continuara…

Claro que si. Aquí no acaba la cosa!

En próximos tutoriales de esta guía vamos a hacer más cosas.

Quiero Feedback

Pues eso, quiero que me comentéis cómo lo veis, que os gustaría que explicara mejor. Si voy muy lento, etc…

Bueno, por hoy lo dejamos aquí y ya seguiremos otro día.

Saludos y mucho ánimo!

Ver parte 1

Crear Shortcode para restringir partes del contenido – Parte 1

Posted on by Óscar Abad Folgueira
Crear Shortcode para restingir el acceso a partes del contenido-parte 1

En esta ocasión vamos a ver cómo crear un shortcode para restringir partes del contenido de nuestras páginas o entradas de WordPress.

¿De qué estamos hablando?

Es posible que nos interese restringir ciertas partes de algunas página o entradas de nuestro blog por los motivos que sean.

Pero qué mejor que poner un ejemplo real, ¿Verdad?

Un ejemplo real

Os pongo el ejemplo de esta misma entrada en esta web.

Como comenté en algún artículo anterior, estamos comenzando una andadura que será larga y muy interesante en los terrenos de WordPress por lo que a parte de comentar y explicar los códigos «Snippets«, también daré la opción de descargar el mismo Snippet en formato plugin para que no tengamos nuestro fichero functions.php con tantas cosas e incluso podamos llegar a perderlo si algún día cambiamos de tema. Que pasará tarde o temprano.

Por lo tanto, al final de esta entrada daré la opción de descargar el plugin en cuestión. Ah! pero eso si! sólo para usuarios registrados.

No hay que preocuparse porque de momento es todo «by the face«. Simplemente quiero saber si esto que estoy haciendo sirve de algo y más adelante puedo montar algunos proyectos que tengo en mente y de los cuales os informaré de antemano.

Entonces el lo que os digo. cierta parte de esta entrada estará restringida a usuarios no registrados.

Esto es lo que vamos a hacer ahora.

La función que maneja el asunto

Eso es, vamos a escribir la función que maneje la lógica de este snippet o plugin.

Creamos una función que en mi caso la llamaré: «oaf-restrict-partial-content-shortcode«. Nada original, ya lo se…

function oaf_restrict_partial_content_shortcode(  ) {
}

Pues nada, ya la tenemos creada. Pero claro, habrá que escribir algo de lógica dentro, verdad?

La idea es que recoja el «contenido» y en función de que el usuario esté logueado o no, muestre una cosa u otra.

Por ejemplo, vamos a comprobar si:

  • El usuario está logueado (tiene que estar logueado para ver el contenido dentro del shortcode).
  • Si el contenido no es «null«. Es decir que tiene contenido.
  • Si no es un «feed«.

Estas son algunas de las comprobaciones que podemos realizar y para este ejemplo nos puede valer.

En posteriores tutoriales volveremos sobre este asunto para ir mejorando lo que hemos hecho.

Entonces, si el usuario está logueado Y el contenido no es «null» Y además no se trata de un «feed«, entonces la función retornará con contenido.

Pero si no es así, si no cumple alguna de las 3 condiciones anteriores, devolverá un texto en plan: «Este contenido sólo es visible para usuarios registrados. Regístrate!«.

Venga, vamos allá.

function oaf_restrict_partial_content_shortcode( $atts, $content = null ) {
	if ( is_user_logged_in() && !is_null( $content ) && !is_feed() ) {
		return $content;
	} else {
		return __( 'Upps! Este contenido sólo está disponible para usuarios registrados.', 'oaf_rpcs' );
	}
}

Es muy sencillo por lo que doy por sentado que se entiende correctamente el código.

Y el Shortcode, ¿Dónde está?

Eso es, nos falta añadir el código o función para crear el Shortcode.

Esto también es sencillo, lo único que tenemos que hacer es utilizar la función:

add_shortcode ();

Ya bueno, pero así sin más no haría nada.

Necesitamos 2 parámetros. Que son:

  • El nombre del Shortcode.
  • La función que gestiona el código del Shortcode.

Entonces:

add_shortcode ('restrict_pcs', 'oaf_restrict_partial_content_shortcode' );

Ahora si, ahora ya lo tenemos todo.

El Snippet completo

Este es el código completo de este Snippet:

Y ahora, como he prometido antes, a continuación disponéis del plugin que realiza lo mismo que el Snippet pero sin tener que incluir nada en nuestro functions.php.

Ya sabéis, lo descargáis y lo instaláis en vuestro WordPress.

Cómo usarlo

Para usar este shortcode que acabamos de crear tenemos que hacer lo mismo que con los demás shortcodes, es decir, introducir el contenido restringido dentro del comienzo y el fin del shorcode.

Por ejemplo. Si queremos restringir:  «Este contenido es super importante y tiene que estar restringido«. Haremos lo siguiente:

[restrict_pcs]Este contenido es super importante y tiene que estar restringido[/restrict_pcs]

Si el usuario está registrado y logueado, no tendrá ningún problema en ver el contenido restringido como muestro en la siguiente captura:

Plugin OAF Restrict Partial Content Shortcode
Plugin OAF Restrict Partial Content Shortcode 2

Ahora bien, si el usuario visitante no no está logueado, es decir, que no tiene cuenta en nuestro WordPress, verá el siguiente mensaje de aviso:

Perfecto. Ya lo veis!!

Bueno, al final este tutorial se a alargado un poco pero me gusta explicar las cosas poco a poco.

¿Y ya está?

Bueno, estar está. Jajaja… Pero no está ni por asomo visible o para andar enseñándolo por ahí.

Es por eso que estoy preparando una guía completa que compelte todo el proceso de la realización de este plugin. Eso sí, algunos contenidos estarán restringidos.

Haremos muchas cosas. Como por ejemplo darle un poco de estilo al mensaje, prepararlo para la traducción a otros idiomas, traducirlo al Español, Crear el «readme.txt«, etc…

Y al final de la guía realizaremos todo el proceso para publicarlo en el repositorio de http://www.wordpress.org.

¿Te animas?

Espero que te animes a seguir esta guía y otras que tengo en lista de espera.

Quiero Feedback

Pues eso, quiero que me comentéis cómo lo veis, que os gustaría que explicara mejor. Si voy muy lento, etc…

Bueno, por hoy lo dejamos aquí y ya seguiremos otro día.

Saludos y mucho ánimo!

Ver la parte 2

Guía de la Shortcode API de WordPress: 3 – Shortcodes incluídos en WordPress – [audio]

Posted on by Óscar Abad Folgueira

Comenzamos con el tercer artículo sobre la Shortcode API de WordPress.

En los dos anteriores artículos vimos lo que son los Shotcodes y sus tipos además de las diferentes formas o sitios donde podemos incluir su código.

Pues mira, acabo de darme cuenta de que me vendría bien un plugin para estos temas. Me refiero a un plugin para gestionar «series de artículos». He visto que existen varios en el repositorio de WordPress pero como ya he comentado anteriormente, es muy buena práctica hacer nuestros propios plugins cuando nos hagan falta. Aquí queda esto. Un día de estos miraré la posibilidad de hacer un plugin para gestionar series de artículos pero por el momento dejo los enlaces de los dos anteriores a continuación:

Guía de la Shortcode API de WordPress

Introducción.

Opciones para crear Shortcodes.

Y ahora vamos a lo que vamos…

WordPress pone a nuestra disposición varios shortcodes que ya están listos para poder utilizarlos sin necesidad de tener que programarlos.

Son bastante útiles dependiendo de las necesidades de cada uno.

A continuación indico la lista de estos shortcodes:

  1. Esto no puede quedar así por lo que hay que realizar una pequeña configuración. Es decir, necesitamos decirle qué fichero queremos que se reproduzca con este reproductor que acabamos de embeber.

    Lo que hacemos es posicionarnos y hacer click sobre el reproductor. Al hacer click se motrarán dos botones como los de la siguiente captura:

    guia-shortcode-api-parte-3_01-audio

    El segundo botón, el de la «X» no hace falta que lo comente pero pulsamos en el otro, el dela imagen de un lapicero. En la primera pantalla que se muestra, podemos seleccionar o configurar la reproducción para este reproductor:

    guia-shortcode-api-parte-3_01-audio02

    Como vemos en la igamen, podemos seleccionar si queremos reproducir los ficheros «mp3», «ogg» o los dos. También tenemos opciones para la precarga además de repetición y reproducción automática ya que por defecto es así como está configurado.

    También por defecto asume que queremos reproducir todos los ficheros de audio como vemos en el siguiente imagen que se muestra al pulsar sobre «Reemplazar audio»:

    guia-shortcode-api-parte-3_01-audio03

    Ya vemos que tenemos 2 ficheros disponibles. Son los únicos que tengo yo actualmente en mi librería multimedia de WordPress. A partr de aquí podemos elegir cualquiera de ellos o los dos. También podemos realizar filtrados para encontrar los que queremos si es que tenemos muchos.

    guia-shortcode-api-parte-3_01-audio04

    Yo he seleccionado uno sólo y pulsado sobre el botón «Reemplazar». A continuación se muestra la siguiente pantalla por si queremos modificar algo:

    guia-shortcode-api-parte-3_01-audio05

    Y listo, pulsamos en «Actualizar» y ya lo tenemos listo para que lo ejecuten y eschuchen los visitantes de nuestra web o blog.

    Ojo!! También podemos poner simplemente el enlace a un fichero «mp3» y WordPress lo convierte automáticamente a reproductor de ese fichero:

    https://oscarabadfolgueira.com/wp-content/uploads/2016/01/08-usos-de-wordpress-introduccion.mp3

    Esto que acabmos de escribir nos mostrará lo siguiente:

    Interesante, ¿verdad?

    Bien, como suele ser costumbre, este shotcode admite opciones para que podamos realizar ciertas configuraciones directamente en el shortcode.:

    src  –> Nos permite indicar la url del fichero que queremos reproducir. Podemos indicar fichero con las siguientes extensiones: ‘mp3‘ , ‘m4a‘, ‘ogg, ‘wav‘ o ‘wma‘.

    loop –> En este caso nos permite habilitar o deshabilitar la reproducción continua. Por defecto está deshabilitada. La opciones que tenemos son: «off» y «on«.

    autoplay –> Nos permite configurar el reproductor para que comience la reproducción una vez que esté listo el reproductor y el fichero de audio. Las opciones, al igual que con «loop» son: «off» y «on«. Por defecto está deshabilitado.

    preload –>  Podemos especificar si el audio debe cargarse cuando se carga la página y cómo. Disponemos de las siguientes opciones:

    «none» -> (por defecto) El audio no se cargará cuando se cargue la página.

    «auto» -> El audio se cargará por completo cuando se cargue la página.

    «mediadata» –> Sólo se cargará la información de mediadata cuando se cargue la página.

    A continuación pongo un ejemplo un poco más completo para que os hagáis una idea más clara de cómo funciona:

    Y ahora

    Bien!

    Como ya hemos visto, dispone de varias opciones de configuración y son bastante sencillas por lo que no voy a ahondar más en ello.

    En los siguientes artículos de esta serie, veremos más shortcodes que WordPress pone a nuestra disposición antes de ponernos manos a la obra para realizar nuestros propios shortcodes.

    Nos vemos!

    Suscríbete: Spotify | RSS

Escapar Shortcodes en WordPress

Posted on by Óscar Abad Folgueira

Es posible que en algún momento hayas querido escribir algún que otro artículo sobre los shortcodes de WordPress y claro, necesitas de vez en cuando mostrar el texto del shortcode y que no se ejecute el shortcode para mostrar lo que tiene programado.

Para que nos entendamos… Si yo quiero mostrar [shortcode] en lugar de:

Por mi experiencia con WordPress, este es un problemilla al que nos enfrentamos cuando escribimos artículos sobre shortcodes en nuestros blogs WordPess.

Pues bien, disponemos de dos opciones aunque a mi personalmente sólo me funciona bien una de ellas.

Podemos escapar los shortcodes así:

[audio]

 Como ya comento, parece ser que las dos formas funcionan pero yo he realizado varias pruebas y me quedo con la primera opción que parece que me está funcionando mucho mejor.

No estaría de más que alguno comentaras las pruebas que ha realizado con esto para mostrarnos un poco de luz a todos y a todas.

Saludos y hasta la próxima.

Ir al contenido