Share
Lo que vas a crearPara aquellos que están familiarizados con WooCommerce, también puede ser consciente de su funcionalidad de venta flash. Esto se usa principalmente para mostrar cuando un artículo está en venta.
En este tutorial, veremos cómo podemos personalizar y mejorar la pantalla de venta flash de WooCommerce para mostrar el porcentaje de descuento efectivo y cambiar el color de la etiqueta en función de dicho porcentaje..
El flash de venta de WooCommerce se visualiza en los archivos y páginas individuales de los productos de venta, es decir, los productos que tienen un Precio de venta inferior al Precio normal..
En el sistema actual, los usuarios no pueden percibir el Dimensión-o calidad-del descuento.
Por ejemplo, un 70% de descuento es más atractivo que un 15%, pero ambos son mostrados por WooCommerce con un simple venta-flash en la imagen del producto. Para resolver este problema, modificaremos el algoritmo que controla el flash de venta para que su contenido (Venta) se sobrescriba con el porcentaje de descuento efectivo..
El archivo que genera la s.ale-flash Se encuentra en la siguiente carpeta:
su sitio / wp-content / plugns / woocommerce / templates / loop / sale-flash.php
Por lo general, no es una buena idea cambiar los archivos de complementos porque todos los cambios se perderán durante la primera actualización, y deshabilitar las actualizaciones no es una opción.
Afortunadamente, podemos realizar tantos cambios como queramos en las plantillas de WooCommerce sin comprometer la integridad del complemento, simplemente copiando el archivo en una subcarpeta de nuestro tema que llamaremos woocommerce. En nuestro caso, copiamos el sale-flash.phparchivo, que se encuentra en:
su sitio / wp-content / sutema / woocommerce / loop / sale-flash.php
Cada archivo dentro de la carpeta WooCommerce tiene prioridad sobre los archivos de plantillas originales del complemento. De esta manera podemos estar seguros de que al actualizar WooCommerce no perderemos ninguno de nuestros cambios.
Tenga en cuenta que si está utilizando un tema secundario, el archivo debe copiarse en la misma subcarpeta del tema secundario..
También tenga en cuenta que si su tema ya tiene un archivo tu tema / woocommerce / loop / sale-flash.php entonces es muy probable que ya modifique el comportamiento original de sale-flash. En este caso hay dos soluciones:
Echemos un vistazo a la sale-flash.php expediente:
Accentsconagua
is_on_sale ()):?> '. __ ('¡Venta!', 'Woocommerce'). '', $ post, $ producto); ?> El código es muy simple: genera un lapso etiqueta con el texto "VENTA”Cada vez que un objeto está en venta. Todo lo que tenemos que hacer es hacer los siguientes cambios en el código:
is_in_stock ()) return; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (empty ($ regular_price)) // entonces este es un producto variable $ available_variations = $ product-> get_available_variations (); $ documentation_id = $ available_variations [0] ['variedad_id']; $ documentation = new WC_Product_Variation ($ documentation_id); $ regular_price = $ variación -> regular_price; $ sale_price = $ variación -> sale_price; $ sale = ceil ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ venta. '%', $ post, $ producto); ?>
Lo primero que tenemos que hacer es calcular el descuento, y para hacer eso necesitamos el Precio regular y el Precio de venta. Para productos simples y productos agrupados, podemos obtener esta información simplemente usando los dos campos de metadatos: _precio y _precio regular(ver filas 5 y 6).
Si el obtenido Precio regular está vacío, entonces estamos hablando de un producto variable, y en este caso tendremos que hacer lo siguiente:
En este punto, todo lo que tenemos que hacer es aplicar una fórmula simple para calcular el descuento, utilizando el Precio regular y el Precio de venta. Para hacerlo más simple, podríamos evitar el uso de decimales redondeando el número al número entero más cercano usando la tecla ceil función, como en el ejemplo que acabo de mostrarle, o truncando al número más pequeño más cercano usando la piso función.
Podemos agregar algo de color a nuestra solución utilizando una escala cromática para representar el porcentaje de descuento. El verde es 0% y el rojo es 100%..
Los dos colores tienen el siguiente RGBcódigos:
Con estas fórmulas simples podemos agregar al canal rojo y tomar del canal verde.
El canal azul se mantiene sin cambios; siempre sera cero.
R = (255 * venta) / 100G = (255 * (100 - venta)) / 100B = 0Una vez que tengamos los valores rojo y verde, podemos modificar el venta-flash fondo añadiendo la regla directamente a la lapso etiqueta.
El código completo es el siguiente:
is_in_stock ()) return; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (empty ($ regular_price)) // entonces este es un producto variable $ available_variations = $ product-> get_available_variations (); $ documentation_id = $ available_variations [0] ['variedad_id']; $ documentation = new WC_Product_Variation ($ documentation_id); $ regular_price = $ variación -> regular_price; $ sale_price = $ variación -> sale_price; $ sale = ceil ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ venta. '%', $ post, $ producto); ?>
Y el resultado:
Para aquellos que lo han estado siguiendo, es posible que se pregunte por qué establecemos la fondo: ninguno antes de configurar el color de fondo?
En este caso específico, la hoja de estilo tenía una regla para la fondopropiedad que siempre tuvo prioridad sobre la color de fondo. La forma correcta de hacerlo habría sido cambiar la hoja de estilo y sobrescribir o cancelar la regla que establece el fondo de la venta-flash.
En general, debe seleccionar las propiedades y las reglas de estilo que desea invalidar o cambiar con herramientas como Firebug. Una vez que entienda dónde y qué cambiar, debe tratar de no usar estilos en línea. En su lugar, trate de usar una hoja de estilo externa.
En este caso, tenemos una excepción a la regla.. El rgbel código se calcula a través de un algoritmo muy simple y siempre se puede cambiar el algoritmo cambiando algunas líneas de código PHP en lugar de cambiar cientos de CSSclases.
En este punto, se realiza la personalización de la venta-flash. Hemos modificado la plantilla que hace la visualización de la etiqueta correspondiente..
En lugar de modificar el archivo original que se encuentra en la carpeta del complemento, utilizamos una copia en nuestra carpeta de temas para salvaguardar los cambios que acabamos de hacer en caso de actualizaciones al complemento..
En general, esta es una regla que es válida para todos los archivos en la carpeta de plantillas del complemento WooCommerce. Espero que hayas encontrado este tutorial útil no solo para mejorar el comportamiento de sale-flash, sino también para comprender mejor cómo funcionan algunos de los mecanismos de WooCommerce..
