WooCommerce gallery

[fabipaolini]

Hi thanks so much for your incredible support!
Okay, I have something happening that I don’t know how to fix

My WooCommerce product page looks like this with the gallery on top:
http://www.jennyonthego.com/wp-content/uploads/2017/11/gallery1.jpeg

and I want it to look like this with the Gallery on the bottom:

Please let me know what to do!
Thanks!

[Joao]

Hi There,

Please try adding the following CSS to Theme options CSS

If that does not work , please provide your URL.

Cheers!

@media(min-width: 480px) {
 .flex-control-nav.flex-control-thumbs img {

    height: 4em;
}}
  @media(max-width: 480px) {
 .flex-control-nav.flex-control-thumbs img {

    height:2em
}
.single-product .flex-viewport {
    max-height: 300px !important;
}
.flex-control-nav.flex-control-thumbs {
    padding: 0px;
    width: 100%;
    padding-top: 1em;
}}

img.attachment-shop_single.size-shop_single {
    width: 100% !important;
   padding: 4px;
    line-height: 1.8;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    -webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
    transition: border 0.3s ease,box-shadow 0.3s ease;
}

[fabipaolini]

@Joao

@media(min-width: 480px) {
.flex-control-nav.flex-control-thumbs img {

height: 4em;

}}
@media(max-width: 480px) {
.flex-control-nav.flex-control-thumbs img {

height:2em

}
.single-product .flex-viewport {
max-height: 300px !important;
}
.flex-control-nav.flex-control-thumbs {
padding: 0px;
width: 100%;
padding-top: 1em;
}}

img.attachment-shop_single.size-shop_single {
width: 100% !important;
padding: 4px;
line-height: 1.8;
border: 1px solid #e5e5e5;
background-color: #fff;
-webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
transition: border 0.3s ease,box-shadow 0.3s ease;
}

Hi Joao! Thank you for your help as always!
It worked, but the images are on top, not at the bottom. I’m sending you my username and password for you to see.
Thanks!

[thai]

Hi There,

Please also add this custom CSS:

.flex-control-nav.flex-control-thumbs {
    top: auto;
    width: 100%;
    text-align: center;
}
.single-product .entry-wrap {
    padding-bottom: 120px;
}

Let us know how it goes!

[fabipaolini]

Hi! Thanks it worked…but now the images are on top of the Related products tab
You can see it here:

http://www.jennyonthego.com/product/marcela-b/

How do I fix that?
Thanks!

[Prasant]

Hello @fabipaolini,

You can add following CSS to fix images getting overlapped on top of Related Products title:

.woocommerce .related {margin-top: 100px;}

Thanks.

[fabipaolini]

Ok, that worked…but now I have the additional information on top! haha
How do I completely hide the Additional Information box?

http://www.jennyonthego.com/product/test-shoe/

[thai]

Hi There,

Please also add this CSS:

.woocommerce div.product .woocommerce-tabs {
margin-top: 130px;
}