Change the 'Out of stock' banner in Flatsome theme to 'Sold'
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.’
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.
If the code does not show it is available at flatsome-out-of-stock-to-sold.php.