[JamesZLParticipant]

Hi awesome X-Theme Support!

I’ve added a WooCommerce-Cart Widget on my main sidebar (which shows on woocommerce pages). It looks great but when I scroll down, it doesn’t follow 🙁

How can I make it sticky / fixed, so it follows as I scroll down?

Thank you!

[JamesZLParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Sidebar not supposed to follow as it’s not fixed. But I can suggest you a workaround.

#1. You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        sidebar = $('.x-sidebar');

    if (scrollPos > 200) {
      sidebar.addClass('fixed-sidebar');
    } else {
      sidebar.removeClass('fixed-sidebar');
    }
  });
});

#2. Then add this under Custom > CSS in the Customizer.

.x-sidebar.fixed-sidebar {
  position: fixed;
  top: 140px;
  right: 6%;
}

Hope this helps.

Cheers!

[JamesZLParticipant]

Worked flawlessly! Thank you for great support!

Other questions regarding the sidebar:

1. Is there a way to style the “Checkout button?”

2. And remove the “Look in the Cart button”

[Rue NelModerator]

Hello There,

Thanks for updating in! It’s good to know that it has worked for you. For other issues;

#1] To style the checkout button, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.button.checkout.wc-forward {
    color: red;
    border: solid 1px red;
}

Feel free to change the colors so that it will fit with your site design.

#2] I am not sure where is that. At the moment, I do not see any styling to the check out button. Please see image below:
http://prntscr.com/ekxwit

Hope this helps.

[JamesZLParticipant]

Thanks for your response!

#1] It worked great! Thank you.. It seems that when the sidebar gets “sticky” it adds automatic margin to it.

How do I only style the “sticky” part of the sidebar? Because I would like it to just stay the same when scrolling down.

#2] I meant that I would like to remove the view cart button, how do you go about that?

#3] And 2 other questions are (not sure if it’s within your scope),

1. it says SUBTOTAL above the buttons. Is there a way to change it to say “Total” instead?

2. Changing the checkout button text to “go to checkout”?

[Rue NelModerator]

Hello There,

Thanks for updating in! To have the same width when the sidebar becomes sticky, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-sidebar .widget_shopping_cart {
    max-width: 316px;
}

To remove the “View Cart” button, you can make use of this code:

.x-sidebar .widget_shopping_cart .button.wc-forward:not(.checkout) {
    display: none;
}

Changing the SubTotal or any other change will mean custom development since this is a WooCommerce widget but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Thanks for understanding. Take care!

[Author]

Posts