Change the 'Out of stock' banner in Flatsome theme to 'Sold'
I found that the grid used the ‘Products’ element in UX Builder. This uses the [ux_products] shortcode and does not use the ‘flatsome_woocommerce_shop_loop_images’ hook.
To accommodate this I made a few additions: 1) add a check whether [ux_products] shortcode in use, 2) if there then change the ‘Out of stock’ div to ‘Sold’, 3) don’t use the CSS to hide ‘Out of stock’ div, just rotate it.
A client that hires out dresses and sells second hand designer items uses the Flatsome theme. When a second hand item is sold we want it marked as Sold instead of Out of Stock.
Hard coded in the theme
I searched the Flatsome theme files for “out-of-stock-label” (the class used on the label) and found that the markup is added in a WooCommerce template override. As the template has a lot of other markup, overriding the file would be a maintenance nightmare in the future.
I decided to add my own markup for that element and then hide the original element.
The Flatsome action
Flatsome is a powerful theme. It overrides a lot of the WooCommerce template files (its ‘woocommerce‘ templates overrides directory has about 100 files; WooCommerce’s ‘templates‘ directory has over 140 files).
After looking at the product archive markup I found that the ‘flatsome_woocommerce_shop_loop_images‘ action adds the product thumbnail for each product. I added my new markup here. I gave it the same class, ‘out-of-stock-label‘, as the ‘Out of Stock’ markup so that I could get the same position and look. I added a ‘sold-label‘ class so that I could distinguish it after hiding the original label.
I rotated the label to liven it up a bit.
To be thorough I also changed the ‘Out of Stock’ text on the single product page to ‘Sold.’
Extra conditions
You can see that each function has a check whether the product is in the ‘Hire‘ category. For those products it is marked as ‘Unavailable‘ (to hire) rather than sold. You can add similar checks for your site.
The code
If the code does not show it is available at flatsome-out-of-stock-to-sold.php.
This looks really helpful. Which file are you inserting this code into? Thanks.
Thanks! You are a big person!
@RD: I have a video of how to use my code snippets that should help you. (I keep planning to add that link to the bottom of each post).
Hi, Great hack and worked perfectly! However if we want to have this “Sold” label on single product page image, how’s that possible? Looking forward for the solution, thanks in advance.
@Muneeb – Adding the label to the single product page is much more difficult.
For a simple product it may not be too hard but there could be conflicts with plugins that change the product image.
For variable products you cannot display the label because some variations may be available.
Thank you very much, it is helpful.
Can you make a video on how to do this?
@Lauren: Are you asking about where to put the code? I put that into a video of how to use my code snippets: https://www.damiencarbery.com/2018/10/how-to-use-my-code-snippets/
Great work, how i change color form background/font to green/white?
@Daniel: Use the following CSS:
.box-image .out-of-stock-label { background-color: green; color: white; }Hi I have used this code, it hides the out of stock banner but for some reason does not show the sold out one. I am not sure where to start in debugging this. What should i do?
I see that the Products grid uses the [ux_products] shortcode and this does not use the ‘flatsome_woocommerce_shop_loop_images’ hook. I have made a few additions to the code: 1) add a check whether [ux_products] shortcode in use, 2) if there then change the ‘Out of stock’ div to ‘Sold’, 3) don’t use the CSS to hide ‘Out of stock’ div, just rotate it.
Im not following what you mean by the updates are. Im also not seeing the out of stock label after installing the plugin
Could you explain what needs to change
@Gerry – I made the changes I listed, they are all in the latest version of the code, version 0.2. You do not have to make any edits.
Very useful ! It’s a shame that Flatsome doesn’t display the default “woocommerce_get_availability_text”. Your code helped me fix this. Thank you !
Thanks for the comment. You could submit a bug report to Flatsome to ask them to use the “woocommerce_get_availability_text” filter on the archive pages – it would make my code simpler. The function and filter are called on single product pages and my code uses that.
This is a great help and doing this with a plugin makes it update proof. Tanks very much.
YOU SOLVED MY NIGHMARE MAN! THANKS A LOT FOR YOUR GREAT INSTRUCTION!
Please let me know where it should be added.
@Robert: I made a video of how to use my code snippets: https://www.damiencarbery.com/2018/10/how-to-use-my-code-snippets/
Hi. i have a bug that seems to be making the sold label stay on top of the header as you scroll up.
Looking at your site I can see that the z-index of the menu bar is 9 and the header section is 30. So, please try changing the z-index in the code to 8 (I see it’s set to 200 at the moment).