Crear Shortcodes de WooCommerce

Publicada el por

Veamos algunos ejemplos para crear shortcodes de WooCommerce. WooCommerce ya tiene algunos que vienen por defecto, pero nosotros podemos crear los nuestros.

WooCommerce programación

A partir del API de WooCommerce, podemos utilizar las funciones que posee para crear nuestros shortcodes que utilizaremos en nuestra web. Veamos algunso ejemplos fáciles para que veáis el proceso de creación y utilización.

Los shortcodes

Debéis saber primero que un shortcode es un código que podemos utilizar añadiéndolo en cualquier zona de la web. Así, tú creas una función y la puedes llamar desde cualquier sitio poniendo un pequeño código, shortcode.

Supongo que si estás en este artículo, es porque ya sabes de qué va el tema de shortcode. Sólo te recordaré que debes declarar el shortcode en functions.php de tu plantilla, y luego lo utilizas llamándolo entre corchetes [llamada_shortcode]

Recuerda, declaración en functions.php y llamada en la zona que quieras de la web. Vamos por los ejemplos.

Shortcode en WooCommerce

Los siguientes shortcodes se basan en el que le pasas la ID del producto como parámetro. Esa ID tiene muchas maneras de pasarse y conseguirse.

Nosotros mostramos una, que es la que se utiliza en lso listados.

Shortcode mostrar precio producto

/* Código en functions.php */
function tct_woo_product_price_shortcode( $atts ) {
$atts = shortcode_atts( array('id' => null), $atts, 'tct_product_price' );
if ( empty( $atts[ 'id' ] ) ) {
return '';
}
$product = wc_get_product( $atts['id'] );
if ( ! $product ) {
return '';
}
return $product->get_price_html();
}
add_shortcode( 'tct_product_price', 'tct_woo_product_price_shortcode' );

En la web lo llamaremos añadiendo un texto y el contendio siguiente

[tct_product_price id=%POST_id%]

Shortcode mostrar stock

Mostramos el stock del producto. Número de productos que quedan si habéis activado el control de stock en la tienda.

/* Código en functions.php */
function tct_woo_product_stock_shortcode( $atts ) {
  $atts = shortcode_atts( array('id' => null), $atts, 'tct_product_stock' );
  if ( empty( $atts[ 'id' ] ) ) {
    return '';
  }
  $product = wc_get_product( $atts['id'] );
  if ( ! $product ) {
    return '';
  }
  return $product->get_stock_quantity();
}
add_shortcode( 'tct_product_stock', 'tct_woo_product_stock_shortcode' );

En la web lo llamaremos añadiendo un texto y el contendio siguiente

[tct_product_stock id=%POST_id%]

Shortcode mostrar fecha creación

Veamos cóm mostrar la fecha de creación del producto. Lógicamente, cuando tenemos al fecha de creación, podemos jugar con ella para mostrar si un producto es nuevo o no. Eso os lo dejo a vosotros.

/* Código en functions.php */
function tct_woo_product_new_shortcode( $atts ) {
  $atts = shortcode_atts( array('id' => null), $atts, 'tct_product_new' );
  if ( empty( $atts[ 'id' ] ) ) {
    return '';
  }
  $product = wc_get_product( $atts['id'] );
  if ( ! $product ) {
    return '';
  }
  return $product->get_date_created();
}
add_shortcode( 'tct_product_new', 'tct_woo_product_new_shortcode' );

En la web lo llamaremos añadiendo un texto y el contendio siguiente

[tct_product_new id=%POST_id%]

Shortcode mostrar si está en oferta

Veamos si un producto está en oferta o no.

/* Código en functions.php */
function tct_woo_product_onsale_shortcode( $atts ) {
  $atts = shortcode_atts( array('id' => null), $atts, 'tct_product_onsale' );
  if ( empty( $atts[ 'id' ] ) ) {
    return '';
  }
  $product = wc_get_product( $atts['id'] );
  if ( ! $product ) {
    return '';
  }
  if ($product->is_on_sale() ){ return "Oferta"; }
}
add_shortcode( 'tct_product_onsale', 'tct_woo_product_onsale_shortcode' );

Uso del shortcode en la web

[tct_product_onsale id=%POST_id%]

Como véis son ejemplos muy sencillos. Sólo es para que veáis cómo se utilizan y para que trabajéis con ellos.

Más información


Artículos relacionados: