Title: elements123's Replies | WordPress.org --- # elements123 [ ](https://wordpress.org/support/users/elements123/) * [Profile](https://wordpress.org/support/users/elements123/) * [Topics Started](https://wordpress.org/support/users/elements123/topics/) * [Replies Created](https://wordpress.org/support/users/elements123/replies/) * [Reviews Written](https://wordpress.org/support/users/elements123/reviews/) * [Topics Replied To](https://wordpress.org/support/users/elements123/replied-to/) * [Engagements](https://wordpress.org/support/users/elements123/engagements/) * [Favorites](https://wordpress.org/support/users/elements123/favorites/) Search replies: ## Forum Replies Created Viewing 5 replies - 1 through 5 (of 5 total) * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[WooCommerce] Need help with aligning Woocommerce Sales Badge CSS](https://wordpress.org/support/topic/need-help-with-aligning-woocommerce-sales-badge-css/) * Thread Starter [elements123](https://wordpress.org/support/users/elements123/) * (@elements123) * [4 years, 1 month ago](https://wordpress.org/support/topic/need-help-with-aligning-woocommerce-sales-badge-css/#post-15577101) * Hi Abhinav, * Thank you for your quick reply. Not sure if it’s theme issue, but we are using Astra (Fashion Design) theme. I have deactivated the Maintenance Mode for you to look into it. * We have added this code to reflect percentage discount from original pricing. * ``` // Display the Woocommerce Discount Percentage on the Sale Badge for variable products and single products add_filter( 'woocommerce_sale_flash', 'display_percentage_on_sale_badge', 20, 3 ); function display_percentage_on_sale_badge( $html, $post, $product ) { if( $product->is_type('variable')){ $percentages = array(); // This will get all the variation prices and loop throughout them $prices = $product->get_variation_prices(); foreach( $prices['price'] as $key => $price ){ // Only on sale variations if( $prices['regular_price'][$key] !== $price ){ // Calculate and set in the array the percentage for each variation on sale $percentages[] = round( 100 - ( floatval($prices['sale_price'][$key]) / floatval($prices['regular_price'][$key]) * 100 ) ); } } // Displays maximum discount value $percentage = max($percentages) . '%'; } elseif( $product->is_type('grouped') ){ $percentages = array(); // This will get all the variation prices and loop throughout them $children_ids = $product->get_children(); foreach( $children_ids as $child_id ){ $child_product = wc_get_product($child_id); $regular_price = (float) $child_product->get_regular_price(); $sale_price = (float) $child_product->get_sale_price(); if ( $sale_price != 0 || ! empty($sale_price) ) { // Calculate and set in the array the percentage for each child on sale $percentages[] = round(100 - ($sale_price / $regular_price * 100)); } } // Displays maximum discount value $percentage = max($percentages) . '%'; } else { $regular_price = (float) $product->get_regular_price(); $sale_price = (float) $product->get_sale_price(); if ( $sale_price != 0 || ! empty($sale_price) ) { $percentage = round(100 - ($sale_price / $regular_price * 100)) . '%'; } else { return $html; } } return '' . esc_html__( 'up to -', 'woocommerce' ) . ' '. $percentage . ''; // If needed then change or remove "up to -" text } ``` * In my Additional CSS, I have used the following code to style the sales badge: * ``` /* Sales badge style */ .woocommerce span.onsale { padding: 1px 6px !important; border-radius: 0px !important; font-size: 13px !important; margin: 235px 195px 0px 0px !important; } @media (min-width: 100px) and (max-width: 1024px) { .woocommerce span.onsale { padding: 1px 3px 0px 0px !important; font-size: 8px !important; margin: 163px 180px 0px 0px !important; } } @media (max-width: 479px) { .woocommerce span.onsale { padding: 1px 3px !important; font-size: 8px !important; margin: 105px 80px 0px 0px !important; } ``` * Please advise if we are doing anything incorrectly. Thank you! * Forum: [Themes and Templates](https://wordpress.org/support/forum/themes-and-templates/) In reply to: [[OceanWP] Conflict with Paypal Payment Gateway](https://wordpress.org/support/topic/conflict-with-paypal-payment-gateway/) * Thread Starter [elements123](https://wordpress.org/support/users/elements123/) * (@elements123) * [5 years, 2 months ago](https://wordpress.org/support/topic/conflict-with-paypal-payment-gateway/#post-14221298) * Hi this has been resolved. πŸ™‚ * Forum: [Themes and Templates](https://wordpress.org/support/forum/themes-and-templates/) In reply to: [[OceanWP] Reduce spacing between product name and subheading](https://wordpress.org/support/topic/reduce-spacing-between-product-name-and-subheading/) * Thread Starter [elements123](https://wordpress.org/support/users/elements123/) * (@elements123) * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-spacing-between-product-name-and-subheading/#post-13842945) * Hi Abhishek, thanks for your help. These codes helped tremendously. Happy new year! - This reply was modified 5 years, 5 months ago by [elements123](https://wordpress.org/support/users/elements123/). * Forum: [Themes and Templates](https://wordpress.org/support/forum/themes-and-templates/) In reply to: [[OceanWP] Reduce spacing between product name and subheading](https://wordpress.org/support/topic/reduce-spacing-between-product-name-and-subheading/) * Thread Starter [elements123](https://wordpress.org/support/users/elements123/) * (@elements123) * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-spacing-between-product-name-and-subheading/#post-13824926) * Hi Abhishek, * Thank you for your help! It worked wonderfully. * I have another question: 1. I would like to know how I can reduce the spacing in between my product tabs (desktop version): [https://imgur.com/sQDpW56](https://imgur.com/sQDpW56) * 2. Make the tabs side by side on mobile resolution: [https://imgur.com/UkxP7lg](https://imgur.com/UkxP7lg) * Please advise, thank you. * Forum: [Themes and Templates](https://wordpress.org/support/forum/themes-and-templates/) In reply to: [[OceanWP] Reduce spacing between product name and subheading](https://wordpress.org/support/topic/reduce-spacing-between-product-name-and-subheading/) * Thread Starter [elements123](https://wordpress.org/support/users/elements123/) * (@elements123) * [5 years, 5 months ago](https://wordpress.org/support/topic/reduce-spacing-between-product-name-and-subheading/#post-13815481) * Hi Abhishek, * Thank you for your reply! I have disabled the maintenance mode. * Await for your reply. πŸ™‚ Viewing 5 replies - 1 through 5 (of 5 total)