Clarilou Posted March 24, 2021 Share Posted March 24, 2021 Site URL: https://www.amovintage.com Hello, I am looking to use a custom made image (jpeg) to replace the sold out button throughout my website, is there a code to do this? I have attached what it currently looks like, and an example of the sort of image I want to create and upload Thankyou Link to comment
tuanphan Posted March 25, 2021 Share Posted March 25, 2021 Hi, First find this code & change background to background-color .view-list .product-mark.sold-out { background: #000 !important; color: #fff !important; font-family: FUTURACUSTOM; letter-spacing: 0px; line-height: 0px; font-size: 16px; position: absolute; transform: rotate( -20deg ); top: 10px; right: 10px; display: center; padding: 20px; border-radius: 100%; width: 20px; height: 20px; justify-content: center; align-items: center; text-align: center; display: flex; } Next, add this code /* Sold out badge image */ .product-mark.sold-out { background-image: url(https://cdn.pixabay.com/photo/2021/01/04/12/07/cat-5887341__340.jpg) !important; background-size: cover; color: transparent !important; background-repeat: no-repeat; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sofia62 Posted January 10 Share Posted January 10 Hello. I tried to use the same exact code but It doesn't seem to work properly on my website. What am I doing wrong? Site url: www.voodoo-warehouse.com Link to comment
tuanphan Posted January 12 Share Posted January 12 use the code .view-list .product-mark.sold-out { background-color: #000 !important; color: transparent !important; font-family: FUTURACUSTOM; letter-spacing: 0; line-height: 0px; font-size: 16px; position: absolute; transform: rotate(-20deg); top: 10px; right: 10px; display: center; padding: 20px; border-radius: 100%; width: 20px; height: 20px; justify-content: center; align-items: center; text-align: center; display: flex } .product-mark.sold-out { background-image: url(https://static1.squarespace.com/static/6294f8aa0bbab5232bb56b51/t/659ecddad08dad14354261df/1704906202442/2+copia.jpg) !important; background-size: cover; color: transparent !important; background-repeat: no-repeat } @media screen and (min-width: 768px) { .ProductItem .ProductItem-details .product-mark.sold-out { position:absolute; top: 0%; left: -75%; z-index: 9999; width: 70px; height: 70px } } @media screen and (max-width: 767px) { .ProductItem .ProductItem-details .product-mark.sold-out { position:absolute; top: -45% !important; left: 0; z-index: 9999; width: 50px; height: 50px } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment