Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 31, 2015 at 8:29 am #481137
    combra

    Hey,

    i want to move product description a bit down (under product images) and show the product description on full width, any solution?

    July 31, 2015 at 1:32 pm #481303
    combra

    I saw this code:

    .single-product-summary {
    overflow: visible;
    }
    .template-shop div.product div.summary {
    width: 60%;
    float: left;
    }

    This works. Now i need to move the product description a bit up. And move thumbmails to the right under short product description.

    August 3, 2015 at 1:30 pm #482079
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .single .woocommerce-tabs {
    position: relative;
    top: -100px;
}

    Regards,
    Yigit

    August 3, 2015 at 2:53 pm #482123
    combra

    Thanks,

    is it possible to move thumbmails to the right of the big image?

    August 4, 2015 at 7:01 am #482516
    Ismael

    Hi!

    I’m not sure if this is what you’re looking but you can try this in the Quick CSS field:

    .template-shop .single-product-main-image .images a {
    width: 50%;
    float: left;
}

.single-product-main-image .thumbnails {
    margin-top: 10px;
    width: 45%;
    float: left;
}

.single-product-main-image {
    width: 100%;
    float: left;
}

    A screenshot will help.

    Regards,
    Ismael

    August 4, 2015 at 8:13 am #482553
    combra

    Hey Ismael, thanks again. This does not work for me. See Screenshot on private. I draw it like i need it :P

    August 4, 2015 at 9:18 am #482580
    combra

    .single-product-main-image .thumbnails {
    margin-top: 10px;
    width: 45%;
    }

    .single-product-main-image .images a {
    width: 70%;
    float: left;
    }

    I added this code now. This is fine. I just need to move thumbnails to the right beside the main image. And the image overlay needs to be fit (it breaks the border of main image)

    • This reply was modified 8 years, 10 months ago by combra.
    August 5, 2015 at 1:07 pm #483283
    combra

    Any help?

    August 6, 2015 at 4:18 am #483650
    Ismael

    Hi!

    I’m sorry but what you’re trying to do is not possible without major modification on product template because those thumbnails are located on a different container.

    Regards,
    Ismael

    August 6, 2015 at 10:29 am #483766
    combra

    Hey,

    isnt is possible to move thumbnails to the right of main image? I reduced main image size, so it should enough place for doing this or? I added a screen, how it should be.

    August 7, 2015 at 7:51 am #484314
    Ismael

    Hi!

    You can try this:

    .template-shop .single-product-main-image .images a {
    width: 70%;
    float: left;
}

.single-product-main-image .thumbnails {
    width: 25% !important;
    float: left;
    margin-left: 4%;
}

#top .single-product-main-image .thumbnails a {
    width: 48%;
}

    Regards,
    Ismael

    August 7, 2015 at 8:17 am #484323
    combra

    Thats looks better. Just Two things to be ready with this:

    1. Move thumbnails a bit top (Make it even with main image)
    2. On hover on main image, the hover effevt (overlay) is breaking the border right.

    August 7, 2015 at 12:04 pm #484470
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    div.product div.images div.thumbnails {
    padding-top: 0;
    margin-top: 0;
}
.single-product .image-overlay { display: none !important; }

    I could not see the second issue but second code should remove image overlay from product gallery on single product page.

    Regards,
    Yigit

    August 7, 2015 at 2:38 pm #484545
    combra

    I love u :)

    Thanks! Maybe my last question for single-product.

    1. Possible to move Short Product description a bit to left, that the whitespace isnt that big between thumbnails and short description?
    2. How to remove whitespace between end of product description and footer?

    Happy Weekend

    August 7, 2015 at 2:42 pm #484547
    Yigit

    Hi!

    Enfold loves you back :)
    Please add following code to Quick CSS as well

    .single-product-summary {
    margin-bottom: -100px;
}
.single-product-main-image {
    margin-right: 0;
}

    Have a great weekend!

    Regards,
    Yigit

    August 10, 2015 at 8:10 am #485072
    combra

    Thanks, topic is solved!

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Move Product description to full width’ is closed to new replies.