Стилизованные кнопки для магазина

Кнопки по умолчанию нужно удалить в настройках
More products
Для других размеров экрана необходимо будет делать медиазапросы и там изменять стили под каждый размер.
<script>
// Получение всех блоков с ценами
var priceBlocks = document.querySelectorAll('.t776__price-value.js-product-price.notranslate');

// Получение всех div с указанными классами
var targetDivs = document.querySelectorAll(".t776__imgwrapper.t1002__picture-wrapper");

// Проверка, что div'ы существуют
if (targetDivs.length > 0) {
    // Проход по каждому div'у
    targetDivs.forEach(function(targetDiv, index) {
        // Создание ссылки
        var link = document.createElement("a");
        link.innerHTML = "Купить по цене:<br>" + priceBlocks[index].textContent + " руб."; // Вставляем текст для ссылки
        link.setAttribute("href", "#prodpopup"); // Замените ссылку на нужную
        link.classList.add("new-btn"); // Добавление класса "new-btn" к ссылке

        // Вставка ссылки внутрь текущего div'а
        targetDiv.appendChild(link);
    });
} else {
    console.error("Div'ы с классами .t776__imgwrapper.t1002__picture-wrapper не найдены.");
}
</script>

<style>
    .new-btn {
    padding: 8px;
        position: absolute;
    top: 32px;
    right: 15px;
    max-width: 530px;
    z-index: 1;
    text-align: center;
    background-color: #ff0066;
    border-radius: 10px;
    color: #ffffff !important;
    font-family: Sans-Serif;
}

.new-btn::before {
    content: "";
    display: block;
    position: absolute;
    width: 24px; /* Ширина линии */
    height: 3px; /* Высота линии */
    background-color: #ff0066;
    bottom: 50%; /* Располагаем линию по вертикали посередине */
    transform: translateY(50%) rotate(-10deg); /* Смещаем линию на половину ее высоты вверх */
    left: -20px; /* Располагаем линию слева от ссылки */
}

    /* Круглые изображения с обводкой */
    .t776__bgimg { 
    border-radius: 50%;
    width: 200px;
    height: 200px;
    border: solid 3px  #ff0066;
}

.t776__markwrapper {
    left: 10px;
    right: inherit;
}

.t776__price-wrapper {
    display: none; /*удаляем блок с ценой*/
}
</style>