Ihr kennt ja bei WooCommerce diese Badges über den Bildern wenn zum Beispiel etwas in Aktion ist. Ihr habt euch sicher schon gefragt, wie das geht. Nun entweder verwendet ihr ein spezielles Plugin dafür (zb YITH WOOCOMMERCE BADGE MANAGEMENT) oder ihr macht es via function.php File
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*
* Adds a new badge to product entry for any product added in the last 30 days.
* Simply add to child theme's functions.php file then add some css to your site to style it.
* If you want the badge to be a part of the "equal height" content then use 'PHP_INT_MAX' for the
* priority instead of 20
*
*/
add_action( 'woocommerce_before_shop_loop_item_title', function() {
$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 '<div class="woo-entry-new-badge">' . esc_html__( 'New', 'total' ) . '</div>';
}
}, 20 ); |
Und nachher einfach noch mit CSS den Badge stylen. Als Beispiel habe ich das gleiche Badge design genommen wie der Aktions Badge
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .woo-entry-new-badge {
position: absolute;
z-index: 3;
top: 10px!important;
left: 10px!important;
min-width: 0!important;
min-height: 0!important;
margin: 0!important;
padding: 6px 18px!important;
-webkit-border-radius: 3px!important;
-moz-border-radius: 3px!important;
border-radius: 3px!important;
color: #fff; /* SCHRIFT-FARBE */
background: #ef8f61!important; /* BADGE HINTERGRUND */
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
text-shadow: none!important;
font-size: 20px;
font-weight: 500!important;
line-height: inherit!important;
} |
So könnten die Badges dann aussehen
Natürlich könnt ihr auch selbst mit CSS was hexen – die Klasse heisst einfach .woo-entry-new-badge 🙂 viel Spass
0 Kommentare