How to replace standard background with costum image?

Maybe I can help someone else with this, but I got this answer from Gerhard:

Basically to add a image you are going to have to upload the image to your theme’s folder and then add the following css to your theme custom.css file and replace image.png with the filename of your image

.woocommerce span.soldout, .woocommerce-page span.soldout {
background-image: url(‘image.png’);
}

Unfortunately I did not get our own image to appear, I am probably doing something wrong inserting the image location.

If someone else knows a solution?
This is the link to my costum image:

https://www.logologics.nl/Atest2/wp-content/themes/canvas-child-01/images/Uitverkocht.png

I tried a lot of variations adding this to Gerhards code, but it does not work. I dont know where in my themes folder I should put the image? IN the images folder, but that does not work, random in that folder, does not work….

Any help would be appreciated!

Annie

Hi,

For those who are also struggling to find this solution I put the steps ( kindly provided to me by Gerhard ) here as well:

First remove the standard text ( if you want to use a costum image with your own text in it ) by adding the following code to your theme’s functions.php file:

add_filter( 'woocommerce_sold_out_flash', 'wc_custom_sold_out_flash' );
function wc_custom_sold_out_flash() {
    return '<span class="soldout"></span>';
}

Upload your image to your ( preferably child themes folder )
In my example I use my own location, this ofcourse needs to be replaced with your own on your domain and folder.

Then add this code to your custom css:

.woocommerce span.soldout, .woocommerce-page span.soldout {
    background: url(' https://www.logologics.nl/Atest2/wp-content/themes/canvas-child-01/images/Uitverkocht.png');
    z-index: 999;
width: 100px;
height: 35px;
border-radius: 0;
padding: 0;
}

You can always change the image.

Make sure you give the new image the exact same name as the first one ( which is in your link ) or change the name of the image in your code .

You can change the px of hight and width to your preference.
Changing the border radius will alter the shape to an ovale.

I hope this helps others!

Annie

Thanks for posting the resolution Annie.

Glad I can help others, like you were kind enough to help me out!

Annie