- This topic has 17 replies, 1 voice, and was last updated 8 months, 3 weeks ago by
Raul.
-
AuthorPosts
-
August 13, 2019 at 12:18 pm #983315
Raul
Hello,
I am working on a site in which Artworks are woocommerce products organized by Art Series (product categories). Some Series have only one single artwork, wheres other include multiple artworks.
Is it possible to change the number of columns shown for certain product category archives? For example show 4 columns for art series (category) with many artworks, such as http://35.232.201.230/~suzanne2/product-category/artworks/remote-sensing/ and 1 column for art series with one single artwork such as http://35.232.201.230/~suzanne2/product-category/artworks/twilight/
Otherwise, how can I display the product thumbnail in GP Element? i.e. this specific art series called Biota shows currently the category image via
the_post_thumbnail( );
. Perhaps there is a way of showing the product, with the image hover option to show second image and link to single product page…Thanks!
August 13, 2019 at 12:42 pm #983343David
StaffCustomer SupportHi there,
you can use the filter provided in this article:
https://docs.generatepress.com/article/option_generate_woocommerce_settings/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 13, 2019 at 1:39 pm #983398Raul
Amazing David, very useful.
The problem is that when I choose 1 column, the image is pixelated. I guess it comes from what is selected in appearance customizer, which is set to a 4 column-layout. Any idea?
See here http://35.232.201.230/~suzanne2/product-category/artworks/twilight/Additionally, I would like the layout to be controlled from the back-end instead of manually adding them to
functions.php
. I tried adding a true/false ACF field linked to categories… but I don’t really know how to make that work. Will try the ACF forum as well.August 14, 2019 at 3:31 am #983753David
StaffCustomer SupportCan you confirm the original image size of the product?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 14, 2019 at 8:38 am #984112Raul
I believe the issue is relate to this other thread https://generatepress.com/forums/topic/images-of-woocommerce-at-the-same-height/#post-983348
I removed the CSS code affecting the size of the product image and now the one column layout shows a small thumbnail.
Should I use 1 column in the customizer and then change 4 columns in functions?
I understand woocommerce lets you control the width of images, but I also would like to define the max-height.
August 14, 2019 at 9:10 am #984140David
StaffCustomer SupportOk so try this CSS to target that specific tag archive:
.woocommerce.term-twilight ul.products li.product a img { width: 1010px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 14, 2019 at 9:33 am #984165Raul
Thank you David, it works but still images are pixelated. And second image is smaller therefore does not fill the container.
http://35.232.201.230/~suzanne2/product-category/artworks/twilight/The original files are large:
– http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_012.jpg
– http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015.jpgAugust 14, 2019 at 11:10 am #984234David
StaffCustomer SupportCan you disable the lazyloader you’re then flush and disable any caches. Then i can take another look.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 14, 2019 at 11:52 am #984264Raul
Done. I didn’t realize lazyloader was active, it was part of the smushit plugin…
August 14, 2019 at 5:21 pm #984451Tom
Lead DeveloperLead DeveloperHi there,
It looks like WooCommerce is serving a 300×300 image in that place.
I wonder if this filter will help?:
add_filter( 'subcategory_archive_thumbnail_size', function( $size ) { if ( function_exists( 'is_product_category' ) && is_product_category( 'twilight' ) ) { return 'full'; } return $size; } );
And then this CSS:
.archive .product_cat-twilight .inside-wc-product-image { display: block; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 15, 2019 at 7:12 am #984766Raul
Thank Tom,
it does not work. Still serving the 300px as setup in the customizer
August 15, 2019 at 4:45 pm #985253Tom
Lead DeveloperLead DeveloperOut of curiosity, does this do anything?:
add_filter( 'subcategory_archive_thumbnail_size', function( $size ) { return 'full'; } );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 16, 2019 at 10:18 am #985942Raul
Yes and no.
It seems to work but only after I go into the product and view its images (featured and gallery)However, this is what gets loaded… but it looks fine now !?!?!
<img width="300" height="200" src="http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-300x200.jpg" class="secondary-image attachment-shop-catalog" alt="Twilight" srcset="http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-300x200.jpg 300w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-800x533.jpg 800w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-768x512.jpg 768w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-1024x683.jpg 1024w, http://35.232.201.230/~suzanne2/wp-content/uploads/1612_Nectar_War_upon_the_Bees_Pratt_015-600x400.jpg 600w" sizes="(max-width: 300px) 100vw, 300px" style="opacity: 0;">
August 16, 2019 at 4:11 pm #986166Tom
Lead DeveloperLead DeveloperHmm, let’s try this:
add_filter( 'option_woocommerce_thumbnail_image_width', function( $width ) { if ( function_exists( 'is_product_category' ) && is_product_category( 'twilight' ) ) { return 1000; } return $width; } );
Unfortunately, the WC documentation when it comes to this stuff isn’t very good at all.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 17, 2019 at 1:12 pm #986778Raul
Uhmmm, unfortunately it does not seem to work.
-
AuthorPosts
- You must be logged in to reply to this topic.