Mostrar Precio Original Tachado en Magento 2, editar tema

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Apuntes | Editar el tema Magento 2

Mostrar precio original tachado en los listados de productos con descuento en Magento 2.

 

Cuando tenemos un listado de productos que tienen ofertas en Magento, este por defecto no muestra el precio original, al menos en el tema Luma. Para ello necesitaremos editar el tema Magento 2. En este caso queremos que junto al precio en oferta muestre el precio original “tachado” para que el cliente tenga una idea del ahorro.

Es decir, mostrar algo así:

 

 

Para conseguirlo tenemos que seguir los siguientes pasos:

 

Copiar el archivo:

vendor/magento/module-configurable-product/view/base/templates/product/price/final_price.phtml

 

En nuestro tema (cambiar MisTemas/tema por nuestro tema):

app/design/frontend/MisTemas/tema/Magento_ConfigurableProduct/templates/product/price/final_price.phtml

 

Editamos del archivo las siguientes líneas de código:

 

Original:

<?php if (!$block->isProductList() && $block->hasSpecialPrice()): ?>
    <span class="old-price sly-old-price no-display">
        <?php /* @escapeNotVerified */ echo $block->renderAmount($priceModel->getAmount(), [
            'display_label'     => __('Regular Price'),
            'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
            'price_type'        => 'oldPrice',
            'include_container' => true,
            'skip_adjustments'  => true
        ]); ?>
    </span>
<?php endif; ?>

 

Final:

<?php if ($block->hasSpecialPrice()): ?>
    <span class="old-price sly-old-price" style="text-decoration:line-through;">
        <?php /* @escapeNotVerified */ echo $block->renderAmount($priceModel->getAmount(), [
            //'display_label'     => __('Regular Price'),
            'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
            'price_type'        => 'oldPrice',
            'include_container' => true,
            'skip_adjustments'  => true
        ]); ?>
    </span>
<?php endif; ?>

 

Los cambios realizados son:

Quitar del if !$block->isProductList()

En el span quitamos también la clase no-display y añadimos el estilo text-decoration:line-through; para que muestre el precio original tachado. Podemos jugar con CSS y mostrar el precio tachado, en color rojo, con un tamaño inferior… Lo ideal es hacerlo en el correspondiente archivo CSS mediante una clase propia. En este caso solamente necesitábamos mostrar el precio “tachado” por lo que hemos optado por la vía más rápida.

Por último, hemos comentado la línea del ‘display_label’ pues solamente queremos que se muestre el precio, no la etiqueta. Eso es todo. De una forma rápida y sencilla conseguimos darle un toque “personal” a nuestra plantilla a la vez que nuestros clientes y visitantes pueden ver el ahorro que obtienen.

 

En nuestro caso usamos un tema propio basado en luma, quedando el precio de la siguiente manera:

Precio tachado magento 2
Precio tachado magento 2

 

 

 

Espero que os sirva.

 

Fuente 1 y Fuente 2

 

¿Tienes un e-commerce Magento y necesitas que realicemos algún módulo, programación o editar una plantilla? ¿Quieres darle un aspecto moderno y actual a tu tienda online?

En Garber Informática disponemos de un equipo de profesionales que te pueden ayudar, hacemos programación a medida, diseño y márketing online.

Contacta con nosotros ahora, te asesoramos sin compromiso.

 

Más...

Como generar PDFs en PHP

Hay muchas formas distintas de generar PDFs en PHP y con distintas librerías. Todas tienen sus ventajas y desventajas, solo tienes que

Cómo añadir un plugin a WordPress

Paso a paso te enseñamos a añadir un plugin a Wordpress de la manera más sencilla posible. Toma nota de las indicaciones y crea nuevos plugins para WordPress.

Deja un comentario