Change Color Swatch to Text - "Available in X Colors"

Use this script to include a text instead of the color swatches

 <script>
var __isp_options = __isp_options || { };

__isp_options.isp_serp_callback = function (data) {


$jquery_isp('li.isp_grid_product').each(function(){
let product_id = $(this).attr('product_id');
if(ISP_PRODUCTS[product_id].vra){

// add swatch count text 
var numItems = $jquery_isp(this).find('.isp_product_color_swatch .product-color-swatch').length; 
var colors = getAvailableColors(product_id);
var numsColor = colors.length;

if ($jquery_isp(this).find(".isp-custom-swatch-count").length === 0) {
if (numsColor > 1)
$jquery_isp(this).find(".isp_product_price_wrapper").after(`<div class="isp-custom-swatch-count">- AVAILABLE IN ${numsColor} COLOURS -</div>`)
}
}
});
}

function getAvailableColors(product_id){
let colors = [];
for(let variant in ISP_PRODUCTS[product_id].vra){
let isSellable = ISP_PRODUCTS[product_id].vra[variant][1].find(function(a){
return a[0] === 'Sellable' && a[1][0];
}) || false;

let haveColor = ISP_PRODUCTS[product_id].vra[variant][1].find(function(a){
return a[0] === 'Colour' || a[0] === 'Color';
}) || false;
if(haveColor && isSellable){
for(let color in haveColor[1]){
if(colors.indexOf(haveColor[1][color]) == -1){
colors.push(haveColor[1][color]);
}
}
}
}
return colors;
}

</script>
<style>
.isp_product_color_swatch {
display: none !important;
}
</style>