Return to previous page

Shopping Cart Popup Tweaks? - by talonhead

This topic has 161 replies, 5 voices, and was last updated 7 years, 9 months ago ago by Robert Hall

talonhead

Participant

June 18, 2016 at 10:41

Hey Jack! Need some CSS done to the popup.

1. How do I get this into my menu bar? http://prntscr.com/bhurjr
2. Popup itself needs radiused corners
3. Can the background color of the popup be changed?
4. Both Paypal buttons needs padding. Under the checkout button and between each other. http://prntscr.com/bhusxw
5. Checkout button needs radiused corners…also needs its border color removed
6. Remove from cart “X” hover over could be #ad2121
7. Hover over for Item could be #ad2121
8. Cart Subtotal number turns #000 at hover? White when not hovering.
9. Hard to tell, but I think the hover color of the buttons is not #353535?
10. Can we filter out the product variables from being listed in this popup? In a popup, it absolutely isn’t necessary.

That’s about it so far! Thanks!

#130197 Copied

160 Answers
Eva Kemp

Support staff

June 20, 2016 at 15:37
Hello,

1. Unfortunately there is no option to add cart widget to menu bar.

2. Please add this code in Global Custom CSS:
```
.cart-popup-container {
  border-radius: 5px;
}
```
3. Use the following css code:
```
.cart-popup-container {
   background-color: #fff !important;
}
```
Write your color value.

4. Use this css code:
```
.cart-popup-container #paypal_ec_paypal_credit_button {
    margin-top: 20px;
}
.cart-popup-container .btn.filled.big {
   margin-bottom: 20px;
}
```
5. Add this code in Global Custom CSS:
```
.cart-popup-container .btn.filled.big {
    border-radius: 5px;
    border: none;
}
```
6. Color can be changed editing the file wp-content/themes/classico/images/icons-sprite.png as close icon is loading from image,

7. To change hover effect for product title use this code:
```
.cart-popup-container .order-list .media-heading a:hover {
  color: #ad2121;
}
```
8. Use the following code:
```
.shopping-container .big-coast span, .cart_list.product_list_widget .big-coast span {
   color: black;
}
```
9. Add this code:
```
.cart_list.product_list_widget .btn.border-grey:hover, .cart-popup-container .btn.filled.big:hover {
   background-color: #353535;
}
```
10. To remove variation from cart popup use the following css code:
```
.cart-popup-container .order-list .descr-box {
    display: none;
}
```
Regards,
Eva Kemp.
#130287 Copied
talonhead

Participant

June 21, 2016 at 14:24

Thanks Eva. It’s just about right!

A few things:

1. At the upper right-hand corner of the popup there is a little “hickey” in the radius. See screenshot http://prntscr.com/bj3w0k

2. Product variables are gone…but it also took the product quantity out as well. I need to keep the quantity value.

3. Product description font color should be #353535

4. Increase the size of the $0.00 a wee bit in the menu icon http://prntscr.com/bj3yf5

That’s about it so far! Thank you!

#130452 Copied
Eva Kemp

Support staff

June 22, 2016 at 10:57
Hello,

1. You can remove that arrow using this css code:
```
.cart-popup-container:before {
  display: none;
}
```
2. Then remove this code:
```
.cart-popup-container .order-list .descr-box {
    display: none;
}
```
and use the new one:
```
.cart-popup-container .order-list .descr-box dl {
   display: none;
}
```
3. Do you mean product description on single product page?
Then use this code:
```
.product-information .short-description p {
   color: #353535;
}
```
4. Add this code in Global Custom CSS:
```
.cart-design-2 .shopping-cart-widget .shop-text .total span {
   font-size: 20px;
}
```
Regards,
Eva Kemp.
#130599 Copied
talonhead

Participant

June 22, 2016 at 11:26

Thanks.

Is that what that’s supposed to be? An arrow? I might keep it then. How can we make the arrow more pronounced?

When I had said “Product Description needs to be #353535”, it was meant only in the cart popup. http://prntscr.com/bjhz4o

The Cart’s total did increase the size in the menu icon, but the padding needs some tweaking to center it with the bag icon. http://prntscr.com/bjhzmi

Incidentally, can the bag’s icon be changed to an actual “cart” instead of a “bag”? I do like the animation though.

Can the total/menu icon be moved into the menu bar itself? I am using a third party menu bar…but just asking if you cna point me in the right direction.

#130608 Copied

talonhead

Participant

June 22, 2016 at 11:34

Now that I think about it, as far as the arrow goes, making it larger won’t look any good since I have radiused corners on the popup. Might just remove it then because It’s rather keep the corners radiused.

#130613 Copied
Eva Kemp

Support staff

June 22, 2016 at 12:16
Hello,

3. Then please use this css code:
```
.product_list_widget li h4 a {
   color: #353535 !important;
}
```
4. Please use this code:
```
.cart-design-2.design-white .shop-text {
    margin-top: 0px;
}
```
Unfortunately cart widget can’t be moved to menu bar.

Regards,
Eva Kemp.
#130621 Copied
talonhead

Participant

June 22, 2016 at 15:14

That went alright…but changing the color of the product description kicked out my hover color of #ad2121. In fact, there is no hover color now.

Also, your code addition to change the color of the cart’s product description also changed the color of the product description to #353535 in the “recent viewed products” widget. There is also no hover color anymore. See screenshot.

Please, contact administrator
for this information.

#130659 Copied
Eva Kemp

Support staff

June 22, 2016 at 16:33
Hello,

To add hover color use this css code:
```
.product_list_widget li h4 a:hover {
   color: #ad2121 !important;
}
```
You can use Font Awesome icon to change cart icon. Add this code in Global Custom CSS:
```
.cart-design-2 .shopping-cart-widget .cart-bag::before {
    content: "\f07a";
    font-family: FontAwesome;
    color: white;
    font-size: 20px;
}
.cart-design-2 .shopping-cart-widget .cart-bag .badge-number {
    background-color: transparent;
}
.cart-design-2.design-white .cart-bag::before {
    border-color: transparent;
}
.cart-design-2.design-white .cart-bag .badge-number {
    border-color: transparent;
    color: transparent;
}

.cart-design-2.design-white .cart-bag .badge-number::before {
    box-shadow: none;
}
```
Regards,
Eva Kemp.
#130682 Copied
talonhead

Participant

June 22, 2016 at 16:45

Did you not receive my edited reply? There is more.

#130686 Copied
Eva Kemp

Support staff

June 22, 2016 at 17:13
Hello,

Please use this code:
```
.cart-popup-container .product_list_widget li h4 a {
   color: #353535 !important;
}
```
instead of this one:
```
.product_list_widget li h4 a {
   color: #353535 !important;
}
```
and for hover color:
```
.cart-popup-container .product_list_widget li h4 a:hover {
   color: #ad2121 !important;
}
```
Regards,
Eva Kemp.
#130697 Copied
talonhead

Participant

June 22, 2016 at 17:38

Thanks Eva. That made it work as it should.

On swapping out the bag icon for a cart, on hover of the cart, a thin white line appears boxing the icon. See video.

Also, the $0.00 is too far away from the icon. Needs to come in a bit. Thanks.

Please, contact administrator
for this information.

#130705 Copied
Eva Kemp

Support staff

June 22, 2016 at 19:39
Hello,

Please add this code:
```
.cart-design-2 .shopping-cart-widget .cart-bag::before {
   transform: none;
}
.cart-design-2 .shopping-cart-widget .cart-bag {
    margin-left: 0px;
}
```
Regards,
Eva Kemp.
#130720 Copied
talonhead

Participant

June 22, 2016 at 20:42

I like the spacing, but the white border box is still there. See video.

Also in the video, notice that the menu icon is outside of the container now…not aligned with menu bar. Both icon and $0.00 Needs to come in a bit to the left. See screenshot. Look at in mobile size as well and it’s really pronounced.

And when you do fix that, please make sure the cart flyout stays inline with the cart icon (directly inline and below it).

Thanks.

Please, contact administrator
for this information.

#130735 Copied
Eva Kemp

Support staff

June 23, 2016 at 10:45
Hello,

I’ve edited the code to this one:
```
.cart-design-2.design-white .cart-bag .badge-number {
    display: none;
}
```
Please check cart icon now.
Also I’ve added this code in Custom CSS for desktop section:
```
.cart-design-2 .shopping-cart-widget .shop-text {
    padding-right: 30px;
}
.cart-design-2 .shopping-cart-widget .cart-bag {
    right: 30px;
}
```
Clear browser cache and check.

Regards,
Eva Kemp.
#130812 Copied
talonhead

Participant

June 23, 2016 at 10:54

Not too bad. Cart icon is still messed in mobile. http://prntscr.com/bjxu8x

Also, cart’s popup needs to be aligned with icon http://prntscr.com/bjxv99

#130814 Copied
Eva Kemp

Support staff

June 23, 2016 at 11:04
Hello,

Add this code in Custom CSS for desktop:
```
.cart-popup-container {
   right: 30px;
}
```
and this code in Custom CSS for mobile:
```
.cart-design-2 .shopping-cart-widget .cart-bag {
  right: 30px;
}
```
Regards,
Eva Kemp.
#130816 Copied
talonhead

Participant

June 23, 2016 at 11:19

Almost there.

The little border box between the icon and $0.00 is still there at hover. You have to be in the right spot for it to show up…but it’s there. See video.

https://gyazo.com/ab16770fdb7b8aba027a0de72fe3c064

#130822 Copied

talonhead

Participant

June 23, 2016 at 11:23

And what did you change in here? I don’t see what you’re talking about above.

http://prntscr.com/bjy6w0

#130823 Copied
Eva Kemp

Support staff

June 23, 2016 at 11:47
Hello,

Again I’ve changed the code:
```
.cart-design-2.design-white .cart-bag .badge-number {
    border-color: transparent;
    color: transparent;
}
```
to this one:
```
.cart-design-2.design-white .cart-bag .badge-number {
  display: none;
}
```
Please check cart icon now.

Regards,
Eva Kemp.
#130827 Copied
1 2 3 … 7 8 9

Viewing 20 results - 1 through 20 (of 161 total)