Woocommerce with SALE discount percentage

Woocommerce with discount percentage

So what I have here is a code snippet to calculate individual product discount and display it in sale bubble. Replace all the codes in following files your theme folder/woocommerce/loop/sale-flash.php and  your theme folder/woocommerce/single-product/sale-flash.php with below code.

 If the files are not present, load them from the Woocommerce template dir.

You can generate a different ribbon here: http://www.cssportal.com/css-ribbon-generator/

<?php
/**
 * Product loop sale flash
 *
 * @author     Vivek R @ WPSTuffs.com
 * @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="bubble">
            <div class="inside">
             <span>
                  <?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' ), '-&nbsp;' . $maximumper . '%' ); ?></span>
            </div>
     </div><!-- end callout -->

<?php elseif($product->is_on_sale() && $product->product_type == 'simple') : ?>
    
    <div class="bubble">
               <div class="inside">
                 <span>
                     <?php
                $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
                echo $price . sprintf( __('%s', 'woocommerce' ), '-&nbsp;' . $percentage . '%' ); ?></span>
               </div>
        </div><!-- end bubble -->

<?php endif; ?>

 

Now lets style the ribbon, Copy the following CSS codes to your theme’s style.css file

 /* BEGIN sale banner */
.bubble {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
  border: none!important;
  height: auto !important;
  position: relative;
  width: auto !important;
  z-index: 99999 !important;
}
.inside {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.inside span {
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.inside span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.inside span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
/* END sale banner */

 

Thats it you just added a cool feature which has potential to increase your sales.

Good thing about this code is even if your product is variant type (multiple type of single product) and has different percentage of offers for different variants then this code will take the best percentage out of the all variants and displays it. For example you have 3 product variant each has three different percentage 3%,4%,1% then it will display 4% in sales bubble.

Isn’t that cool ? Go on now.

Hebt u meer vragen? Een aanvraag indienen

Opmerkingen

Mogelijk gemaakt door Zendesk