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