WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce Sold Out Products
[resolved] How to replace standard background with costum image? (5 posts)

  1. LogoLogics
    Member
    Posted 4 months ago #

    Hi,

    Hello Gerhard,

    I would like to be able to replace the standard background circle with one of my own? How can I do that please?

    Client would like a custom one and it does not seem to be an image that simply can be replaced, so I wonder if and how that could be done please?

    Thx,
    Annie

    http://wordpress.org/plugins/woocommerce-sold-out-products/

  2. LogoLogics
    Member
    Posted 4 months ago #

    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:

    http://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

  3. LogoLogics
    Member
    Posted 2 months ago #

    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(' http://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

  4. Gerhard
    Member
    Plugin Author

    Posted 2 months ago #

    Thanks for posting the resolution Annie.

  5. LogoLogics
    Member
    Posted 2 months ago #

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

    Annie

Reply

You must log in to post.

About this Plugin

About this Topic