Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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/
<?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
}
@dako76
Copy link

dako76 commented Mar 9, 2021

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; }

@damiencarbery
Copy link
Author

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.

@phonoxify
Copy link

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

@katerina-cz
Copy link

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

@absentio
Copy link

absentio commented Feb 3, 2022

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

@damiencarbery
Copy link
Author

@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'.

@absentio
Copy link

absentio commented Feb 4, 2022

@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.

@damiencarbery
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment