Home › Forums › WoodMart support forum › Brand Icons in Shop
Brand Icons in Shop
- This topic has 5 replies, 2 voices, and was last updated 6 months, 3 weeks ago by Hung Pham.
-
AuthorPosts
-
October 3, 2023 at 1:31 pm #501101
DELAYONParticipantHi 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 PhamKeymasterHi 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
DELAYONParticipantAwesome 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 PhamKeymasterHi 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
DELAYONParticipantHi 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 PhamKeymasterHi 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,
-
AuthorPosts
- You must be logged in to create new topics. Login / Register