[aarondub84Participant]

Is there a way to make the woocommerce cart 100% width in the container and move the subtotal and total to the right side?
http://dallascreative.co/planoparc/cart/

Also, is there a way to make the header a sticker header in mobile?

[Rue NelModerator]

Hello There,

Thanks for posting in!

To make the woocommerce cart 100% width in the container and move the subtotal and total to the right side, please edit your cart page and select the Layout – Fullwidth page template. Please see the screenshot http://prntscr.com/72eke8

To move your sub total and total to the right side, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce .cart-collaterals .cart_totals, 
.woocommerce-page .cart-collaterals .cart_totals {
    float: right;
    width: 50%;
}

Feel free to increase the width if you need to.

To make the header a sticker header in mobile, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
 .x-navbar-fixed-top, 
 .x-navbar-fixed-left, 
 .x-navbar-fixed-right {
  position: fixed !important;
 }
}

Please let us know if this works out for you.

[aarondub84Participant]

One more question. Is there any way to make woocommerce single product image (http://dallascreative.co/planoparc/product/violin-lessons/) be a circular image like the one in this link:
http://dallascreative.co/planoparc/academics/math/

[Rue NelModerator]

Hello There,

To make woocommerce single product image be a circular image like the one in the link, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-product .images .woocommerce-main-image {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    margin:  0 auto;
}

Always make sure that your product image that you will upload is of the same width and height. Square images creates a perfect circle. Rectangular images will create an ellipse.

Let us know if this has been helpful to you.

[CortlandCoffeyParticipant]

Is there a way to float the cart totals to the right as you’ve done here but then float the cart to the left so they sit side by side? I think that would make for better UX on the desktop site.

[JadeModerator]

Hi @cortlandcoffey,

We could try it by adding a custom CSS but kindly provide us with the URL of your site so that we could check further. Thanks!

[Author]

Posts