Hiding product swatches or blurring or crossing when variation not available v2

Hello

I've been checking the forum and you need something similar to this web address that I show:

https://bemorebg.com/product/black-logo-oversize/#

That is to say, Hiding product swatches or blurring or crossing when variation not available.


I have used the java code in the topic that appears in topics (https://forum.muffingroup.com/betheme/discussion/comment/250563#Comment_250563), but it still does not work.

I would like to use it on the store page, on the section pages and on the product page.


Could you help us?


In java code it is:

****

document.addEventListener('DOMContentLoaded', function() {

 // Obtenemos el texto del elemento con clase. 'woocommerce-product-details__short-description'

 var availabilityText = document.querySelector('.woocommerce-product-details__short-description').innerText;


 // Dividimos el texto en variaciones

 var variations = availabilityText.split(',');



 // За всяка вариация, проверяваме наличността

 var variationLinks = document.querySelectorAll('.mfn-vr-options a');

 variationLinks.forEach(function(link) {


 // Вземаме буквата на вариацията от текста на връзката

 var variationLetter = link.innerText.trim();


 // Търсим буквата в текста на наличностите

 var regex = new RegExp(variationLetter + ' - (\\d) бр');

 var match = regex.exec(availabilityText);

 if (match && match[1] === '0') {


  // Ако вариацията не е налична, задраскай буквата и приложи същия стил като в CSS

  link.style.textDecoration = 'none'; // Премахваме задраскването

  link.style.position = 'relative'; // Приложи position: relative;

  var xElement = document.createElement('span'); // Създаваме елемент span за "X"

  xElement.innerText = 'X'; // Задаваме текста на елемента

  xElement.style.position = 'absolute'; // Приложи position: absolute;

  xElement.style.top = '50%'; // Позиционирай вертикално в средата на елемента

  xElement.style.left = '50%'; // Позиционирай хоризонтално в средата на елемента

  xElement.style.transform = 'translate(-50%, -50%)'; // Центрирай по хоризонтала и вертикалата

  xElement.style.fontSize = '20px'; // Задай големина на шрифта

  link.appendChild(xElement); // Добави "X" към връзката

 }

 });

});


****



Thanks

Comments

  • Hi,

    What you ask for requires file customization, which, in reference to the Item Support Policy, is not allowed. http://themeforest.net/page/item_support_policy

    So, if you want to modify files and don't know how, you should contact your web developer. Item Policy says:

    Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customization services or checking out the great service providers on Envato Studio.

    Thanks

Sign In or Register to comment.