Return to previous page

Shopping Cart in sidebar closes - by Michael

This topic has 14 replies, 2 voices, and was last updated 9 years, 9 months ago ago by Eva Kemp

  • Avatar: snoowy
    Michael
    Participant
    May 25, 2015 at 05:00

    Hi,
    I’ve been testing the Shopping Cart widget and have encountered a few issues.

    (1) Using widget (WPEC) Shopping Cart in the ‘Product Page Sidebar’.

    (1.a) When the ‘Shopping Cart’ link/app in the top right of the page is hovered over and then ‘un-hovered’ it closes the Shopping Cart in the top right of the page correctly but it also closes the Shopping Cart in the sidebar. The page needs to be reloaded to display the Shopping Cart in the sidebar.

    (1.b) The Checkout button for the widget seems to be missing its right pointing arrow.

    (2) Using the widget (WPEC) Shopping Cart in the ‘Single Product Sidebar’.

    Although it’s probably not expected to be put here I widened the ‘Single Product Sidebar’ to 220px and shrunk the product image area to accommodate the wider Shopping Cart widget.

    (2.a) As in (1) above the cart closes on exit from the hover.

    (2.b) The Checkout button for the widget seems to be missing its right pointing arrow.

    (2.c) The Empty Cart button overwrites the Checkout button which seems to be related to .button.emptycart { right: -98px; }.

    I am using a fair amount of custom CSS but the problems still occur with all that removed.

    You can see the Shopping Cart widget problems at my staging website as listed in the private content section.

    Thanks,
    Mike.

    Please, contact administrator
    for this information.
    #65720 Copied Theme version: 3.1
    13 Answers
    Avatar: Eva
    Eva Kemp
    Participant
    May 25, 2015 at 08:46

    Hello,

    We’ll fix the issue with shopping cart in the next update.
    Meanwhile you can disable one of the shopping carts.
    Please provide us with a screenshot where you see that Checkout button is missing and where the issue with empty cart button.

    Thank you.
    Regards,
    Eva Kemp.

    #65746 Copied
    Avatar: snoowy
    Michael
    Participant
    May 25, 2015 at 10:13

    Hi Eva,
    How do I send you the screen shots?

    Regards,
    Mike.

    #65775 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    May 25, 2015 at 12:48

    Hello,

    You can upload your screenshots to some image storage, for example http://imgur.com/ or using dropbox https://www.dropbox.com/ and provide us with links to your images.

    Thank you.
    Regards,
    Eva Kemp.

    #65830 Copied
    Avatar: snoowy
    Michael
    Participant
    May 26, 2015 at 07:32

    Hi Eva,

    You can find a screenshot of the Product Page Sidebar which seems to be missing a right had arrow for the checkout button here..
    http://wpbugs.com/wp-content/uploads/2015/05/Cart-in-Product-Page-Sidebar.png

    You can find a screenshot of the Single Product Sidebar where the Checkout button is overwritten by the Empty Cart button here..
    http://wpbugs.com/wp-content/uploads/2015/05/Cart-in-Single-Product-Sidebar.png

    Regards,
    Mike

    #65974 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    May 26, 2015 at 09:17

    Hello,

    Please add this code in custom.css file:

    .button.emptycart {
 right: 8px !important;
}
.widget_wpsc_shopping_cart .button.active {
  background-image: url('http://staging1.firstclassvitamins.co.nz/wp-content/themes/blanco/images/arrow_1_2.png');
  background-repeat: no-repeat;
  background-position: right;
}

    Regards,
    Eva Kemp.

    #65993 Copied
    Avatar: snoowy
    Michael
    Participant
    May 26, 2015 at 09:37

    Hi Eva,
    The CSS has been added. That’s improved it a lot but maybe a little more tweaking will get it perfect.

    (1) The Checkout button is not as wide as the Empty Cart button
    (2) The text and arrow in the Checkout button is not quite aligned to match the Empty Cart button.
    (3) In the single product sidebar the cart total is right on top of the two buttons (Empty Cart / Checkout) where-as in the product page sidebar there’s blank space under the cart total then the buttons which looks tidier.

    Thanks,
    Mike.

    #66006 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    May 26, 2015 at 10:49

    Hello,

    1. Add this code as well:
    .widget-container.widget_wpsc_shopping_cart {width: 95%;}

    2. Add this code:

    .widget_wpsc_shopping_cart .button.active {
    background-image: url("http://staging1.firstclassvitamins.co.nz/wp-content/themes/blanco/images/arrow_1_2.png");
    background-repeat: no-repeat;
    position: relative;
    background-position: 94% center !important;
    padding-right: 23px !important;
}

    instead of this one:

    .widget_wpsc_shopping_cart .button.active {
  background-image: url('http://staging1.firstclassvitamins.co.nz/wp-content/themes/blanco/images/arrow_1_2.png');
  background-repeat: no-repeat;
  background-position: right;
}

    3. Sorry but your last query is unclear. What do you want to achieve?

    Thank you.
    Regards,
    Eva Kemp.

    #66018 Copied
    Avatar: snoowy
    Michael
    Participant
    May 26, 2015 at 11:01

    Hi Eva,
    I had a go at fixing (3) above and came up with this CSS which seems to work – although maybe it’s not the correct/best syntax to do it?

    #product-page .totals { margin-bottom: 20px; }

    Regards,
    Mike.

    #66022 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    May 26, 2015 at 11:07

    Hello,

    Could you please clarify with more details what you want to achieve?

    Thank you.
    Regards,
    Eva Kemp.

    #66025 Copied
    Avatar: snoowy
    Michael
    Participant
    May 26, 2015 at 12:10

    Hi Eva,
    The goal here is to make the shopping cart widget when placed in either the Product Page Sidebar or the Single Product Sidebar to look the same, including the Empty Cart and Checkout buttons having the left/right pointing arrows.

    Your second CSS statement beginning

    .widget_wpsc_shopping_cart .button.active {..........

    did not work as well as the first version so I’ve gone back to that. The second version removed the Checkout arrow.

    The current CSS being used is:-

    (1) My CSS to add blank space/lines under the cart total in the single product page sidebar so it matches the layout of the cart in the product page sidebar.

    #product-page .totals {
    margin-bottom: 20px;
}

    (2) Your CSS to add/restore the arrow to the Checkout button and align it tidier.

    .button.emptycart {
 right: 8px !important;
}

.widget-container.widget_wpsc_shopping_cart {width: 95%;}

.widget_wpsc_shopping_cart .button.active {
  background-image: url('http://staging1.firstclassvitamins.co.nz/wp-content/themes/blanco/images/arrow_1_2.png');
  background-repeat: no-repeat;
  background-position: right;
}

    The only thing outstanding is that text and arrow in the Checkout button in the sidebars is still bit too far to the right – it’s not the same as the Checkout button in the header shopping cart.

    Regards,
    Mike.

    #66031 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    May 26, 2015 at 13:22

    Hello,

    I’ve added this code in your custom.css file:

    .widget_wpsc_shopping_cart .button.active {
    background-image: url("http://staging1.firstclassvitamins.co.nz/wp-content/themes/blanco/images/arrow_1_2.png");
    background-repeat: no-repeat;
    position: relative;
    background-position: 94% center !important;
    padding-right: 23px !important;
}

    Please check the Checkout button now.

    Regards,
    Eva Kemp.

    #66050 Copied
    Avatar: snoowy
    Michael
    Participant
    May 26, 2015 at 14:16

    Hi Eva,
    That’s looking good now. Please go ahead and close this topic.
    Thanks for your help,
    Mike.

    #66072 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    May 26, 2015 at 15:39

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

    #66105 Copied

  • Tagged: , , , , , ,

  • Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘Shopping Cart in sidebar closes’' has been successfully resolved, and the topic is now closed for further responses

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Business – WordPress WooCommerce Theme
lazy-placeholder
Royal – WooCommerce WordPress Theme
lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Cleaning – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WordPress WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme
lazy-placeholder
Headphone Store – WordPress WooCommerce Theme
lazy-placeholder
Man Store – WooCommerce Theme
lazy-placeholder
Marketing – WordPress WooCommerce Theme
lazy-placeholder
Skate – 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.