Home › Forums › WoodMart support forum › Brand Icons in Shop

Brand Icons in Shop

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 3, 2023 at 1:31 pm #501101

    DELAYON
    Participant

    Hi there!

    Is there a possibility to move the brand icons on the product picture? We’d like to move the icons (only icons, not the sale or new tags) to the bottom of the image and display them horizontally.
    Currently the icons are blocking the clear view on our products.
    thanks in advance!

    Attachments:
    You must be logged in to view attached files.
    October 4, 2023 at 10:30 am #501417

    Hung Pham
    Keymaster

    Hi DELAYON,

    Thanks for your patience.

    In order to place attribute icons bottom as shown in the screenshot https://prnt.sc/QmIH8LJC6cHz You can add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

    .product-grid-item .product-labels {
	bottom: 15px;
}

.product-grid-item .product-labels :is(.onsale, .new, .featured, .out-of-stock) + .attribute-label {
	margin-top: auto;
}

    But I can’t place them horizontally since they share a same wrapper, and changing that HTML structure is impossible with the use of simple custom CSS code.

    Regards,

    October 6, 2023 at 2:28 pm #502233

    DELAYON
    Participant

    Awesome thanks!

    What do i need to add to the product-labels :is(.onsale, .new, .featured, .out-of-stock) to have it work for all products even without labels? Just to make sure it looks equal 🙂

    October 7, 2023 at 7:21 am #502384

    Hung Pham
    Keymaster

    Hi DELAYON,

    Above code works when product has one of these badges, in order to make it works with all products even without these badges, you can add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

    .product-grid-item:not(.sale,.featured, .out-of-stock) .product-labels{
	top: auto;
	bottom: 15px;
}

.product-grid-item .product-labels:has(span.new){
	top: 15px !important;
}

    Regards,

    October 9, 2023 at 4:48 pm #502775

    DELAYON
    Participant

    Hi there!

    Thanks for the response.
    Currently it’s showing all brand labels the same as it did with the first code. I copied my global CSS in the field below. Not sure if this might have any influence…

    Attachments:
    You must be logged in to view attached files.
    October 10, 2023 at 8:22 am #502891

    Hung Pham
    Keymaster

    Hi DELAYON,

    I tested and it worked well on my end https://prnt.sc/8rASd2D_Nmc9

    Please remove all Custom CSS and try below one.

    .product-grid-item .product-labels {
	bottom: 15px;
}

.product-grid-item .product-labels :is(.onsale, .new, .featured, .out-of-stock) + .attribute-label {
	margin-top: auto;
}

.product-grid-item:not(.sale,.featured, .out-of-stock) .product-labels{
	top: auto;
}

.product-grid-item .product-labels:has(span.new){
	top: 15px;
}

    Regards,

    September 10, 2024 at 11:33 am #596378

    DELAYON
    Participant

    Hi there!
    Checking in on this subject again…
    So after a year of working fine, we ran into some issues on this subject again. It´s getting a big crowdy and the icons are blocking our product pictures. So we’ve been thinking a bit about possible solutions:
    1. Where do we find the HTML code that sets the wrapper for the icons?
    2. Would it be possible to get extra space between the image and the product title?
    3. We saw that the icons have a white background on desktop version, but no background on mobile. Is it possible to remove the background color?

    thanks,

    Nico

    Attachments:
    You must be logged in to view attached files.
    September 11, 2024 at 7:41 am #596578

    Hung Pham
    Keymaster

    Hi DELAYON,

    To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

    Regards,

    September 16, 2024 at 3:26 pm #597738

    DELAYON
    Participant

    Hi Hung Pham!

    Thanks for the reply. Please find the info below.

    thanks

    September 18, 2024 at 8:40 am #598137

    Hung Pham
    Keymaster

    Hi DELAYON,

    First of all, I’m really sorry have taken long time to reply you.

    Admin credential is incorrect, please check again.

    Regards,

    October 14, 2024 at 1:18 pm #604826

    DELAYON
    Participant

    Hi there!

    Please check the updated info below:

    October 14, 2024 at 1:19 pm #604827

    DELAYON
    Participant

    Hi there!

    Thanks for the patience. Please check the updated info below:

    October 15, 2024 at 11:38 am #605102

    Hung Pham
    Keymaster

    Hi DELAYON,

    Thanks for details.

    1. Can you please describe in more details why do want to know the wrapper? this will allow me to thoroughly investigate and address your concerns more efficiently.

    2. Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Mobile section:

    .wd-product h3.wd-entities-title {
	margin-top: 20px;
}

    3. I checked site on Desktop and Mobile, icons in both devices have no background color, please let me know if you fixed it.

    Regards,

    October 25, 2024 at 12:14 am #607486

    DELAYON
    Participant

    Hi there!

    1. So we have the general issue, that the page looks extremely crowded, especially on mobile, as you can see from the picture below. Is it possible to limit the color swatches and price to one line?
    The brand icons are also covering the actual product. Would it be possible to deploy them in one line, similar to the color swatches?
    Or is there a possibility to hide the icons on mobile devices?

    2. thanks!

    3. No we didn’t fix anything. It seams that the white background appears depending on the screen ratio or device. We did see some Android devices where the icons did have a white background.

    Attachments:
    You must be logged in to view attached files.
    October 26, 2024 at 12:09 pm #607758

    Hung Pham
    Keymaster

    Hi DELAYON,

    Thanks for your patience.

    1. Please add this code to the Theme Settings > Custom CSS > Custom CSS for Mobile to decrease its size and hide brand icons:

    div.wd-swatches-grid.wd-size-m {
	--wd-swatch-size: 12px;
}

.attribute-label.product-label{
	display: none;
}

    3. There is no background color options for screen ratios. Can you please purge cache and check again?

    Regards,

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)