By default, WooCommerce only shows labels for products that are out of stock and on sale. But what if you want to create custom product labels? For example, a “New” label for newly posted products, or a “Featured” label for featured products.
If that’s your need, then this is the article for you. Let’s start with me!
Show “New” label for product
With the help of the code here below, you can display the “New” label for new products posted within 30 days.
// archive
add_action( 'woocommerce_before_shop_loop_item_title', 'hk_product_new_badge', 3 );
function hk_product_new_badge() {
global $product;
$newness_days = 30; // Number of days the badge is shown
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) ' . esc_html__( 'Mới', 'woocommerce' ) . '';
}
}
// single product page
add_action( 'woocommerce_single_product_summary', 'hk_single_product_new_badge', 1 );
function hk_single_product_new_badge() {
global $product;
$newness_days = 30; // Number of days the badge is shown
$created = strtotime( $product->get_date_created() );
if ( ( time() - ( 60 * 60 * 24 * $newness_days ) ) ' . esc_html__( 'Mới', 'woocommerce' ) . '';
}
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span>
</div>
Please put the above code in the file functions.php . Also, if you want to change from 30 days to another number of days, you can change the $newness_days variable .
Now, you just need to use CSS to style it beautifully. You can try the style I suggest below.
.hk-woo-card-extra.new-badge {
position: absolute;
background: #E54C60;
color: #fff;
font-weight: 700;
text-transform: uppercase;
border-radius: 50px;
font-size: 10px;
padding: 5px;
right: 15px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
top: 110px;
}
.hk-itsnew {
background: #f37b21;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
color: #fff;
margin-top: 15px;
float: right;
top: 15px;
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span>
</div>
Show “Featured” label for featured product
If you consider any product as a featured product, the code below will automatically add the “Featured” label to that product.
// archive
add_action( 'woocommerce_before_shop_loop_item_title', 'hk_product_featured_badge', 10 );
function hk_product_featured_badge() {
global $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Get productID
$product_id = $product->get_id();
// Returns an array containing the IDs of the featured products.
$featured_product_ids = wc_get_featured_product_ids();
// Checks if a value exists in an array
if ( in_array( $product_id, $featured_product_ids ) ) {
echo '<span class="featured-badge">Nổi bật</span>';
}
}
}
// single product page
add_action( 'woocommerce_single_product_summary', 'hk_single_product_featured_badge', 1 );
function hk_single_product_featured_badge() {
global $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Get productID
$product_id = $product->get_id();
// Returns an array containing the IDs of the featured products.
$featured_product_ids = wc_get_featured_product_ids();
// Checks if a value exists in an array
if ( in_array( $product_id, $featured_product_ids ) ) {
echo '<span class="featured1">Nổi bật</span>';
}
}
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span>
</div>
Similar to the above, please put the code in the file functions.php .
Then you can use CSS to style it beautifully. You can try the style I suggest below.
.featured-badge {
top: 20px;
left: 0px;
width: 100%;
background: #1e1e1e99;
color: #fff;
display: flex;
justify-content: center;
position: absolute;
z-index: 1;
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
}
.featured1 {
background: #fff000;
color: #000;
font-weight: 600;
text-transform: uppercase;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
margin-top: 15px;
float: right;
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span>
</div>
And this is the final result that you can achieve.
Epilogue
I hope you can apply this trick in the process of developing a sales website with WooCommerce. Especially when you need to create some products labeled “New” or “Featured” .
If you found this article useful, please comment and share this article. In addition, you can follow the WooCommerce Tutorials section and follow Facebook for more new knowledge.
