Change the WooCommerce cart icon?

  • Resolved chrisalton11

    (@chrisalton11)


    1 year, 6 months ago

    Is there a way to change the icon for the woocommerce site header drop-down cart?

    .site-header-cart .widget_shopping_cart

    I’d like to change the icon from the default basket to a traditional shopping cart.

    Thanks for your help,
    Chris

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author konamiman

    (@konamiman)

    1 year, 6 months ago

    Hi Chris, here’s one way to customize the shopping cart icon:

    1. In WordPress admin select Appearance – Customize.
    2. Click on “Additional CSS”.
    3. Paste the following and click “Publish”:

    .site-header-cart .cart-contents::after {
    content: "\f07a";
}

    You might need to first install the Font Awesome plugin for this to work.

    If you want a different icon you can browse the Font Awesome icon library, open the details of the icon you like and take note of the unicode code (folur hexadecimal digits in the upper right corner of the icon details window).

    Thread Starter chrisalton11

    (@chrisalton11)

    1 year, 6 months ago

    Konamiman,

    Thanks so much for providing this css. Out of curiosity, do the light / thin / duotone icons have their own unicodes or are those out of the reach of a simple css update?

    Appreciate your help,
    Chris

    Amir A. (woo-hc)

    (@amiralifarooq)

    1 year, 6 months ago

    Hello @chrisalton11 all icons has its own HTML code, you can check it by click on the icon, take a look at this screenshot: https://screencast-o-matic.com/i/c3lDlqVvADZ

    I hope that helps!

    Thread Starter chrisalton11

    (@chrisalton11)

    1 year, 6 months ago

    Hi Amir,

    Forgive my ignorance, but is it possible to use those HTML codes inside the Additional CSS file?

    Adding the 4-digit unicode { content: “\f07a”; } was very easy but I haven’t figured out how to use the html codes in a similar manner.

    Thanks for your response,

    Chris

    xue28 (woo-hc)

    (@xue28)

    1 year, 6 months ago

    HI @chrisalton11

    Forgive my ignorance, but is it possible to use those HTML codes inside the Additional CSS file?

    haven’t figured out how to use the html codes in a similar manner.

    Can you please provide further details about what you are referring to here?

    If a screenshot would be helpful, I’d recommend using https://snipboard.io or http://skitch.com/. You can share the direct link to the image as a response to this topic.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change the WooCommerce cart icon?’ is closed to new replies.