Changing the position of the “New” label on the product page
-
Hello,
The “New” label appears on the left in the grid layout but on the right on the single product page. How can I make the label appear on the left on the single product page? Also, I’d like to make the label a bit larger—could you provide the CSS code to help with this?
The relevant image was sent from the private area
Hello,
Try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.
.single-product .woocommerce-product-gallery .product-labels[class*="labels-rounded"] {
inset-inline-end: 500px !important;
}
.single-product .woocommerce-product-gallery .product-labels.labels-rounded .product-label {
min-width: 80px !important;
min-height: 80px !important;
font-size: 40px;
}
Best Regards
These codes are broken, and the left alignment does not appear on the mobile version; it disappears. We kindly request that you develop a solution to allow the “New” tags to be adjustable in both mobile and desktop versions through the theme settings. This is an essential update for all users, as it is necessary to adjust the badge’s appearance on both mobile and desktop.
Hello,
Try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.
.single-product .woocommerce-product-gallery .product-labels[class*="labels-rounded"] {
left: 20px !important;
}
.single-product .woocommerce-product-gallery .product-labels.labels-rounded .product-label {
min-width: 80px !important;
min-height: 80px !important;
font-size: 40px;
}
Try adding the following Custom CSS in the mobile Custom CSS area under Theme Settings >> Custom CSS.
.single-product .woocommerce-product-gallery .product-labels[class*="labels-rounded"] {
left: 10px !important;
}
.single-product .woocommerce-product-gallery .product-labels.labels-rounded .product-label {
min-width: 60px !important;
min-height: 60px !important;
font-size: 30px;
}
Best Regards
.
