CODEWITHSUNDEEP
csswordpress
Craig
Craig

Reputation: 1962

How do I replace text, using Pseudo CSS, in Internet Explorer?

I am currently working on a WordPress ecommerce website, where the chosen shopping platform is WooCommerce.

In the header, I have a 'Shopping Cart' area, where visitors are able to select the text and view what is in their 'Shopping Cart'. I wanted to remove 'Shopping Cart' and replace this text entry with 'Basket'.

To achieve this, I used CSS.

Here are my codes:

Markup:

<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";
}

The above coding, works fine in Google Chrome. When I visit the website using Internet Explorer, there is just a blank space where 'Shopping Cart'/'Basket' should be.

Any reason for this and is there a way to resolve this?

Added Information:

After further inspection, using Internet Explorer, I noticed that my Pseudo CSS is crossed out/deselected in Internet Explorer, unlike in Google Chrome. I am assuming this is the issue. Does Internet Explorer treat Psuedo CSS differently to how Google Chrome treats such CSS?

Think I have seen the issue. When I remove visibility: hidden; both 'Shopping Cart' and 'Basket' appears in Internet Explorer. I just need to show 'Basket' and not 'Shopping Cart'.

Upvotes: 0

Views: 269

Answers (4)

Craig
Craig

Reputation: 1962

The issue, turns out to be of my own doing.

I had created the following directory:

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

With woocommerce.php detailing a series of functions to be included within the website's header.

I had created this a long time ago, so simply overlooked this directory. It didn't come to mind, that this could be causing the issue, especially since my Pseudo CSS was working in all browsers except for Internet Explorer.

In the end, all I had to do was modify the original 'Shopping Cart' reference to 'Basket', within the woocommerce.php file, then delete the CSS I created (as per my question), and problem resolved.

Lesson learnt!

Still not sure why Google Chrome recognised my make shift CSS whilst Internet Explorer did not, though.

Upvotes: 1

BM RAFIQ
BM RAFIQ

Reputation: 315

You can try jQuery method:

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

It would help to do easier way better than CSS way.

$('.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>

Upvotes: 0

Rahul Dev
Rahul Dev

Reputation: 175

This seems to be working fine with ie

<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>

Upvotes: 0

hypern00b
hypern00b

Reputation: 350

Are you able to target the element with JavaScript and change the "innerHTML"?

It would be something like:

<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>

Upvotes: 0

Related Questions