// This adds "New" badge on your product image add_action( 'woocommerce_before_single_product_summary', 'new_product_button' , 20); add_action( 'woocommerce_before_shop_loop_item_title', 'new_product_button' , 20); function new_product_button() { $postdate = get_the_time( 'Y-m-d' ); // Post date $postdatestamp = strtotime( $postdate ); // Timestamped post date $newness = 30; // Newness in days if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $postdatestamp ) { echo '<span class="onsale1">' . esc_html__( 'New', 'total' ) . '</span>'; } } // This adds "featured" product badge on your product image function wc_add_featured_product_flash() { global $product; if ( $product->is_featured() ) { echo '<span class="onsale2">Featured</span>'; } } add_action( 'woocommerce_before_shop_loop_item_title', 'wc_add_featured_product_flash', 10 ); add_action( 'woocommerce_before_single_product_summary', 'wc_add_featured_product_flash', 10 ); // Show save percentage instead of "sale" text add_filter('woocommerce_sale_flash', 'woo_savings_on_sales_flash'); function woo_savings_on_sales_flash() { global $post, $product; if ( ! $product->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)){ //then this is a variable product $available_variations = $product->get_available_variations(); $variation_id=$available_variations[0]['variation_id']; $variation= new WC_Product_Variation( $variation_id ); $regular_price = $variation ->regular_price; $sale_price = $variation ->sale_price; } $savings = ceil(( ($regular_price - $sale_price) / $regular_price ) * 100); $sale_flash = '<span class="onsale"> - ' . $savings . '%</span>'; return $sale_flash; }
.woocommerce span.onsale { left: 0; top: -10; font-weight: 600 !important; min-width: 100px !important; text-align: center; } .woocommerce ul.products li.product .onsale { left: 0; font-weight: 600; top: -10px; min-width: 100px !important; text-align: center; } /* "New" badge which has class .onsale1 */ .woocommerce span.onsale1 { position: absolute; background-color: rgba(46,140,97,0.8) !important; color: #fff !important; padding: 8px 12px; text-transform: uppercase; font-size: 12px; text-align: center; line-height: 1; font-weight: 600; z-index: 9; top: 0px; left: 0px !important; height: 52px; width: 52px; border-radius: 50%; padding-top: 20px; } /* "New" badge on archive pages. Based on your theme you have to adjust how your "New" badge appears on different screen sizes */ @media only screen and (max-width: 600px) { .woocommerce ul.products li.product .onsale1 { top: 5px; left: 78% !important; } } @media only screen and (min-width: 601px) and (max-width: 1023px) { .woocommerce ul.products li.product .onsale1 { top: 5px; left: 80% !important; } } @media only screen and (min-width: 1024px) { .woocommerce ul.products li.product .onsale1 { top: 5px; left: 84% !important; } } /* "New" badge on simple product pages. Based on your theme you have to adjust how your "New" badge appears on different screen sizes */ @media only screen and (max-width: 600px) { .woocommerce span.onsale1 { top: 5px; left: 300px !important; } } @media only screen and (min-width: 601px) and (max-width: 667px) { .woocommerce span.onsale1 { top: 5px; left: 410px !important; } } @media only screen and (min-width: 668px) and (max-width: 767px) { .woocommerce span.onsale1 { top: 5px; left: 450px !important; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .woocommerce span.onsale1 { top: 5px; left: 180px !important; } } @media only screen and (min-width: 960px) and (max-width: 1023px) { .woocommerce span.onsale1 { top: 5px; left: 260px !important; } } @media only screen and (min-width: 1024px) and (max-width: 1170px) { .woocommerce span.onsale1 { top: 5px; left: 300px !important; } } @media only screen and (min-width: 1171px) { .woocommerce span.onsale1 { top: 5px; left: 370px !important; } } /* "Featured" badge which has class .onsale2 */ .woocommerce span.onsale2 { position: absolute; min-width: 100px !important; background-color: #ffcc00; color: #000; padding: 8px 12px; text-transform: uppercase; font-size: 12px; line-height: 1; font-weight: 600; z-index: 9; text-align: center; top: 20px; left: 0px; background: #ffcc00; color: #000; } .woocommerce ul.products li.product .onsale2 { top: 20px; left: 0; min-width: 100px !important; }
In case of any complain or © copyright or issues please check disclaimer page for faster resolutions.
Block malicious web traffic
Sucuri firewall The internet is full of malicious actors. There are low-level annoyances like “scriptread more...
Every website needs hosting
SiteGround hosting Every website needs hosting. Unless you happen to operate a web hosting agency,read more...
Google analytics is a free service provided by Google
Google Analytics Google analytics is a free service provided by Google that helps webmasters, siteread more...
Het snelste en beste webshopplatform Woocommerce
In case of any complain or © copyright or issues please check disclaimer page forread more...
E-commerce webshop
E-commerce is a booming industry worldwide. The advent of the internet and the rapid, sustainedread more...
WP Rocket is the best way to boost your site
WP Rocket Plugin WP Rocket is a WordPress plugin that facilitates faster page loads andread more...
Why should you use Cloudways?
Cloudways hosting Web hosting is an essential service for any internet-based or internet-interfaced business. Whetherread more...
Search engine optimization by Yoast
Yoast Plugin Search Engine Optimization (SEO) can be a very technical field. It is alsoread more...
Wat is het verschil tussen UX en UI?
UI-design en UX-design In de wereld van webdesign, maar ook in het ontwikkelen van softwareread more...
Create a multilingual wordpress site
Translatepress plug-in The internet is truly global in nature. An internet user in the Netherlandsread more...
Verify that Google can find your page
Google Search console Google Search Console is a free tool from Google that helps youread more...