Change Flatsome theme 'Out of Stock' label to 'Sold' - Change the 'Out of stock' banner in Flatsome theme to 'Sold'. https://www.damiencarbery.com/2020/06/change-flatsome-theme-out-of-stock-label-to-sold/

flatsome-out-of-stock-to-sold.php

<?php
/*
Plugin Name: Change Flatsome theme 'Out of Stock' label to 'Sold'
Plugin URI: https://www.damiencarbery.com/2020/06/change-flatsome-theme-out-of-stock-label-to-sold/
Description: Change the 'Out of stock' banner in Flatsome theme to 'Sold'. Also works when [ux_products] shortcode is used.
Author: Damien Carbery
Author URI: https://www.damiencarbery.com
Version: 0.3
*/


// Return whether a product is in the Hire category.
function is_hire_category( $product_id ) {
	if ( has_term( array( 'hire' ), 'product_cat', $product_id ) ) {
		return true;
	}
	return false;
}


// Add 'Sold' banner if product is out of stock. CSS will hide the 'Out of Stock' div.
add_action( 'flatsome_woocommerce_shop_loop_images', 'dcwd_add_sold_label' );
function dcwd_add_sold_label() {
	global $product;
	
	if ( ! $product->is_in_stock() ) {
		$message = 'Sold';
		// Mark hire items as Unavailable instead of Sold.
		if ( is_hire_category( $product->get_id() ) ) {
			$message = 'Unavailable';
		}

		echo '<div class="out-of-stock-label sold-label">'.$message.'</div>';
        // Add the CSS to hide the 'Out of Stock' div.
        add_action( 'wp_footer', 'dcwd_hide_out_of_stock_banner' );
	}
}


// Change the 'Out of Stock' text in the single product page too.
add_filter( 'woocommerce_get_availability_text', 'dcwd_get_availability_text', 10, 2 );
function dcwd_get_availability_text( $availability, $product ) {
	if ( ! $product->is_in_stock() ) {
		// Mark hire items as Unavailable instead of Sold.
		if ( is_hire_category($product->get_id() ) ) {
			return 'Unavailable';
		}
		return 'Sold';
	}

	return $availability;
}


// If the content has the [ux_products] shortcode then add the required CSS/JS to the footer.
add_filter( 'the_content', 'dcwd_check_ux_products_shortcode', 5 );
function dcwd_check_ux_products_shortcode( $content ) {
    if ( has_shortcode( $content, 'ux_products' ) ) {
        add_action( 'wp_footer', 'dcwd_change_out_of_stock_banner' );
        add_filter( 'the_content', 'dcwd_change_out_of_stock_text', 20 );
    }
    return $content;
}


// Filter the page content to change the 'Out of stock' div with a 'Sold' one.
function dcwd_change_out_of_stock_text( $content ) {
    return str_replace( '<div class="out-of-stock-label">Out of stock</div>', '<div class="out-of-stock-label sold-label">Sold</div>', $content );
}


// Rotate the label with CSS.
function dcwd_change_out_of_stock_banner() {
?>
<style>
/* Rotate the 'Sold' label. */
.row-masonry .out-of-stock-label.sold-label { /*opacity: 0.9;*/ transform: rotate(-20deg); width: 110%; margin-left: -5%; z-index: 10; }
</style>
<?php
}


// Hide the 'Out of Stock' banner and show the 'Sold' one.
//add_action( 'wp_footer', 'dcwd_hide_out_of_stock_banner' );
function dcwd_hide_out_of_stock_banner() {
?>
<style>
/* Hide 'Out of stock' message and show new 'Sold' one. */
.box-image .out-of-stock-label { opacity:0;}
/* Rotate the 'Sold' label. */
.box-image .out-of-stock-label.sold-label { opacity: 0.9; transform: rotate(-20deg); width: 110%; margin-left: -5%; z-index: 10; }
</style>
<?php
}

Can you add this Line on row 20 for changing color of the badge?

.box-image .out-of-stock-label.sold-label { opacity: 0.7; transform: rotate(-20deg); width: 110%; margin-left: -5%; z-index: 200; color: white; background-color: green; }

Can you add this Line on row 20 for changing color of the badge?

.box-image .out-of-stock-label.sold-label { opacity: 0.7; transform: rotate(-20deg); width: 110%; margin-left: -5%; z-index: 200; color: white; background-color: green; }

That's perfect - great suggestion.

Thank you very much for the code! Works fine on my webshop!

Thank you! I changed the label to "Coming Soon" 👍

How to show "Unavailable" within shortcode [ux_products] loop?

@absentio: That should already be working - the dcwd_change_out_of_stock_text() function changes 'Out of stock' to 'Sold'. You can change 'Sold' to 'Unavailable'.

@damiencarbery yes, that works but you can have just one between "Sold" and "Unavailable" and not both. I would like to get both like in shop page.

@absentio : Can you contact me via https://www.damiencarbery.com/contact/ - I would like to see a page with both Sold and Unavailable to see how the markup differs. That will help me figure out what code to change.

Something broke with latest WP update (6.6). Doesn't work anymore on items that are being lazy-loaded.

Something broke with latest WP update (6.6). Doesn't work anymore on items that are being lazy-loaded.

I cannot reproduce this error. Here's screenshots of an Out of Stock product when the plugin is active and when it is in active.
https://snipboard.io/OW6odx.jpg

Please contact me via https://www.damiencarbery.com/contact/ if you want to investigate this further.