I get on a single product a nice square image. But the thumbnails below are very very small and are showed on top of the larger first image.
How can I adjust this. There is also a zoom option wich I don’t like. the sample sites doesn’t show this.
Please help
Hi Edwin,
For the thumbs you can add the following code in your CSS. bigger through changing height.
.flex-control-nav.flex-control-thumbs img {
width: auto;
height: 50px;
vertical-align: top;
transition: opacity 0.3s ease;
cursor: pointer;
}
Hey Joy,
Thanks for chiming in!
@edwindekuiper, the code given by joy is almost correct.
To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)
.flex-control-nav.flex-control-thumbs {
position: relative;
}
.flex-control-nav.flex-control-thumbs img {
width: auto;
height: 50px;
vertical-align: top;
transition: opacity 0.3s ease;
cursor: pointer;
}
.woocommerce-product-gallery__trigger img {
opacity: 0;
}
We would loved to know if this has work for you. Thank you.
RueNel and joybram thank you for this CSS-code. this does the trick, almost. I need to define size and space for the thumbs better, but I will solve this.
But, the action is not gooed for me, I see that the picture is zoomed in. But I want to show it larger, as an layer over the page. Lichtshow, or how do you call it? Like this sample: http://demo.select-themes.com/hazel3/product/leather-vanity-case/
Hi,
I am not really sure what you would like to happen.
To reduce the image size, you can add this in Custom CSS
.woocommerce .product .images {
width: 25%;
}
.woocommerce .summary {
width: 70%;
}
You may change 25% and 70% to adjust the width of your image and content.
Hope that helps.
I’m sorry if my explenation was not clear.
I ment that I don’t want the zoom functionality but the function like you see here with the photo:
http://demo.select-themes.com/hazel3/product/leather-vanity-case/
Your own sample has also the right functionality with the images…
http://demo.theme.co/shop-ethos/product/flying-ninja/
What should I do to have this on my site?
http://nieuw.stijlapart.nl/meubels-en-interieurs/tafels/gewoon-mooie-eettafel-table-basics/
Hello there,
What is going wrong on this new installed website with X theme and Ethos stack?
http://nieuw.stijlapart.nl/meubels-en-interieurs/tafels/gewoon-mooie-eettafel-table-basics/
I can’t beleive that I need to CSS everything by my self, that’s not why I bought the theme…
please help
Hi,
Please note that the zoom and thumbnails over the image was added by woocommerce in their recent update.
To disable it, you can add the code below in your child theme’s functions.php file.
add_action( 'after_setup_theme', 'remove_pgz_theme_support', 100 );
function remove_pgz_theme_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
Hope that helps.
This helps, thanks.
My question about the layout of the productpage is still valid.
If you compare http://nieuw.stijlapart.nl/meubels-en-interieurs/tafels/gewoon-mooie-eettafel-table-basics/ with your samples http://demo.theme.co/shop-ethos/product/flying-ninja/ there is a lot CSS work to do before I get the right result.
How can I solve this?
Hi there,
The Single product page of the Theme demo is using Woocommerce version 2.6.4, Woocommerce version 3+ completely changed things around regarding the gallery and stuff.
You can not achieve the same single product page with version 3. But we can give you proper CSS code to make it a little bit like the old view if you are interested, but unfortunately, the given URL for your website single product page is not valid anymore.
Would you please kindly get back to us with the correct URL and detailed desciption of the changes you want for that page.
Thank you.
Hi
Thank you if you will give me a proper css, because now the site doesn’t look good.
Indeed, my provider did something wrong, thats why the site was not valid. It is now and you can find it on
http://nieuw.stijlapart.nl/meubels-en-interieurs/
The following problems I experiences:
thank you in advance
Hi,
To make the layout similar as before, you can add the code below in X > Launch > Options > CSS
.single-product .woocommerce-product-gallery__image>a>img {
width:100%;
}
.single-product .flex-control-nav.flex-control-thumbs li {
float: left;
width: 9.86%;
margin-bottom: 8px;
}
.single-product .flex-control-nav.flex-control-thumbs li:nth-child(10) {
margin-left: 0 !important;
}
.single-product .flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
}
.single-product .flex-control-nav.flex-control-thumbs {
position: relative;
padding-left: 0;
padding-right: 0;
padding-top:8px;
}
Hope that helps.
Hi Paul,
Thank you, it is getting somewhere.
Yes this helps, I made a small adjustment to get only three thumbs on a row below the larger picture.
Is the X-theme mentioned to adjust the layout through CSS-code? The layout is not scalable/responsive enough.
I asked this because is do have a small white margin left on the next thumbnail row.
I can’t adjust the h1,h2, h3 Heights without CSS-code
Please advice, I’m not a webdeveloper
Hello There,
Thanks for updating in!
1.) To remove the small white margin in the next row in your thumbnails, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)
.single-product .flex-control-nav.flex-control-thumbs li:nth-child(3n+1) {
margin-left: 0;
}
2.) You will need to adjust the line heights of the heading tags you have added in the description. To do that, you can make use of this code:
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description .h2,
.woocommerce-product-details__short-description h3,
.woocommerce-product-details__short-description .h3 {
line-height: 1.1;
}
Feel free to adjust the line heights.
Hope this helps. Kindly let us know.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.