How to display product labels in center instead of in the left?

Hi Team,

I’d like the product labels/badges (e.g., New, Promo) to be horizontally centered over the product image instead of left-aligned. I saw a previous ticket suggesting margin-left: 40%, but that only shifts the block and doesn’t work correctly when there are two labels—they stack vertically instead of staying on one line. And I need it to work this way in grid and on product page.

Whether there is one or two labels, they should always appear in a single row, centered horizontally. I tried multiple times with different css but it still doesnt work well I cant center them when they are inline.

Hi pattiealeksandra,

Thanks for reaching to us and appreciate your patience.

Provide me with the mockup of the styles that you try to achieve and we’ll send proper instructions if it’s possible.

Kind Regards,
Hung PD

Hi yes of course, mockup below.

Attachments:

You must be logged in to view attached files.

Hi,

Thank you for providing the desired look. We are more than confident that this appearance can be achieved using some custom CSS code.

To prepare code that would work for you right away, we need to look at your website to understand how your grid and single product pages are set up. Please provide us with a link to your site.

Kind Regards

thank you 🙂 access in private content

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .wd-page-wrapper .product-labels {
	top: -13px;
	inset-inline: 0 !important;
	gap: 20px;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	max-width: 100%;
}

body .wd-page-wrapper .product-label {
	margin: 0;
}

body .product-element-top {
	overflow: visible;
}

body .product-element-top .hover-img {
	overflow: hidden;
	border-radius: inherit;
}

body .product-element-top:hover .hover-img {
	transform: scale(1);
}

body .product-element-top .hover-img img {
	transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}

body .product-element-top:hover .hover-img img {
	transform: scale(1.09);
}

Kind Regards

Ahhh works perfect, thank you so much! 🙂 you’re the best, as always

You are welcome!

[Author]

Posts