Hi Ismael,

that basically works, thanks. I just need your help with one small thing:

It is on category pages shown in the link below that the thumbnail sizes aren´t right and they don´t seem to be targeted by $size[‘portfolio‘]. Can you tell me which description I need to use? Thanks!

Best regards,
Sara

I’m so sorry… it still does not work.

I placed in in the Appearance Editor. But still this “Not found field”.

There was already some info in the editor. Could that be the reason? Or could it be this text: “Don’t display products in the clothing category on the shop page.”

This is al the info there is in there:

@media only screen and (max-width: 768px) {

/* Add your Desktop Styles here */
.responsive #top .products .product:nth-child(odd) {
clear: none !important;
}
}
post-type-archive .woocommerce-no-products-found {
display: none;
}
function custom_pre_get_posts_query( $q ) {
$tax_query = (array) $q->get( ‘tax_query’ );
$tax_query[] = array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘slug’,
‘terms’ => array( ‘cursus’ ), // Don’t display products in the clothing category on the shop page.
‘operator’ => ‘NOT IN’
);
$q->set( ‘tax_query’, $tax_query );
}
add_action( ‘woocommerce_product_query’, ‘custom_pre_get_posts_query’ );

For your information: This is in the Enfold Quick CSS. Could that be interfering?

.single-product-main-image {width: 66% !important;}

#top .product div.images img {
width: auto;
margin: 0 auto;
}

#top.archive .thumbnail_container img {
height: 324px;
}

@media only screen and (max-width:767px) {
.responsive #top #main .sidebar {
display: block !important;
width: 100% !important;
border: 0 !important;
}

.responsive #top #main .sidebar .inner_sidebar {
margin-left: 0 !important;
}
}
.avia-button {
background-color:gold!important;
}

.product_cat-cursus .single-product-main-image{
width: 30%!important;
}

add_action( ‘woocommerce_product_query’, ‘custom_pre_get_posts_query’ );

Guenni,

So, I am trying to do this step-by-step, removing the default Enfold-based image sizes first. I kept the bulk of your framework, but made a few little changes. I applied the code below to my child themes functions file, and then did a full regeneration of the images, and removed any images that did not have sizes anymore.

// Start Removing Image Sizes - Rev 20230907-3 //

// Remove or unregister unused WordPress Image Sizes (via Enfold)

// Disable loads of Enfold & WP image sizes upon upload
// do image sizes manually, double-size with high compression for retina screens
// use Photoshop to set exact double size and quality between Q30 and Q40
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}
// Remove unneeded WP image sizes
add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );
// Remove default image sizes here. 
function prefix_remove_default_images( $sizes ) {
// do NOT remove small and medium sizes, they are used in backend Media Library!
// unset( $sizes['small']); // 150px
// unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 unset( $sizes['1536*1536']); // 1536x1536px
 unset( $sizes['2048*2048']); // 2048x2048px
 return $sizes;
}

// Moduly Image Sizes
add_image_size('Moduly-Square', 1080, 1080, false);
add_image_size('Moduly-Horizontal', 1920, 1080, false);

This is the result (on Performance Tab > Responsive Images Overview section), after the above adjustments.
I do see the couple added image sizes, but unless I am a complete idiot, it still looks like the image sizes above are still being injected.

Images aspect ratio: 1 : 1
36*36 – Widget (added by theme)
108*108 – thumbnail (WP default size)
180*180 – Square (added by theme)
540*540 – medium (WP default size)
705*705 – Masonry (added by theme)
1080*1080 – large (WP default size)
1080*1080 – Moduly-Square (added by a plugin)
1500*1500 – Fullscreen Sections/Sliders (added by theme)
1536*1536 – 1536×1536 (WP default size)
2048*2048 – 2048×2048 (WP default size)
Images aspect ratio: 52 : 37
260*185 – Portfolio small (added by theme)
Images aspect ratio: 99 : 80
495*400 – Portfolio (added by theme)
845*684 – Gallery (added by theme)
Images aspect ratio: 142 : 75
710*375 – Magazine (added by theme)
Images keeping original aspect ratio
768*0 – medium_large (WP default size)
Images aspect ratio: 845 : 321
845*321 – Entry with Sidebar (added by theme)
Images aspect ratio: 1210 : 423
1210*423 – Entry without Sidebar (added by theme)
Images aspect ratio: 150 : 43
1500*430 – Featured Thin (added by theme)
Images aspect ratio: 50 : 21
1500*630 – Featured Large (added by theme)
Images aspect ratio: 16 : 9
1920*1080 – Moduly-Horizontal (added by a plugin)

Guenni,

I feel like an idiot on this, because it seems like I am doing it right, but am just not getting it to do what it would appear it should be doing. Any ideas where I have gone wrong?

ok on a fresh install – it works – so I think there must be something in the child theme functions.php that is preventing it from working correctly.

Edit: ok – this known snippet to set the lightbox size to full from galleries :

function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){
    $link = wp_get_attachment_image_src($attachment->ID, "full");
    return $link;
}
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);

disturbs the correct behavior of custom_link setting.

Hi Rikard,

we got it fixed over the Weekend. Thank you anyway!

For anyone with the Same Problem – her is what fixed it:

Path: /wp-content/plugins/woocommerce/includes/wc-template-functions.php
unset($classes[4]);
// print_r($classes);

Also, Add this CSS in the customizer :

@media only screen and (min-width: 768px) {

.archive ul.products {
http://width:100% !important;
}
.archive ul.products li {
width: 24%;
height: 500px;
}
.archive ul.products li .thumbnail_container {
height: 200px;
}
}