Te damos la bienvenida a Ayuda WordPress

Ver este email en tu navegador

Ayuda WordPress

Recursos, themes, plugins y tutoriales en español

Todos los shortcodes de WooCommerce y cómo utilizarlos

Por Fernando el Apr 26, 2016 09:09 am

Crear una tienda online con WordPress y WooCommerce es realmente sencillo, y configurarlo no digamos, pero también puedes utilizar los shortcodes de WooCommerce para conseguir algunas configuraciones y visualizaciones especiales, así que vamos a ver todos los disponibles y cómo se utilizan.

Pero primero…

¿Qué es un shortcode?

Por si aún no lo tienes claro, un shortcode es un atajo de programación, un código que ejecuta instrucciones de un código más largo, que normalmente está incluido en el plugin, en el archivo functions.php del tema activo o en tu propio plugin de personalizaciones.

Crear tu propio shortcode es más fácil de lo que crees, así que ponte a practicar.

¿Qué son los shortcodes de WooCommerce?

Son atajos que te permiten mostrar visualizaciones o páginas especiales en tu tienda online, que por defecto no están a simple vista.

Los shortcodes de WooCommerce

Carrito

Se utiliza en la página del carrito y muestra el contenido del carrito así como la interfaz para cupones y otros elementos del carrito.

Modificadores: ninguno

Shortcode:

[woocommerce_cart]

Pago

Se utiliza en la página de pago y muestra el proceso de pago.

Modificadores: ninguno

[woocommerce_checkout]

Formulario de seguimiento de pedido

Permite al usuario ver el estado de cualquier pedido introduciendo sus detalles.

Modificadores: ninguno

Shortcode:

[woocommerce_order_tracking]

Mi cuenta

Muestra la sección “mi cuenta”, en la que el cliente puede ver sus anteriores pedidos y actualizar su información. Puedes especificar el número u orden en el que se mostrarán. Por defecto se muestran 15 pedidos (puedes usar -1 para mostrar todos los pedidos)

Modificadores:

array(       'current_user' => '',      'order_count' => '15'  )

Shortcode:

[woocommerce_my_account order_count="12"]

Productos recientes

Muestra una lista de los productos más recientes, algo muy útil en la portada de la tienda. El modificador ‘per_page’ determina cuantos productos se mostrarán en la página, y el atributo de columnas controla en cuantas columnas se verán los productos.

Modificadores:

array(       'per_page' => '12',       'columns' => '4',       'orderby' => 'date',       'order' => 'desc'  )

Shortcode:

[recent_products per_page="12" columns="4"]

Productos destacados

Funciona igual que los productos recientes, pero mostrando solo los productos marcados como destacados. En el ejemplo el shortcode muestra 12 productos en 4 columnas.

Modificadores:

array(       'per_page' => '12',       'columns' => '4',       'orderby' => 'date',       'order' => 'desc'  )

Shorcode:

[featured_products per_page="12" columns="4"]

Producto

Muestra un único producto, ya sea por su ID o por el SKU. El SKU lo introduces tú al crear el producto y el ID puedes localizarlo en la URL del producto al editarlo, por ejemplo.

Shortcode:

[product id="99"]

[product sku="FOO"]

Productos

Muestra varios productos por ID o SKU.

Modificadores:

array(       'columns' => '4',       'orderby' => 'title',       'order' => 'asc'  )

Shortcode:

[products ids="1, 2, 3, 4, 5"]

[products skus="foo, bar, baz" orderby="date" order="desc"]

Añadir al carrito

Muestra el precio y el botón de añadir al carrito de un único producto por su ID.

Modificadores:

array(  'id' => '99',  'style' => 'border:4px solid #ccc; padding: 12px;',  'sku' => 'FOO'  )

Shortcode:

[add_to_cart id="99"]

URL de añadir al carrito

Muestra la URL en el botón de añadir al carrito de un único producto por ID.

Modificadores:

array(  'id' => '99',  'sku' => 'FOO'  )

Shortcode:

[add_to_cart_url id="99"]

Página de producto

Muestra una página de producto simple por ID o SKU.

Shortcode:

[product_page id="99"]

[product_page sku="FOO"]

Categoría de productos

Muestra varios productos de una categoría por el slug de la misma.

Modificadores:

array(       'per_page' => '12',       'columns' => '4',       'orderby' => 'title',       'order' => 'asc',       'category' => ''  )

Shortcode:

[product_category category="libros"]

Categorías de productos

Muestra varias categorías de productos.

Modificadores:

array(        'number' => 'null',       'orderby' => 'title',       'order' => 'ASC',       'columns' => '4',       'hide_empty' => '1',  'parent' => '',  'ids' => ''  )

El campo ‘number’ se utiliza para mostrar el número de productos, y el campo ‘ids’ indica al shortcode qué categorías mostrar.

Puedes poner el parámetro ‘parent’ a 0 para mostrar solo las categorías superiores. Los IDs de categoría se ponen separados por comas para mostrar varias.

Shortcode:

[product_categories number="12" parent="0"]

Productos en oferta

Muestra todos los productos rebajados.

Modificadores:

array(  'per_page' => '12',  'columns' => '4',  'orderby' => 'title',  'order' => 'asc'  )

Shortcode:

[sale_products per_page="12"]

Productos más vendidos

Muestra los productos en venta más vendidos.

Modificadores:

array(  'per_page' => '12',  'columns' => '4'  )

Shortcode:

[best_selling_products per_page="12"]

Productos mejor valorados

Muestra los productos en venta mejor valorados.

Modificadores:

array(  'per_page' => '12',  'columns' => '4',  'orderby' => 'title',  'order' => 'asc'  )

Shortcode:

[top_rated_products per_page="12"]

Atributo de producto

Muestro productos con un atributo específico.

Modificadores:

array(  'per_page' => '12',  'columns' => '4',  'orderby' => 'title',  'order' => 'asc',  'attribute' => '',  'filter' => ''  )

Shortcode:

[product_attribute attribute='color' filter='negro']

Productos relacionados

Muestra una lista de productos relacionados con el actual.

Modificadores:

array(  'per_page' => '12',  'columns' => '4',  'orderby' => 'title'  )

Shortcode:

[related_products per_page="12"]

Ordenando productos mediante campos personalizados

En muchos shortcodes como:

[recent_products]  [featured_products]  [products]  [product_category]  [sale_products]  [top_rated_products]  [product_attribute]  [related_products]

puedes ordenar los productos usando alguno de estos valores:

menu_order  title  date  rand  id

Por ejemplo, un uso del atributo ‘orderby’ sería el siguiente:

[products skus="foo, bar, baz" orderby="date" order="desc"].

Pero también puedes ordenar productos mediante campos personalizados, usando el siguiente código, en el ejemplo para ordenar productos por precio:

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );    function woocommerce_shortcode_products_orderby( $args ) {    $standard_array = array('menu_order','title','date','rand','id');    if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {  $args['meta_key'] = $args['orderby'];  $args['orderby'] = 'meta_value_num';  }    return $args;  }

Simplemente añade el código a tu archivo functions.php o tu plugin de personalizaciones y lo adaptas editando el ‘meta_key’. Fácil ¿no?

¿Cómo uso los shortcodes de WooCommerce?

Vale, ya te los sabes todos pero ¿cómo los utilizo? ¿dónde los meto?

Puedes hacerlo de varias maneras, una muy obvia es crear tus propias páginas e introducir shortcodes a voluntad, pero no es muy práctico, pues muchas ya las crea WooCommerce automáticamente y podrías liarla bien gorda si no lo haces bien.

Shortcodes en widgets

Un uso muy habitual de los shortcodes de WooCommerce es en widgets de texto., para mostrar listas personalizadas de productos a tu gusto y necesidades de la tienda.

Aunque WooCommerce incluye unos cuantos widgets por defecto nada como usar shortcodes para personalizar tu tienda a tu gusto.

Un modo inteligente de usar shortcodes de WooCommerce en los widgets de texto sería en combinación del plugin JP Widget Visibility, que te permite especificar dónde se mostrará (o no) cada widget, pudiendo añadir shortcodes personalizados que muestren listados de productos según qué quieras vender en según qué pagina o producto.

Shortcodes con plugin

Mucho más fácil es utilizar el plugin WooCommerce Shortcodes, que añade una serie de botones a la barra de herramientas del editor de WordPress para facilitar la inserción de shortcodes de WooCommerce con sus respectivos modificadores.

Maquetadores visuales

Si usas Visual Composer o Divi la cosa cambia, y es donde de verdad vas a sacar todo el provecho de los shortcodes de WooCommerce.

Crea tus páginas personalizadas de producto, tienda, carrito, pago, etc y añade los shortcodes adecuados en filas o columnas, en módulos de texto, para mostrar tus productos donde quieras, ordenados y colocados como gustes, con el objetivo de maximizar las ventas.

Si además utilizas la nueva funcionalidad de tests A/B de cada módulo/columna/fila de las últimas versiones de Divi entonces tendrás un entorno de ventas realmente eficaz y fácilmente analizable por rendimiento de cada módulo y página.