Return to previous page

Cart popup customization css (top right corner)

This topic has 10 replies, 2 voices, and was last updated 7 years, 11 months ago ago by Jack Richardson

Olexi

Participant

May 18, 2016 at 17:09

Hi,

we have some optical chaos (Fontstyles) at our cart popup on the top-right corner.

Can you help me to get the custom-css together to make it look the way i want.

Headline: “Recently added items”
should be “Montserrat” 12px capitals … like the product title

Product variation “language” and the choice “german/english” should be the same style … everything like language

Text: “Learn more about shipping costs, payment methods and our revocation policy.” should be the same style and size like the “language” mentioned above.

Text: “Cart subtotal” should be the same style like the total amount (Montserrat)

Is it somewhat clear what i am asking for?

Many thanks,
Olexi

#126400 Copied Theme version: latest WooCommerce version: latest

9 Answers
Jack Richardson

Support staff

May 18, 2016 at 19:17
Hello,

Add this code in Theme Options > Custom CSS > Global Custom CSS:
```
.cart_list.product_list_widget p {
    font-size: 12px !important;
    text-transform: uppercase;
    font-family: Montserrat !important;
}
.order-list .descr-box dl dd p {
    font-size: 12px !important;
    font-family: Roboto !important;
}
p.jde_hint {
    font-size: 12px !important;
    font-family: Roboto !important;
    font-weight: normal;
}
.shopping-container .small-h {
    font-family: Montserrat !important;
}
```
Best regards,
Jack Richardson.
#126425 Copied
Olexi

Participant

May 19, 2016 at 07:01

Hi Jack, many thanks.

I put that code in our style .css from the child theme.
that made some minor changes, but not the outcome as needed.

Any idea?

Olexi

#126448 Copied
Jack Richardson

Support staff

May 19, 2016 at 08:14
Hello,

The reason is that the code for this class “.cart_list.product_list_widget p” is overriding other classes. I’ve edited the code to this one:
```
.cart_list.product_list_widget p {
    font-size: 12px !important;
    text-transform: uppercase;
    font-family: Montserrat !important;
}
.widget_shopping_cart_content .order-list .descr-box dl dd p {
    font-size: 12px !important;
    font-family: Roboto !important;
    text-transform: none !important;
}
.widget_shopping_cart_content p.jde_hint {
    font-size: 12px !important;
    font-family: Roboto !important;
    font-weight: normal;
    text-transform: none !important;
}
.shopping-container .small-h {
    font-family: Montserrat !important;
}
```
Please clear browser cache and check cart widget now.

Best regards,
Jack Richardson.
#126468 Copied
Olexi

Participant

May 19, 2016 at 08:29

should i remove the other code you sent me or just add the new one?

#126472 Copied

Jack Richardson

Support staff

May 19, 2016 at 08:36

Hello,

I’ve already added that code. You don’t need to delete anything. Just check cart widget now.

Best regards,
Jack Richardson.

#126478 Copied

Olexi

Participant

May 19, 2016 at 09:11

hi jack,

some how this does not change it … her how it looks http://prnt.sc/b5tpcl

here like i would like to have it http://prnt.sc/b5tsl3

is there a way?

#126485 Copied

Jack Richardson

Support staff

May 19, 2016 at 10:47

Hello,

I see this styling http://storage1.static.itmages.com/i/16/0519/h_1463651194_8499412_cea56196d8.jpeg .
Please clear browser cache or check in another browser.

Best regards,
Jack Richardson.

#126503 Copied

Olexi

Participant

May 19, 2016 at 11:49

looks like i have send you before in safari and chrome, all have been caches cleared.

very strange.

#126517 Copied

Jack Richardson

Support staff

May 19, 2016 at 15:20

Hello,

Please clear browser cache and check the cart now.

Best regards,
Jack Richardson.

#126544 Copied
Viewing 10 results - 1 through 10 (of 10 total)