Opencart 2.0 – Edit quick cart

This article will show you how to edit the style of the Opencart 2.0 Ajax Quick Cart. Sometimes when designing our own theme we wish to choose our own colors. This will allow you to at least get an idea about where these styles reside and how to edit them. For this guide we are going to focus on the font of the ajax cart. The font will include styles such as color, font type, weight, size and position.

The below image shows the default Opencart 2.0 Ajax cart (when not selected):

c1

Let’s now find the style that is responsible for the text attributes. We aren’t going to be messing with any styles outside stylesheet.css. The cart actually is affected by the bootstrap css but we aren’t going to be venturing into that today. Besides it’s not necessary to just change basic qualities.

1) MAKE A BACK UP OF STYLESHEET.CSS and keep it somewhere safe outside of your opencart folder.

2) Open stylesheet.css and find the following code:

#cart > .btn {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
}

3) We’re going to change the color to bright green and the font size larger. Simply make the changes like this:

#cart > .btn {
    font-size: 14px;
    line-height: 18px;
    color: #31F809;
}

4) Now save your code and upload it to your server. The cart should now look like this:

c2

5) Let’s take this a step further and change the text color to red when you click on the cart. Find the following style:

#cart.open > .btn {
    background-image: none;
    background-color: #FFF;
    border: 1px solid #E6E6E6;
    color: #666;
    box-shadow: none;
    text-shadow: none;
}

6) Simply change the color code to this:

#cart.open > .btn {
    background-image: none;
    background-color: #FFF;
    border: 1px solid #E6E6E6;
    color: #F80909;
    box-shadow: none;
    text-shadow: none;
}

7) After being saved and uploaded the font color should look red when the cart is opened:

c4

Lastly, let’s make the text be underlined. Take the style you already altered above and add a text-decoration to it.

#cart > .btn {
    font-size: 12px;
    line-height: 18px;
    color: #FFF;
    text-decoration: underline;
}

After you save and upload it should look like this:

c3

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *