Return to previous page

Shopping Cart Popup Tweaks? - by talonhead

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

  • Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    talonhead
    Participant
    June 22, 2016 at 16:45

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

    #130686 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    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
    Avatar: talonhead
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: talonhead
    talonhead
    Participant
    June 24, 2016 at 12:08

    Works good.

    A few things I’ve found when working over all scenarios of adding products to the cart.

    When wanting to “remove item” by clicking the “x” in the popup, SOMETIMES it just takes me to the cart page to remove the item. And then, sometimes, it doesn’t and does it all within the same page you are on when removing an item from the popup…as it should.

    Incidentally, when I do remove an item from the Cart page, SOMETIMES the Cart icon $0.00 doesn’t update itself with the new amount that is in the cart. In order for it to update, you have to manually refresh the page. Other times, it updates itself just fine.

    Thoughts on all of this?

    Also, when there are no products in cart, can we hide the $0.00 and icon please?

    Also, I need to get the item count in the Cart icon like on the Classico site? http://prntscr.com/bkf73w

    #130977 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    June 24, 2016 at 13:52

    Hello,

    The issue with items removal will be fixed in the next theme update.

    when there are no products in cart, can we hide the $0.00 and icon please?

    Unfortunately there is no such option. Sorry.

    I need to get the item count in the Cart icon like on the Classico site

    It can’t be done with font awesome icon.

    Regards,
    Eva Kemp.

    #130993 Copied
    Avatar: talonhead
    talonhead
    Participant
    June 24, 2016 at 14:08

    You’re just full of good news today.

    When an item is added to the cart from the Shop page, you get a progress bar with a green checkmark at the end.

    I need that same action to happen when the item is added to the cart on the Single product page. I feel the popup that states it was “successfully added” is bothersome. The green checkmark is so much cleaner to use.

    Thoughts?

    #130997 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    June 24, 2016 at 14:45

    Hello,

    What you want to achieve requires additional customization which is beyond our basic support scope.
    You can contact our customization service https://www.8theme.com/customization-services/ for more information.

    Regards,
    Eva Kemp.

    #131001 Copied
    Avatar: talonhead
    talonhead
    Participant
    June 24, 2016 at 15:01

    Will do. I contacted them.

    Incidentally, on the Cart page, my Paypal buttons have gotten messed up somehow. They need to be below the “proceed to checkout” button. Not inline with it. If you look at screenshot, you’ll notice it’s a little tight configured that way.

    http://prntscr.com/bkheuq

    #131003 Copied
    Avatar: talonhead
    talonhead
    Participant
    June 24, 2016 at 15:06

    BTW…I don’t have an empty shopping cart page that looks like this http://prntscr.com/bkhhrx

    Rather: http://prntscr.com/bkhig6

    #131005 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    June 24, 2016 at 15:36

    Hello,

    You can add your content for empty cart page in Theme Options > E-Commerce > Shop > Text for empty cart.

    After what changes Paypal buttons got messed up?

    Have you changed WP admin credentials? We can’t log in now.

    Regards,
    Eva Kemp.

    #131009 Copied
    Avatar: talonhead
    talonhead
    Participant
    June 24, 2016 at 15:40

    I’m not sure what changes….other than all this popup tweaks we’ve made. Also, I believe WP was updated as well since then.

    See private content. I was forced to change credentials.

    Please, contact administrator
    for this information.
    #131011 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    June 24, 2016 at 17:35

    Hello,

    I’ve added this code in Custom CSS for desktop section:

    .wc-proceed-to-checkout {
   float: left;
}
.bag-total-table .checkout-button {
   display: table;
}
.paypal_checkout_button {
    margin-right: 20px;
    float: left;
    margin-top: 20px;
}
.paypal_checkout_button img {
  margin: 0 !important;
}

    Clear browser cache and check Cart page now.

    Regards,
    Eva Kemp.

    #131026 Copied
    Avatar: talonhead
    talonhead
    Participant
    June 25, 2016 at 15:35

    Since we’re on the same subject with those Paypal buttons, look at the screenshot of the buttons on the Checkout page. They need to be raised up inline with the text “Skip the forms and pay faster with paypal!”

    http://prntscr.com/bkwfof

    #131089 Copied
  • 1 2 3 4 5 6
    Viewing 30 results - 1 through 30 (of 161 total)

The issue related to '‘Shopping Cart Popup Tweaks?’' has been successfully resolved, and the topic is now closed for further responses

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Car Parts Store – WordPress WooCommerce Theme
lazy-placeholder
BookStore – WordPress WooCommerce Theme
lazy-placeholder
Handmade artisans – WordPress WooCommerce Theme
lazy-placeholder
WooPress Fullwidth
lazy-placeholder
Headphone Store – WordPress WooCommerce Theme
lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WordPress WooCommerce Theme
lazy-placeholder
Medical – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Application – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.