CODEWITHSUNDEEP
phpwordpresswoocommercehook-woocommercewoocommerce-theming
Vladimir B.
Vladimir B.

Reputation: 305

How to show woocommerce shopping cart with php but customize it by adding an icon and changing the text

please help me, I want to show a woocommerce shopping cart with customized text and icon on my wordpress website. I am using this source code for reference: https://docs.woocommerce.com/document/show-cart-contents-total/

I am showing it on the frontend, it looks like this with the source code from the link above, but I would like to show it with a icon inside the and I would also like to change the text, to be 'products' instead of 'items'

enter image description here

Here is my code of trying to show that icon and the changed text, please help me:

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php echo sprintf ( _n( '<i class="fa fa-cart"></i>Cart  %d product', '<i class="fa fa-cart"></i>Cart  %d products s', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>

Code in functions.php:

add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' 
 );

function woocommerce_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;

ob_start();

?>
<a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
<?php
$fragments['a.cart-customlocation'] = ob_get_clean();
return $fragments; }

Upvotes: 1

Views: 3404

Answers (1)

beatnik
beatnik

Reputation: 236

enter image description here

Here's a quick example of the markup. You'll need to style with css.

html/php

<a href="<?php echo wc_get_cart_url(); ?>" class="basketicon" title="<?php _e( 'View your shopping cart' ); ?>">
    <span class="basketicon__icon"></span>
    <span class="basketicon__total">
        <?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?>
    </span>
</a>

css/sass

.basketicon{
    margin: 0 30px 0 0;
    padding: 0 30px 0 0;
    display: inline-flex;
    align-items: center;
    position: relative;

    @media (min-width: $lg){
        margin: 0 30px 0 0;
        padding: 0 30px 0 0;
    }

    &::before{
        @media (min-width: $lg){
            content: '';
            position: absolute;
            right: -10px;
            width: 20px;
            height: 1px;
            background: #fff;
        }
    }
    &__icon{
        &::before{
            content: url(../images/basket.svg);
            height: 10px;
            width: 10px;
            display: block;
        }
    }
    &__total{
        display: none;
        color: #fff;
        font-size: rem(16);
        margin: 0 0 0 10px;

        @media (min-width: $lg){
            font-size: rem(12);
            display: inline-block;
        }
        @media (min-width: $xl){
            font-size: rem(14);
        }
        @media (min-width: $xxxl){
            font-size: rem(15);
        }
    }
    &:hover,
    &:focus{
        .basketicon{
            &__icon{
                &::before{
                    transform: scale(0.8);
                }
            }
        }
    }
}

Upvotes: 4

Related Questions