Home › Forums › WoodMart support forum › Attributes

Attributes

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 9, 2024 at 2:12 am #596018

    al2min
    Participant

    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

    September 9, 2024 at 3:30 am #596019

    al2min
    Participant

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

    September 9, 2024 at 12:17 pm #596121

    Aizaz Imtiaz Awan
    Keymaster

    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

    September 9, 2024 at 1:40 pm #596164

    al2min
    Participant

    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.

    September 9, 2024 at 4:15 pm #596236

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    Best Regards

    September 9, 2024 at 5:19 pm #596255

    al2min
    Participant

    .

    September 10, 2024 at 11:15 am #596370

    Aizaz Imtiaz Awan
    Keymaster

    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

    September 10, 2024 at 11:49 am #596382

    al2min
    Participant

    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.
    September 10, 2024 at 3:45 pm #596455

    Aizaz Imtiaz Awan
    Keymaster

    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

    September 10, 2024 at 4:41 pm #596481

    al2min
    Participant

    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,

    September 11, 2024 at 10:09 am #596634

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

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

    Best Regards

    September 11, 2024 at 11:01 am #596666

    al2min
    Participant

    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.
    September 11, 2024 at 1:13 pm #596707

    Aizaz Imtiaz Awan
    Keymaster

    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
Viewing 13 posts - 1 through 13 (of 13 total)