-
Posts
-
Dear Kriesi,
we would like to display smaller images in product categories pages . It would be enough to do that to display 6 images per row, but if I go in WooCommerce => Settings => Products => Display the drop-down menu “Column Count” only allows a maximum of 5. It seems that it is a restriction set by Enfold because there is written underneath
#############
Notice: These options are added by the Enfold Child Theme and wont appear on other themes
#############I tried to hack the restriction adding this function
################
// Override theme default specification for product # per row
function loop_columns() {
return 6; // 6 products per row
}
add_filter(‘loop_shop_columns’, ‘loop_columns’, 999);
################
but is rendered with 4 images in one line and 2 in anotherThere is a way to display 6 images per row or anyway smaller images?
Thank you Mauro
Hey profumopuntoit!
can you provide us a link showing what you mean? because we need to inspect the elements. WordPress is cropping images by default and with a plugin like this you can control image sizes: https://wordpress.org/plugins/simple-image-sizes/
Cheers!
AndyWe would like to have 6 columns like in this image (made with photoshop)
http://www.profumo.it/screenshots/6COLONNE.jpg
Thank you MauroI have resized with simple-image-sizes the size “shop_catalog” that I suppose is the one related to shop catalog images but images are loaded as 180×180 as intended but enlarged to 230x230px and the graphical result is as before.
We would like to see smaller images, not just to load smaller images.Thank you Mauro
Hi!
Sorry for the late reply!
Can you please re-apply the changes you applied and then create a temporary admin login and post it here privately so we can look into it?Cheers!
YigitThree functions are at the bottom of functions.php, one enabled and two commented
You can look for instance at http://naturalnicheperfume.com/en/fragrances/olfactory-jewels/the-scents-of-the-soul/thank you Mauro
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.shop_columns_5 .products .product { width: 15.8%; }Best regards,
YigitThank you very much, it works perfectly.
Also in mobile view, we would like to have smaller product images. How can I resize them?
Hi!
Use this to resize the product items on mobile:
@media only screen and (max-width: 767px) { .responsive #top #main .products .product { margin: 0 1% 1% 0; width: 32.3%; clear: none; } } @media only screen and (max-width: 479px) { .responsive #top #main .products .product { margin: 0 0 20px 1%; width: 48%; } }Cheers!
IsmaelThank you Ismael,
but in this way on mobile I see the website with very small images, three per row.
What I would like to have is one image only per line but not so big.
Thank you Mauro
Hey!
then just adjust the width of Ismael’s first code to for example:
@media only screen and (max-width: 767px) { .responsive #top #main .products .product { width: 100%; } }Regards,
AndyNo change.
The result, with three products per line looks good, the problem is that they are not aligned properlyHey!
hm? three products per line looks good? in your previous post you said you wish one image only per line. So not sure what you trying to achieve. Can you provide us a mockup please? use imgur.com or dropbox.
Best regards,
Andywe would like either to have 1 image per row but smaller
http://www.profumo.it/screenshots/notToo.big.PNG
also three per row might be ok but there is a problem with the aligning
http://www.profumo.it/screenshots/3xrow.PNG
Thank you Mauro
Hey!
as I already told you, use this code:
@media only screen and (max-width: 767px) { .responsive #top #main .products .product { width: 100%; } }and adjust as needed.
If it does not work for you, then remove the width line from Ismael’s code, so there are no double lines. You could also try to add an !important:@media only screen and (max-width: 767px) { .responsive #top #main .products .product { width: 90% !important; } }Best regards,
AndyHi!
Add this code inside the css media query above:
.responsive #top #main .products .product { margin: 0 auto !important; float: none; }Regards,
IsmaelWe have in the home page a product slider.
Him too accept only a maximum of 5 products.
How can I change this setting and bring it to six?
Please see http://www.profumo.it/screenshots/six-slider.PNG
Thank you Mauro
Hey!
please always include a precise link showing what’s in your screenshot, so we can inspect the elements.
Regards,
AndyHey!
I’m sorry but it’s not possible to set the post slider to more than 5 items because each set is inside a product wrapper. If you click the “next” or “previous” button it will go to the next wrapper containing another set of items.
Regards,
IsmaelThat’s quite a problem because it is in the home page and if we cannot put six columns in all the graphical istances of all the site, we have to abandon the solution reached in the first part of this ticket and look for something else.
The point is that the shop owner doesn’t like at all big images in category and home page. Having 6 products per row was a nice solution.
Do you have another way to display smaller images?Thank you Mauro
Hey!
you could use gallery element for example and choose to display thumbnail pictures. You could control thumbnail size (image size in general) with this plugin: https://wordpress.org/plugins/simple-image-sizes/ if you need even smaller images.
Hope this helps.Best regards,
Andy
- You must be logged in to reply to this topic.