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

Eva Kemp

Support staff

June 27, 2016 at 11:08
Hello,

Add this code in Global Custom CSS:
```
.before-checkout-form .paypal_checkout_button {
   margin-top: 0px !important;
}
```
Regards,
Eva Kemp.
#131198 Copied
talonhead

Participant

June 27, 2016 at 11:19

That works for Desktop…but not for Mobile.
http://prntscr.com/blm3n6

Here it is on Tablet size: http://prntscr.com/blm47r

#131202 Copied

talonhead

Participant

June 27, 2016 at 12:00

Also, on the cart’s popup, the Paypal button “Paypal Credit” is not aligned with the “Checkout with Paypal” button.

The odd thing is, this only happens on the Checkout page….no other page.

Thoughts on how to fix this?

#131209 Copied
Eva Kemp

Support staff

June 27, 2016 at 13:17
Hello,

Please use this css code:
```
.cart-popup-container #paypal_ec_paypal_credit_button {
   margin-left: 0px !important;
}
```
Regards,
Eva Kemp.
#131219 Copied
talonhead

Participant

June 27, 2016 at 14:18

That works.

As stated above, in regards to Checkout page Paypal buttons.

Global CSS Code works for Desktop…but not for Mobile.
http://prntscr.com/blm3n6

Here it is on Tablet size: http://prntscr.com/blm47r

#131233 Copied
Eva Kemp

Support staff

June 27, 2016 at 17:00
Hello,

Add this code in Custom CSS for mobile section:
```
.before-checkout-form #paypal_ec_paypal_credit_button {
   margin-bottom: 25px;
}
```
and this code in Custom CSS for tablet section:
```
.before-checkout-form .woocommerce_paypal_ec_checkout_message {
    width: 100% !important;
    margin-top: 30px !important;
}
```
Regards,
Eva Kemp.
#131276 Copied
talonhead

Participant

June 28, 2016 at 14:34

I’m going to get really picky here. Check out the video. https://gyazo.com/da94be256415dccd180a19e97bf42af2

The Checkout button text seems to slightly change size on hover…makes for a button not as “smooth” acting as the View Cart button is. I *think* that is the problem….the text.

If the video doesn’t convey that, just check it out directly on the site itself and hover over those buttons yourself. They just don’t have the same hover over action between them.

#131450 Copied
Eva Kemp

Support staff

June 29, 2016 at 13:47
Hello,

Try to use this code in Global Custom CSS section:
```
.cart-popup-container .btn.filled.big {
   transition: all 0.2s ease-in-out;
}
```
Regards,
Eva Kemp.
#131683 Copied
talonhead

Participant

June 30, 2016 at 14:07

Great. That fixed it.

How can that same principle be applied to the empty cart page? The “return to shop” suffers the same hover problem. See vid.

https://gyazo.com/fb332973ec9c15979848a9cf27893208

I guess it needs the ease-in-out

#131919 Copied
Eva Kemp

Support staff

June 30, 2016 at 15:03
Hello,

Please use this css code:
```
.empty-cart-block a.btn.filled.active {
   transition: all 0.2s ease-in-out;
}
```
Regards,
Eva Kemp.
#131942 Copied
talonhead

Participant

June 30, 2016 at 15:35

Perfect. What would it take to have ALL the buttons on the site to have that same “style” at hover?

#131958 Copied
Eva Kemp

Support staff

June 30, 2016 at 16:52
Hello,

Try to use this css code:
```
.btn {
  transition: all 0.2s ease-in-out;
}
```
Regards,
Eva Kemp.
#131977 Copied
talonhead

Participant

June 30, 2016 at 21:08

I don’t think it did much of anything.

#131997 Copied

Jack Richardson

Support staff

July 1, 2016 at 08:48

Hello,

Please show an example for what buttons you want to add that effect.

Best regards,
Jack Richardson.

#132049 Copied

talonhead

Participant

July 1, 2016 at 08:57

Hey Jack.

All of the buttons. It *seems* like the only buttons that do ease are the “add to cart” button on the single product page and all buttons that are in popups on the site.

No “add to cart” or “select options” button on the Shop page or Category page does ease.

I could be wrong. Feel free to poke around and double check me. I’ve looked at so many things here lately that it all starts to look the same.

Please, contact administrator
for this information.

#132053 Copied

talonhead

Participant

July 1, 2016 at 08:57

Hey Jack.

All of the buttons. It *seems* like the only buttons that do ease are the “add to cart” button on the single product page and all buttons that are in popups on the site.

No “add to cart” or “select options” button on the Shop page or Category page does ease.

I could be wrong. Feel free to poke around and double check me. I’ve looked at so many things here lately that it all starts to look the same.

Please, contact administrator
for this information.

#132055 Copied
Jack Richardson

Support staff

July 1, 2016 at 09:07
Hello,

Please use this css code:
```
.product .content-product .btn {
   transition: all 0.2s ease-in-out;
}
```
Best regards,
Jack Richardson.
#132058 Copied
talonhead

Participant

July 1, 2016 at 10:09

That did the trick. Thanks!

Once an item has been added to cart from the single product page, a popup appears to confirm that action.

Those buttons need the radiused corners as well as the popup’s corners itself radiused. See screenshot.

Please, contact administrator
for this information.

#132080 Copied
Eva Kemp

Support staff

July 1, 2016 at 10:23
Hello,

Try the following css code:
```
.emodal .emodal-text .btn {
    border-radius: 5px;
}
```
Regards,
Eva Kemp.
#132084 Copied
talonhead

Participant

July 1, 2016 at 14:24

That worked for the buttons…now what about the popup itself radiused?

#132114 Copied
Jack Richardson

Support staff

July 1, 2016 at 14:39
Hello,

Add this css code:
```
.emodal {
    border-radius: 5px;
}
```
Best regards,
Jack Richardson.
#132125 Copied
talonhead

Participant

July 1, 2016 at 14:47

Thanks Jack…that worked.

And the product description color changed to #353535? Not all the text…just the item

#132128 Copied

Jack Richardson

Support staff

July 1, 2016 at 16:39

Hello,

Please show us on screenshot the item you are talking about, also give us a direct link to the mentioned page as your last query isn’t clear. And what color should be for that item?
Thank you.

Best regards,
Jack Richardson.

#132147 Copied

talonhead

Participant

July 1, 2016 at 16:43

It isn’t a page…it’s a popup.

I didn’t sway from the subject. I thought it was clear. We’re on the subject of the popup that appears when adding something to the cart.

The color was also mentioned…#353535

http://prntscr.com/bnjfp2

Item description only to change color to #353535

#132150 Copied
Jack Richardson

Support staff

July 1, 2016 at 17:13
Hello,

Please use this css code:
```
.emodal .emodal-title {
  color: #353535;
}
```
Best regards,
Jack Richardson.
#132155 Copied
talonhead

Participant

July 1, 2016 at 21:55

Thanks Jack. That of course did the trick.

One thing I’ve noticed…if you go to the Cart page, delete multiple items one by one until the cart is empty, I don’t get the “empty shopping cart” message and image. I also don’t get the cart icon to update itself to $0.00 (although when hovering, it says that the cart is “empty”.

Any thoughts on this? See screenshot of what I see when I manually remove items from my cart.

Please, contact administrator
for this information.

#132174 Copied

Jack Richardson

Support staff

July 2, 2016 at 09:31

Hello,

The problem is caused by woocommerce 2.6.x update. Our developer team is working on fixes in theme update. So we recommend to revert back woocommerce plugin to version 2.5.5 until theme update is released.

Best regards,
Jack Richardson.

#132217 Copied

talonhead

Participant

July 2, 2016 at 15:25

Well actually, I’m on 2.5.5 Woocommerce 🙂
Any more ideas?

#132241 Copied

talonhead

Participant

July 2, 2016 at 15:28

Also, speaking of empty shopping carts, the button “return to shop” needs the ease in ease out function as well.

What code is that please?

https://gyazo.com/5c9e106cba8f975630dca645f5bf5ff4

#132243 Copied
Eva Kemp

Support staff

July 4, 2016 at 07:27
Hello,

Please use this code for the button:
```
.empty-cart-block a.btn.filled.active {
  transition: all 0.2s ease-in-out;
}
```
As I see you’re using the latest Woocommerce version http://prntscr.com/boil0p.
So please downgrade to the Woocommerce 2.5.5 version.

Regards,
Eva Kemp.
#132304 Copied
1 2 3 4 5 6

Viewing 60 results - 31 through 60 (of 161 total)