Product attribute label position change

In the product grid, please help me place the attribute label of the product tag in the top right corner.

Attachments:

You must be logged in to view attached files.

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for desktop section:

.product-labels .product-label.attribute-label:not(.label-with-img) {
   bottom: 3px !important;
   position: relative !important;
   left: 120px !important;
} 

Best Regards.

Thank you very much, but it is still not neat, please help me check

Attachments:

You must be logged in to view attached files.

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for desktop section:

.product-labels {
    position: relative !important;
}

.product-labels .product-label.onsale {
    position: absolute !important;
    min-width: 50px !important;
}

.product-labels .product-label.attribute-label:not(.label-with-img) {
    position: absolute !important;
    left: 95px !important;
padding: 5px 10px !important;
    min-width: 100px !important;
}

Best Regards.

I would like to know if it is possible to swap the positions of the Sale label and the Attribute label

Please help me again thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for desktop section:

.product-labels {
    position: relative !important;
}

/* Style for the sale label, now placed in the top right corner */
.product-labels .product-label.onsale {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 140px !important;
}

/* Style for the attribute label, now placed in the top left corner */
.product-labels .product-label.attribute-label:not(.label-with-img) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    min-width: 50px !important;
}

Best Regards.

I made a demo with the Sale tag at the bottom and the Attribute tag at the top, just like in the picture.

Attachments:

You must be logged in to view attached files.

Hello,

Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for desktop section:

.product-labels {
    position: relative !important;
}

.product-labels .product-label.attribute-label:not(.label-with-img) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    min-width: 100px !important;
}

.product-labels .product-label.onsale {
    position: absolute !important;
    top: 30px !important; /* Adjust this value based on the height of the attribute label */
    left: 0 !important;
    min-width: 50px !important;
    padding: 5px 10px !important;
}

Best Regards.

OK, thank you very much. I am implementing this custom CSS now, but the single product page label is not in the normal position.

.product-labels {
    position: relative !important;
}

/* Style for the sale label, now placed in the top right corner */
.product-labels .product-label.onsale {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 165px !important;
}

/* Style for the attribute label, now placed in the top left corner */
.product-labels .product-label.attribute-label:not(.label-with-img) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    min-width: 50px !important;
}

Attachments:

You must be logged in to view attached files.

Hello,

Now check back your site and check the issue. I have modified the code on your site.

Best Regards.

Thanks a lot, all is well, this ticket can be closed

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts