Woocommerce Product Page layout

[AppellaGW]

Hi there
I managed to apply a bit of css to my woocommerce product pages to make the layout a bit tighter - see here:
http://bespoke-weddingrings.com/shop/mens/18-carat-white-gold-mens-court-profile-wedding-band

But what I really really want and don’t know if it’s possible is to bring the totals that appear at the bottom of the page under the gravity form with all the add on selections to come up under the main image and product gallery on the left of the page so that the customers can see it as they are making their selections and don’t get a nasty shock at what they have done to the price when they eventually hit the bottom.

Can you solve it for me?

[ruenel]

Hello There,

Thanks for writing in!

The Totals is part of the form. If you moved it to the left side, it may or may no longer work. It will also loss some of its styling because the styles only applies to the totals when it is within the form elements.

Please see for yourself by adding this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
    $('.single-product .product_totals').insertAfter( $('.single-product .thumbnails') );
})(jQuery);

Hope this helps. Kindly let us know.

[AppellaGW]

Hi there,

That works really well. thank you.

What I’ve done is given it a bit of styling and tried to make it sticky with this bit of css:

.single-product .product_totals{
background: #000033 !important;
border-style: solid;
border-width: 2px;
margin-top: 80px;
font-size: 20px;
padding-left: 60px;
padding-top: 5%;
position: -webkit-sticky !important;
position: sticky !important;
top: 0px;
}
Sticky not working though - is that because the JS is overriding (I am out of my depth here!!)

Is there anything else I can do so that it sticks by them as they go down the form and stops when they reach the Add to Cart button?

[ruenel]

Hello There,

Sticky position is not supported in other browsers. At the moment you cannot use it because it will just simply does not work in other browsers. Please check this out: https://caniuse.com/#feat=css-sticky

To know more about this css, you might need to check this out:
https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Since this is a custom development, regretfully this is beyond the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you very much for your understanding.

[AppellaGW]

Ok thanks for your help with this all the same, and for the links.

[rad]

You’re most welcome!