В настоящее время я работаю над сайтом электронной коммерции WordPress, где выбранная торговая платформа WooCommerce.

В заголовке у меня есть область «Корзина», где посетители могут выбрать текст и посмотреть, что находится в их «Корзине». Я хотел удалить «Корзина» и заменить эту текстовую запись «Корзина».

Чтобы добиться этого, я использовал CSS.

Вот мои коды:

< Сильный > Разметка :

<span class="icon icon-shopping"></span>
    <span class="cart-right">
        <span class="remove-shopping-cart">Shopping cart</span>
            <span class="quantity-items">
                0 items - <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>0.00</span>                            
            </span>
    </span>

< Сильный > CSS

/*Removes Shopping Cart*/
.remove-shopping-cart {
    visibility: hidden;
    position: relative;
}
/*Replace Shopping Cart with 'Shopping Basket.'*/
.remove-shopping-cart:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Basket";
}

Приведенная выше кодировка прекрасно работает в Google Chrome. Когда я захожу на сайт с помощью Internet Explorer, там просто пустое место, где должны быть «Корзина» / «Корзина».

Есть ли причина для этого, и есть ли способ решить эту проблему?

Добавленная информация .

После дальнейшей проверки с помощью Internet Explorer я заметил, что мой псевдо-CSS зачеркнут / не выбран в Internet Explorer, в отличие от Google Chrome. Я предполагаю, что это проблема. Internet Explorer по-разному относится к CSS Psuedo и Google Chrome?

Думаю, я видел проблему. Когда я удаляю visibility: hidden;, в Internet Explorer появляются «Корзина покупок» и «Корзина». Мне просто нужно показать «Корзина», а не «Корзина».

0
Craig 4 Мар 2018 в 19:17

4 ответа

Лучший ответ

Проблема, оказывается, моя собственная работа.

Я создал следующий каталог:

wp-content> themes> theme-name> inc> functions> woocommerce.php

С woocommerce.php подробным описанием ряда функций, которые будут включены в заголовок веб-сайта.

Я создал это очень давно, поэтому просто пропустил этот каталог. Не пришло в голову, что это может быть причиной проблемы, тем более что мой псевдо-CSS работал во всех браузерах, кроме Internet Explorer.

В конце концов, все, что мне нужно было сделать, это изменить исходную ссылку «Корзина» на «Корзина» в файле woocommerce.php, а затем удалить созданный мной CSS (согласно моему вопросу), и проблема была решена.

Урок выучен!

Тем не менее, я до сих пор не уверен, почему Google Chrome распознал мои изменения CSS, а Internet Explorer - нет.

1
Craig 7 Мар 2018 в 05:32

Это, кажется, работает нормально с т.е.

<span class="icon icon-shopping"></span>
<span class="cart-right">
    <span class="remove-shopping-cart">Shopping cart</span>
        <span class="quantity-items">
            0 items - <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>0.00</span>                            
        </span>
</span>

<style>
    .remove-shopping-cart {
        position: relative;
        width: 100px;
        height: 20px;
        display: inline-block;
        text-indent: -999999px;
    }

    .remove-shopping-cart:after {
        position: absolute;
        top: 0;
        left: 0;
        content: "Basket";
        line-height: 20px;
        text-indent: 0;
    }
</style>
0
Rahul Dev 4 Мар 2018 в 17:36

Можете ли вы нацелиться на элемент с помощью JavaScript и изменить «innerHTML»?

Это было бы что-то вроде:

<html>
<span class="icon icon-shopping"></span>
<span class="cart-right">
    <span id="changeCartToBasket">Shopping cart</span>
        <span class="quantity-items">
            0 items - <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>0.00</span>                            
        </span>
</span>    
</html>

<script type="text/javascript">
   document.getElementById("changeCartToBasket").innerHTML = "Basket";
</script>
0
hypern00b 4 Мар 2018 в 17:08

Вы можете попробовать метод jQuery:

$('.remove-shopping-cart').html($('.remove-shopping-cart').html().replace('Shopping cart','Basket'));

Это помогло бы сделать более простой способ лучше, чем CSS.

$('.remove-shopping-cart').html($('.remove-shopping-cart').html().replace('Shopping cart','Basket'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="icon icon-shopping"></span>
	    <span class="cart-right">
	        <span class="remove-shopping-cart">Shopping cart</span>
	            <span class="quantity-items">
	                0 items - <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>0.00</span>                            
	            </span>
	    </span>
0
BM RAFIQ 4 Мар 2018 в 17:52