Segue uma proposta:
CSS:
.cores-personalizadas .bandeiras-produto .bandeira-frete-gratis{
display: none !important;
}
.bandeiras-produto > div, .bandeiras-produto > span {
width: 40px;
height: 40px;
flex-direction: column;
border-radius: 50%;
line-height: 11px;
padding: 0;
}
JS: (altere o link da imagem se for aplicar, este link é temporário.)
$('.cores-personalizadas .bandeiras-produto .bandeira-frete-gratis').after($('<div id="img-frete"><img src="https://cdn.awsli.com.br/2176/2176798/arquivos/img-frete-gratis.png"></div></div>'))
Resultado esperado:
