CODEWITHSUNDEEP
phphtmlwordpresswoocommercecart
Tobi Ajala
Tobi Ajala

Reputation: 107

How do I add the shopping cart glyph-icon behind the price in my header?

In my header I have the current total of the users shopping cart as just a figure that's shown in plain text. I'm trying to add bootstraps glyphicon of the shopping cart next to it the price but it's just not showing up. Can anyone help me solve this please? Thanks in advance!

Note: I'm using a wordpress, woocommerce and bootstrap and I haven't added any CSS values to this yet.

HTML:

<a class="cart-contents"><div id=basket><?php echo WC()->cart->get_cart_total(); ?><span class="glyphicons glyphicons-shopping-cart"></span></div></a>

Upvotes: 0

Views: 787

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254231

It is easy if everything else is working…

HTML/PHP:

<a class="cart-contents">
    <div id=basket>
        <span class="glyphicons glyphicons-shopping-cart"></span>
        <span class="tot-price"><?php echo WC()->cart->get_cart_total(); ?></span>
    </div>
</a>

CSS (ajust and change the values):

.cart-contents > .basket > .tot-price {
    background-color: #000;
    box-sizing: border-box;
    border-radius: 1em;
    color: #fff;
    display: inline;
    font-size: 9px;
    left: 0;
    margin-left: -5px;
    padding: 2px 5px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: -7px;
}

.cart-contents > .basket > .tot-price:hover {
    background-color: #eee;
    color: #000;
}

This CSS rules are just an example, you have to set all the values to make the display as you want. You may have to add also me some rules for the containers <a> and <div>.

Upvotes: 1

Related Questions