MOVING THE SOLD OUT BADGE FOR 7.1 (PRODUCT STATUS)

Hi

I've found and added custom CSS to my 7.1 site in order to move the SOLD OUT badge on top of the product on the shop page, however, when i open the product its replicating the design and placing the sold out badge in a strange position. Without being able to edit the HTML anyone know what i can do so that i can change the position of the badge within the product page to somewhere .

Current shop page with sold out badge where i want it:

Current badge inside the product page NOT where i want it:

How, if i keep the badge within the product page it would be better for it to be positioned. Or im happy for it show in a different way, any suggestions welcome!

Here is my current code:

.product-mark.sold-out {
    background: #C98A36 !important;
    color: #EFEADA !important;
 font-family: 5TH AVENUE REG;
   letter-spacing: 2px;
  font-weight: 400;
 position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    padding: 15px;
  border-radius: 50%;
    width: 55px;
    height: 55px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

Thanks you!!

can anyone help me? desperately rattling my brain! Don't want to have to go back to the standard way...

try edit this

.product-mark.sold-out

to this

.view-list.product-mark.sold-out

On 12/5/2020 at 11:58 PM, tuanphan said:

try edit this

.product-mark.sold-out

to this

.view-list.product-mark.sold-out

 

Doing that just gets rid of the code work ive done completely, even on the front product page.
This is how it looked anyway before the code.
I dont mind if it looks like that when you go into the product but i want the circular badge to stay on the shop front product thumbnail

Any other suggestions?

Thanks!

ah sorry, need space between 2 class names. Change to this

.view-list .product-mark.sold-out

2 minutes ago, tuanphan said:

ah sorry, need space between 2 class names. Change to this

.view-list .product-mark.sold-out

YAY that worked! Thanks so much 🙂

18 minutes ago, tuanphan said:

ah sorry, need space between 2 class names. Change to this

.view-list .product-mark.sold-out

Just to double check then.. theres no way to have the circular badge inside the individual product page then, theres only option is to have it in a funny place or have the original version?

Thanks

try this code

.view-list .product-mark.sold-out {
    background: #C98A36 !important;
    color: #EFEADA !important;
 font-family: 5TH AVENUE REG;
   letter-spacing: 2px;
  font-weight: 400;
 position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    padding: 15px;
  border-radius: 50%;
    width: 55px;
    height: 55px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}
.view-item .product-mark.sold-out {
    background: #C98A36 !important;
    color: #EFEADA !important;
 font-family: 5TH AVENUE REG;
   letter-spacing: 2px;
  font-weight: 400;
    display: inline-block;
    padding: 15px;
  border-radius: 50%;
    width: 55px;
    height: 55px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

1 minute ago, tuanphan said:

try this code

.view-list .product-mark.sold-out {
    background: #C98A36 !important;
    color: #EFEADA !important;
 font-family: 5TH AVENUE REG;
   letter-spacing: 2px;
  font-weight: 400;
 position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    padding: 15px;
  border-radius: 50%;
    width: 55px;
    height: 55px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}
.view-item .product-mark.sold-out {
    background: #C98A36 !important;
    color: #EFEADA !important;
 font-family: 5TH AVENUE REG;
   letter-spacing: 2px;
  font-weight: 400;
    display: inline-block;
    padding: 15px;
  border-radius: 50%;
    width: 55px;
    height: 55px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

 

PERFECT!! It worked!!!
Thank you so much 🙂

This code works perfectly! 

Question: What do I need to change to move the sold tag to the left side of the image on the front page, and make it centre on the listing page?

Thanks!

22 hours ago, andreavictory said:

This code works perfectly! 

Question: What do I need to change to move the sold tag to the left side of the image on the front page, and make it centre on the listing page?

Thanks!

Can you share link to product in screenshot? We can check easier

Hi @tuanphan I used this customm css on my website and it looks like the images attached.

Can I have a rectangle instead of a circle like the post from above?
Can I have the SOLD OUT text all in one line instead of 2 lines?

Also, dont know why there is more padding under the text on my circle, can we make it look with even amount of space on all sides of the rectangle?

My shop page is: www.gastonduflos.com/shop

Thank you so much!

 

On 9/28/2023 at 8:00 AM, GastonDuflos said:

Hi @tuanphan I used this customm css on my website and it looks like the images attached.

Can I have a rectangle instead of a circle like the post from above?
Can I have the SOLD OUT text all in one line instead of 2 lines?

Also, dont know why there is more padding under the text on my circle, can we make it look with even amount of space on all sides of the rectangle?

My shop page is: www.gastonduflos.com/shop

Thank you so much!

 

Add this CSS under

.product-mark.sold-out {
    white-space: nowrap;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

On 10/1/2023 at 8:01 PM, tuanphan said:

Add this CSS under

.product-mark.sold-out {
    white-space: nowrap;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

Thanks @tuanphan any idea why the text on the product page is dark grey and in the shop page is white? Please see the image you attached above.

Page: https://www.gastonduflos.com/shop/p/sea-of-dreams

I'd like both texts to be white. This is how the code looks like:

// Sold Out Badge in shop page and product page //
.view-list .product-mark.sold-out {
    background: #121212 !important;
    color: white !important;
 position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    padding: 15px;
  border-radius: 50%;
    width: 55px;
    height: 55px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  
}
.view-item .product-mark.sold-out {
    background: #121212 !important;
    color: #white !important;
    display: inline-block;
    padding: 15px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
}

.product-mark.sold-out {
    white-space: nowrap;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

Thank you so much!

Because your color is incorrect, remove # symbol, it should be color: white !important;