2018 December 30 Archive - EXEIdeas

WooCommerce is an excellent plugin which made WordPress an wonderful E-Commerce platform, You can implement almost any kind of E-Commerce store using it and its super easy to manage than any other dedicated E-Commerce platform available today.One good way to increase your sales is announcing a discount/offer on products, In WooCommerce you can easily set that by mentioning two different prices while creating the product page. If the discount is set WooCommerce by default displays a sale bubble on individual products page and in category pages. Usually the bubble sounds dumb it just says something like “Save!” or any other term which is surely boring.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. is_on_sale() && $product->product_type == 'variable') : ?> get_available_variations(); $maximumper = 0; for ($i = 0; $i 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 . '%' ); ?> is_on_sale() && $product->product_type == 'simple') : ?> regular_price - $product->sale_price ) / $product->regular_price ) * 100 ); echo $price . sprintf( __('%s', 'woocommerce' ), $percentage . '%' ); ?> Now lets style the bubble, Copy the following CSS codes to your theme’s style.css file.bubble { left: 0px; position: absolute; text-transform: uppercase; top: 20px; z-index: 9;}.bubble .inside { background-color: #e74c3c; border-radius: 999px; display: table; height: 42px; position: relative; width: 42px; -webkit-border-radius: 999px;}.bubble .inside .inside-text { color: #fff; display: table-cell; font-size: 14px; font-weight: bold; line-height: 14px; text-align: center; vertical-align: middle;}Thats it you just added a cool feature which has potential to increase your sales.The Advantage: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.