label HOT and NEW

i want that the label new and Hot be above the sale label always !
1- always New first
2- hot
3- sale
and if i can make it in the right side ?
https://ibb.co/nN12ZnCL

Hello,

Can you please share the page URL so I can further check on your site and give you a possible solution?

Best Regards,

like you see the label sale is over the new label ! i want the opposite

Hello,

Please copy and paste the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* Hot (featured) – second */
.product-grid-item .product-label.featured {
    order: 2;
}

/* Sale – last */
.product-grid-item .product-label.onsale {
    order: 3;
}

/* Move labels to the right side */
.product-grid-item .product-labels {
    inset-inline-start: auto;
    inset-inline-end: 7px;
}

Best Regards,

[amar.karismatik2727]

i want this order
in the right side
1- new
2- hot (if its available with new, if new label not available then hot will be 1 )
3- sale
in the left side the icon of attribut alone (snow in the screenshot bellow)

• This reply was modified 3 days, 4 hours ago by amar.karismatik2727.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL where the hot label is showing too so I can further check on your site and give you a possible solution?

Best Regards,

its in many pages !

Hello,

Please remove the previous code and add the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* TEXT LABELS → PUSH TO RIGHT */
.product-grid-item .product-label:not(.label-with-img) {
    transform: translateX(calc(100% + 55px));
    align-self: flex-end;
    bottom: 30px !important;
    position: relative;
}

/* ORDER (RIGHT SIDE) */
.product-grid-item .product-label.new {
    order: 1;
}

.product-grid-item .product-label.featured {
    order: 2;
}

.product-grid-item .product-label.onsale {
    order: 3;
}

Best Regards,

i’m sorry can we do the oposite ?
new
hot
sale
in the left

the icon in the right ?
thank you and sorry

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* KEEP TEXT LABELS ON THE LEFT */
.product-labels {
    left: 7px;
    right: auto;
}

/* MOVE ATTRIBUTE IMAGE LABELS TO THE RIGHT */
.product-labels .product-label.label-with-img {
    position: absolute;
    right: -100%;
    left: auto;
    top: 0;
}

/* ORDER OF TEXT LABELS (LEFT SIDE) */
.product-labels .product-label.new {
    order: 1;
}

.product-labels .product-label.featured {
    order: 2; /* Hot */
}
.product-labels .product-label.onsale {
    order: 3;
}

Best Regards,

like you see the icon is not realy well in the right !!

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add the below given CSS code to Theme Settings > Custom CSS > Global CSS.

/* MOVE ATTRIBUTE IMAGE LABEL TO THE RIGHT EDGE */
.product-grid-item {
    position: relative;
}

.product-grid-item .product-label.label-with-img {
    position: absolute;
    right: 7px;
    left: 180px;
    top: 5px;
}

/* ORDER OF TEXT LABELS (LEFT SIDE) */
.product-labels .product-label.new {
    order: 1;
}
.product-labels .product-label.featured {
    order: 2; /* Hot */
}
.product-labels .product-label.onsale {
    order: 3;
}

Best Regards,

[Author]

Posts