Attributes

Hello, how can I make one attribute appear on the products on the store page? For example, each product color appears on the image on the store page.

https://prnt.sc/p2lYpObbdtMp

Hi, I just want to change the position to the lower left. See the picture.

Hello,

Navigate to Products > Attributes > create attribute > then add terms to created attribute – https://prnt.sc/tqzG6kgJCwEQ, https://prnt.sc/yq_ZcONu22_n

Edit the attribute itself – https://prnt.sc/ExOeF6K7T_U3 and enable the Show attribute label on products option – https://prnt.sc/7vckb4xRhteN. Then the attribute label will show on the product image.

Best Regards

Hello,

I have enabled the “Show attribute label on products” option, but I would like to change the position of the label to the bottom left of the image. Is that possible?
https://prnt.sc/dgi4qaptoqo9

Thank you.

Best regards.

Hello,

Can you please share the page URL so I will check and give you a possible solution.

Best Regards

.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.product-grid-item .product-label.attribute-label:not(.label-with-img) {
    position: relative !important;
    left: 320px !important;
     top: 350px
}

Best Regards

Hello,

Thank you for the suggested CSS. However, the label on the store page is not aligned consistently across the products, and on smaller product images, the label does not appear because it is outside the frame.

Can you please assist in adjusting the positioning so it works well for all product sizes and is uniformly displayed?

Best regards,

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.wd-tabs .product-label.attribute-label:not(.label-with-img) {
    position: relative !important;
    left: 99px !important;
    top: 100px !important;
}
   .product-label.attribute-label:not(.label-with-img) {
    position: relative !important;
    left: 200px !important;
    top: 200px;
}  

Best Regards

Thank you for the provided CSS. The label now appears on smaller products, but the alignment is inconsistent on the store page. When there are 3 labels on a product, the positioning differs from a product that has only 2 labels.
https://prnt.sc/5XO87um0Q6fy
Could you please assist in making the alignment consistent across all products regardless of the number of labels?

Best regards,

Hello,

Your images differ in size considerably. You need to upload images of the same size.

Best Regards

Hello,

Thank you for your reply.

I would like to clarify that all the images on the site are the same size. However, as I mentioned earlier, the issue arises because some products have two labels (e.g., “New Product” and “Best Seller”), while others have only one label (“Best Seller”). This is why the labels appear misaligned. If you take a closer look at the image, you’ll notice this difference.

Best regards,

Attachments:

You must be logged in to view attached files.

Hello,

Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS for archive pages.

.post-type-archive-product .product-label.attribute-label:not(.label-with-img) { 
    position: absolute !important; 
    left: 100px !important; 
    top: 180px !important; 
    width: 70px;
}

Best Regards

[Author]

Posts