Woocommerce show SALE! Tag on the products with offer.
If you want to show percentage in Badge symbol here is custom code for you.
You can edit following two files with the given code
Plugins / woocommerce / templates /loop / sale-flash.php
This file for archive loop products section
Plugins / woocommerce / templates /single-product / sale-flash.php
This file is for editing on single product page.
| <?php | |
| /** | |
| * Product loop sale flash | |
| * @package WooCommerce/Templates | |
| * @version 1.6.4 | |
| */ | |
| if ( ! defined( ‘ABSPATH‘ ) ) exit; // Exit if accessed directly | |
| global $post, $product; | |
| ?> | |
| <?php if ($product->is_on_sale() && $product->product_type == ‘variable‘) : ?> | |
| <div class=“aditya“> | |
| <div class=“inside“> | |
| <div class=“inside-text“> | |
| <?php | |
| $available_variations = $product->get_available_variations(); | |
| $maximumper = 0; | |
| for ($i = 0; $i < count($available_variations); ++$i) { | |
| $variation_id=$available_variations[$i][‘variation_id‘]; | |
| $variable_product1= new WC_Product_Variation( $variation_id ); | |
| $regular_price = $variable_product1 ->regular_price; | |
| $sales_price = $variable_product1 ->sale_price; | |
| $percentage= round((( ( $regular_price – $sales_price ) / $regular_price ) * 100),1) ; | |
| if ($percentage > $maximumper) { | |
| $maximumper = $percentage; | |
| } | |
| } | |
| echo $price . sprintf( __(‘%s‘, ‘woocommerce‘ ), $maximumper . ‘%‘ ); ?></div> | |
| </div> | |
| </div><!– end callout –> | |
| <?php elseif($product->is_on_sale() && $product->product_type == ‘simple‘) : ?> | |
| <div class=“aditya“> | |
| <div class=“inside“> | |
| <div class=“inside-text“> | |
| <?php | |
| $percentage = round( ( ( $product->regular_price – $product->sale_price ) / $product->regular_price ) * 100 ); | |
| echo $price . sprintf( __(‘%s‘, ‘woocommerce‘ ), $percentage . ‘%‘ ); ?></div> | |
| </div> | |
| </div><!– end bedge –> | |
| <?php endif; ?> |
For customisation you can add following css to make bubble for badge.
| .aditya { | |
| left: 0px; | |
| position: absolute; | |
| text-transform: uppercase; | |
| top: 20px; | |
| z-index: 9; | |
| } | |
| .aditya .inside { | |
| background-color: #e74c3c; | |
| border-radius: 999px; | |
| display: table; | |
| height: 42px; | |
| position: relative; | |
| width: 42px; | |
| -webkit-border-radius: 999px; | |
| } | |
| .aditya .inside .inside-text { | |
| color: #fff; | |
| display: table-cell; | |
| font-size: 14px; | |
| font-weight: bold; | |
| line-height: 14px; | |
| text-align: center; | |
| vertical-align: middle; | |
| } |
You must be logged in to post a comment.