Cómo Crear un Shortcode en WordPress para Mostrar el Precio de un Producto

Dificultad Media

En este artículo, te guiaré paso a paso sobre cómo crear un shortcode personalizado que te permitirá mostrar el precio final de un producto en cualquier espacio de tu web que lo necesites. Con esta sencilla guía, también podrás extrapolar lo que aprendas o copies y pegues para crear tus propios ShortCodes a medida en WordPress.

Creando un Shortcode Personalizado

A menudo, nos encontramos en situaciones en las que necesitamos mostrar información específica en diferentes partes de nuestro sitio web. Con el poder de los shortcodes personalizados, podemos hacer precisamente eso. ¿Qué es un shortcode? Es una etiqueta corta que insertamos en el contenido y que se expande automáticamente para mostrar información específica. En este caso, vamos a crear un shortcode para mostrar el precio de un producto.

Paso 1: Definir la Función Shortcode

Lo primero que necesitamos hacer es definir una función de PHP que se encargue de obtener y mostrar el precio del producto. Utilizaremos el archivo functions.php de WordPress de tu tema hijo para añadir el código. El siguiente fragmento de código es la base de nuestra función:

function mostrar_precio_producto_shortcode($atts) {
    // Código para obtener el precio del producto
}
add_shortcode('precio_producto', 'mostrar_precio_producto_shortcode');

Paso 2: Obtener el Precio del Producto:

Dentro de la función mostrar_precio_producto_shortcode, usaremos la función wc_get_product para obtener el producto utilizando el ID proporcionado en el shortcode. Luego, verificaremos si es un producto simple y obtendremos los precios regular y actual del producto:

$product = wc_get_product($atts['id']);

if ($product && $product->is_type('simple')) {
    $precio_regular = $product->get_regular_price();
    $precio_actual = $product->get_price();
    
    // Código para mostrar los precios
}

Paso 3: Mostrar los Precios con Estilo:

Para presentar los precios, podemos utilizar HTML y CSS. Si el producto tiene un precio rebajado, mostraremos el precio regular con un estilo tachado y luego el precio actual:

if ($precio_regular !== $precio_actual) {
    return '<small style="text-decoration:line-through;font-weight:normal;font-size:13px;">'.wc_price($precio_regular) . '</small><br>' . wc_price($precio_actual);
} else {
    return wc_price($precio_actual);
}

Código completo del shortcode para mostrar el precio del producto:

// Función para obtener y mostrar el precio final de un producto de WooCommerce mediante un ShortCode
function mostrar_precio_producto_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
    ), $atts);

    if ($atts['id']) {
        $product = wc_get_product($atts['id']);

        if ($product && $product->is_type('simple')) {
            $precio_regular = $product->get_regular_price();
            $precio_actual = $product->get_price();

            if ($precio_regular !== $precio_actual) {
                return '<small style="text-decoration:line-through;font-weight:normal;font-size:13px;">'.wc_price($precio_regular) . '</small><br>' . wc_price($precio_actual);
            } else {
                return wc_price($precio_actual);
            }
        } else {
            return 'Producto no válido o no es un producto simple.';
        }
    } else {
        return 'Por favor, proporciona un ID de producto.';
    }
}
add_shortcode('precio_producto', 'mostrar_precio_producto_shortcode');

Cómo añadir el Shortcode en tu WordPress:

En el editor de páginas de WordPress

Ahora que tenemos nuestro shortcode personalizado, puedes utilizarlo de diferentes maneras. En el editor de páginas, como WPBakery, Elementor o Gutenberg, simplemente agrega [precio_producto id="14"], donde «14» es el ID del producto que deseas mostrar.

En el código fuente del tema

Si deseas usar el shortcode en el código fuente de tu plantilla, puedes usar:

<?php echo do_shortcode('[precio_producto id="14"]');?>.

Importancia de trabajar con un Tema Hijo en WordPress:

Una práctica esencial en el desarrollo web es utilizar un tema hijo en WordPress al realizar modificaciones en tu sitio. Esto asegura que tus cambios no se perderán al actualizar el tema principal. Asegúrate de crear un tema hijo antes de editar el archivo functions.php.