Formatowanie nazw produktów w WooCommerce. Zastąp
niewidocznym znakiem.

Ten kod JavaScript działa na stronie internetowej po pełnym załadowaniu dokumentu (DOM). Wykonuje dwie główne czynności:

window.addEventListener('DOMContentLoaded', (event) => {
    // Wybierz wszystkie elementy z nazwami produktów
    let productNames = document.querySelectorAll('.woocommerce-loop-product__title, .product_title');

    productNames.forEach((productName) => {
        // Zamień '|' na '<br>'
        productName.innerHTML = productName.innerHTML.replace('|', '<br>');
    });
});

Wybór elementów: Najpierw, po załadowaniu całego dokumentu (DOM), kod znajduje wszystkie elementy na stronie, które mają klasę .woocommerce-loop-product__title lub .product_title. Te klasy są zwykle przypisane do elementów HTML zawierających nazwy produktów w sklepach WooCommerce. Wybrane elementy są przechowywane w zmiennej productNames.

Zamiana znaków: Następnie, dla każdego wybranego elementu (reprezentującego nazwę produktu), kod zamienia znak ’|’ na ’
’. ’
’ to tag HTML oznaczający nową linię, więc zamiast ’|’, widzimy przerwę linii w tekście.

Czyli, jeśli nazwa produktu to „Produkt 1 | Produkt 2„, po wykonaniu tego kodu na stronie wyświetli się:

Produkt 1
Produkt 2

To jest szczególnie przydatne, gdy chcesz wyświetlić różne części nazwy produktu na różnych liniach, zamiast na jednej.

Pamiętaj! Dodaj znacznik „|” w tytule produktu, w miejscu gdzie chcesz żeby przeniosło fragment nazwy do nowej linii.