Hi,
Glad to see that you found a plugin for this, to center the thumbnails try this css:

#top #main .thumbnail_container img {
    margin: auto;
}

the expected results:

Best regards,
Mike

Hi,
Unfortunately not with your current thumbnails because they are cropped, the thumbnail image you see is the whole image.
Please see the direct image link to the thumbnail below, you will see what I mean.
I don’t see any other solution but to create square new images.

Best regards,
Mike

Hey orianos,

Thank you for the inquiry.

You may need to add this filter in the functions.php file to revert the product thumbnail settings back to default.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );
function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Related threads:

// https://kriesi.at/support/topic/bug-in-enfold-for-woocommerce-prduct-images/
// https://kriesi.at/support/topic/woocommerce-product-image-size-bug/

Best regards,
Ismael

Hi,
Since your image is a portrait layout and looks like it is twice as tall as it is wide, I believe you will find your best results will be if you make your original image square and then upload it, your new thumbnails will then show the full product. Woocommerce images work better if they are square since the div is also square.

Best regards,
Mike

Hey bptdxvkalsel,

Thank you for the inquiry.

You may need to add open graph data in order to display a thumbnail when sharing an entry. The following plugin should help.

// https://wordpress.org/plugins/opengraph/

This is also available on Yoast.

// https://yoast.com/help/getting-open-graph-for-your-articles/

Best regards,
Ismael

Hi,

Thank you for the info.

But if I reinstate the ‘shop_catalog image size, it starts picking it up again and not the woocommerce_thumbnail one.

Did you implement the changes in the enfold/config-woocommerce/config.php after reinstating the shop_catalog image size?

$woocommerce_thumbnail_image_width = get_option( 'woocommerce_thumbnail_image_width' );
		$default_size = $woocommerce_thumbnail_image_width == 300 ? 'shop_catalog' : 'woocommerce_thumbnail';
		$size = apply_filters( 'avf_wc_before_shop_loop_item_title_img_size', $default_size );

The theme by default will prioritize the custom shop_catalog (450x450px) thumbnail if the changes above are not implemented. You can also use the filter.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'temp_thumbnail_size_fix', 10, 1 );
function temp_thumbnail_size_fix( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Ismael

Hi,

You can add comment as following

/* This is the comment to describe what I did */
add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );

function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Cheers!
Yigit

Hey Omar Skapti,

Thank you for the inquiry.

The theme sets the product thumbnail to shop_catalog (450x450px) by default, and this overrides the value set in the Woocommerce > Product Images > Product Thumbnail Width field.

To change this behavior and to revert back to the default product thumbnail, you have to add this filter in the functions.php file.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );

function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Ismael

Hey JaimBateman,

Thank you for the inquiry.

Have you tried implementing the changes that we suggested in the previous thread?

// https://kriesi.at/support/topic/bug-in-enfold-for-woocommerce-prduct-images/#post-1363586

The enfold/config-woocommerce/config.php file has to be modified directly. This will set the thumbnail to the default woocommerce_thumbnail if the woocommerce_thumbnail_image_width option has been adjusted.

Best regards,
Ismael

Hi,

Glad to know that this has been resolved. Regarding the product gallery, you can try the Gallery element from the Media Elements tab, set the Styling > Gallery Style to the second option (Big image with thumbnails below), then adjust the Thumbnail Columns.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey kreativeseite,

Thank you for the inquiry.

Looks like both the single post and blog overview page are using the same thumbnail, which is 1030x1030px in size. Did you remove the other registered thumbnails? The default thumbnail for the single post page should be 845x321px in size but this thumbnail doesn’t get applied for some reason.

Best regards,
Ismael

Hi,
To add a caption below your gallery items, you can use this css from our documentation:

/* Display caption below thumbnail */
#top .avia-gallery .avia-gallery-thumb a:after {
content: attr(title);
margin: 10px 0;
position: relative;
display: block;
width: 100%;
font-size: 14px;
text-align: center;
}

adjust the css font size and margin to suit, after applying the css clear your browser cache.
and use the caption field:

the expected results:

Or try using the masonry gallery element for both galleries, the first one without captions and the second one with captions, again use the caption field:

then choose to show the caption excerpt always:

the expected results:

Best regards,
Mike

Hey Andrew,

Sorry for the confusion. We provided a filter in the previous thread, please continue here: https://kriesi.at/support/topic/magazine-thumbnails-display-at-different-sizes/#post-1364153

Best regards,
Ismael

Hi,

Sorry for the confusion. Looks like you can only select the thumbnail size for the big entry in the Styling > General Styling panel, small entries use the default thumbnail (80x80px). Please add this filter in the functions.php file instead.

add_filter('avf_magazine_settings', function($config) {
    $config['image_size']['small'] = 'full';
    $config['image_size']['big'] = 'full';
    return $config;
}, 10, 1);

The filter will set the thumbnail size of the small entries to full and display the original image.

Best regards,
Ismael

Hi,

Thank you for the update.

The images in the magazine element get distorted because of this css code.

.AVR-home-page .av-magazine-thumbnail {
    width: 320px !important;
    height: 180px !important;
}

.AVR-home-page .av-magazine-thumbnail img {
    height: 168px !important;
    width: 309px !important;
}

Removing the css code should bring the magazine element back to its default style or layout, screenshot below.

// https://1drv.ms/u/s!AjjTfXSRbKTvxAoJplsUeMQf6rZy?e=HVdrI7

Best regards,
Ismael

Hi la_tripping,

Please try this filter in your functions.php file:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'temp_thumbnail_size_fix', 10, 1 );

function temp_thumbnail_size_fix( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Rikard

Hi,

Please try this filter in functions.php to see if you have any luck with it:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'temp_thumbnail_size_fix', 10, 1 );

function temp_thumbnail_size_fix( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Rikard

Hi,

The issue occurs because Woocommerce just returns the declared thumbnail shop_catalog instead of using the values set in the Woocommerce > Product Images options. The function that controls the image size is located in the plugins/woocommerce/includes/wc-core-functions.php file, look for the wc_get_image_size (line 928).

Your filter works because when the thumbnail is set to woocommerce_thumbnail, the following condition block (line 971) gets executed and return the values or options set in the Woocommerce > Product Images panel.

} elseif ( 'thumbnail' === $image_size ) {
			$size['width'] = absint( wc_get_theme_support( 'thumbnail_image_width', get_option( 'woocommerce_thumbnail_image_width', 300 ) ) );
			$cropping      = get_option( 'woocommerce_thumbnail_cropping', '1:1' );

			if ( 'uncropped' === $cropping ) {
				$size['height'] = '';
				$size['crop']   = 0;
			} elseif ( 'custom' === $cropping ) {
				$width          = max( 1, (float) get_option( 'woocommerce_thumbnail_cropping_custom_width', '4' ) );
				$height         = max( 1, (float) get_option( 'woocommerce_thumbnail_cropping_custom_height', '3' ) );
				$size['height'] = absint( NumberUtil::round( ( $size['width'] / $width ) * $height ) );
				$size['crop']   = 1;
			} else {
				$cropping_split = explode( ':', $cropping );
				$width          = max( 1, (float) current( $cropping_split ) );
				$height         = max( 1, (float) end( $cropping_split ) );
				$size['height'] = absint( NumberUtil::round( ( $size['width'] / $width ) * $height ) );
				$size['crop']   = 1;
			}
		}

Please try to edit the enfold/config-woocommerce/config.php file and look for this code around line 442.

$size = apply_filters( 'avf_wc_before_shop_loop_item_title_img_size', 'shop_catalog' );

Replace it with:

$woocommerce_thumbnail_image_width = get_option( 'woocommerce_thumbnail_image_width' );
		$default_size = $woocommerce_thumbnail_image_width == 300 ? 'shop_catalog' : 'woocommerce_thumbnail';
		$size = apply_filters( 'avf_wc_before_shop_loop_item_title_img_size', $default_size );

Best regards,
Ismael