[dalatarzanParticipant]

Hi.
I actually don´t know the ultimate size of an image in WooCommerce since I have heard that X override the settings for Woo.
Is there some documentation regarding this available? I have searched this forum but wasnt able to find anything useful.
I´m about to upload a lot of photos now so I want to do it right. Where can I see these settings in X? Can I configure the wanted image size?

I use Integrity. Two types of image sizes can be seen here:
T-shirt:
http://2.b-light.se/shop/men/tops-yoga-sportswear/organic-cotton-yoga-t%e2%80%91shirt-devadara-classic-blue/
Pant:
http://2.b-light.se/shop/men/bottoms-yoga-sportswear/shorts/organic-cotton-yoga-capris-pants-haddi-natural/

None of the above examples looks perfect.

Thanks
Jonas

[LelyModerator]

Hello Jonas,

Please check this thread for product image size in x theme:https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

Hope this helps.

[dalatarzanParticipant]

Thanks. So you need to check the code in order to find the correct image sizes that X uses? Seems a little to much for quite a simple question. I will dig into it and see what comes out.

Thanks
Jonas

[LelyModerator]

Hello Jonas,

Here it is if you don’t want to check the code:

  $catalog = array(
    'width'  => '250',
    'height' => '275',
    'crop'   => 1
  );

  $single = array(
    'width'  => '400',
    'height' => '400',
    'crop'   => 1
  );

  $thumbnail = array(
    'width'  => '100',
    'height' => '100',
    'crop'   => 1
  );

That’s the thumbnail, single product feature image and the shop page image sizes.
You can see it on the previous link provided too.

Hope this helps.

[dalatarzanParticipant]

I added the code in childs functions.php and also changed the settings in WooCommerce to the same values and made an image with the Single array size but it doesn´t fill up the container properly:

http://2.b-light.se/shop/men/bottoms-yoga-sportswear/shorts/organic-cotton-yoga-capris-pants-haddi-natural/

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.single-product .images img {
    width: 100%;
    margin: 0;
}

Hope it helps.

[dalatarzanParticipant]

Thanks. That did the trick. If I want to change the sizes do I need to change both in functions.php and in WooCommerce? What is overriding what?

Thanks
Jonas

[RahulModerator]

Hey there,

You can just vary the width value as per your need or if you want something specific, you can vary the values in the javascript file.

Thanks

[dalatarzanParticipant]

Very good. I have done what you suggested but my Product images dont look good still.
Can you advice further what can be wrong here:
http://2.b-light.se/shop/

I want the images crystal clear of course.

Thanks
Jonas

[dalatarzanParticipant]

Sorry, the link is to my test domain. Here is the real one:
https://b-light.se/organic-clothing/men/

Jonas

[RadModerator]

Hi there,

The purpose of X integrating its image size to Woocommerce is to have it crisp and clear. But since you applied that customization, it put back the image size to shop_catalog which is thumbnail size, and very small. Hence, images will be blurry especially when it collapse to the single column.

<img width="250" height="275" src="//b-light.se/wp-content/uploads/2016/06/Organic-cotton-underwear-boxershorts-antaranga-olive-green-250x275.png" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Organic-cotton-underwear-boxershorts-antaranga-olive-green">

You should remove that customization if you wish to let X utilize the bigger image.

Thanks!

[dalatarzanParticipant]

What customization are you talking about. In the Javascript or any other suggested customization from case, #1008579.
Can you specify what to remove. Sorry but I´m unfortunately not a developer.

Jonas

[Rue NelModerator]

Hello Jonas,

I would suggest that you follow the suggestion from this topic:
https://community.theme.co/forums/topic/product-images-woocommerce/#post-224057

You will then have a full control on the images. You can select image dimensions you want to display. And Oh please do not forget to regenerate your thumbnails.

Please let us know how it goes.

[dalatarzanParticipant]

Thanks. Now it looks pretty good. 🙂
My Functions.php now look like this:

<?php

// =============================================================================
// FUNCTIONS.PHP
// —————————————————————————–
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// —————————————————————————–
// 01. Enqueue Parent Stylesheet
// 02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

// Additional Functions
// =============================================================================

if ( ! function_exists( ‘x_get_content_layout’ ) ) :
function x_get_content_layout() {

$stack = x_get_stack();
$content_layout = x_get_option( ‘x_’ . $stack . ‘_layout_content’, ‘content-sidebar’ );

if ( $content_layout != ‘full-width’ ) {
if ( is_home() ) {
$opt = x_get_option( ‘x_blog_layout’, ‘sidebar’ );
$layout = ( $opt == ‘sidebar’ ) ? $content_layout : $opt;
} elseif ( is_singular( ‘post’ ) ) {
$meta = get_post_meta( get_the_ID(), ‘_x_post_layout’, true );
$layout = ( $meta == ‘on’ ) ? ‘full-width’ : $content_layout;
} elseif ( x_is_portfolio_item() ) {
$layout = ‘full-width’;
} elseif ( x_is_portfolio() ) {
$meta = get_post_meta( get_the_ID(), ‘_x_portfolio_layout’, true );
$layout = ( $meta == ‘sidebar’ ) ? $content_layout : $meta;
} elseif ( is_page_template( ‘template-layout-content-sidebar.php’ ) ) {
$layout = ‘content-sidebar’;
} elseif ( is_page_template( ‘template-layout-sidebar-content.php’ ) ) {
$layout = ‘sidebar-content’;
} elseif ( is_page_template( ‘template-layout-full-width.php’ ) ) {
$layout = ‘full-width’;
} elseif ( is_archive() ) {
if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
$opt = x_get_option( ‘x_woocommerce_shop_layout_content’, ‘sidebar’ );
$layout = ( $opt == ‘sidebar’ ) ? $content_layout : $opt;
} else {
$opt = x_get_option( ‘x_archive_layout’, ‘sidebar’ );
$layout = ( $opt == ‘sidebar’ ) ? $content_layout : $opt;
}
} elseif ( x_is_bbpress() ) {
$opt = x_get_option( ‘x_bbpress_layout_content’, ‘sidebar’ );
$layout = ( $opt == ‘sidebar’ ) ? $content_layout : $opt;
} elseif ( x_is_buddypress() ) {
$opt = x_get_option( ‘x_buddypress_layout_content’, ‘sidebar’ );
$layout = ( $opt == ‘sidebar’ ) ? $content_layout : $opt;
} elseif ( is_404() ) {
$layout = ‘full-width’;
} else {
$layout = $content_layout;
}
} else {
$layout = $content_layout;
}

if ( x_is_product() ) {
$layout = ‘full-width’;
}
return $layout;

}
endif;

// =============================================================================
// WooCommerce Short Thumbnail size change
// =============================================================================

function x_woocommerce_shop_thumbnail2() {

GLOBAL $product;

$stack = x_get_stack();
$stack_thumb = ‘shop_catalog’;
$stack_shop_thumb = $stack_thumb;
$id = get_the_ID();
$rating = $product->get_rating_html();

woocommerce_show_product_sale_flash();
echo ‘<div class=”entry-featured”>’;
echo ‘‘;
echo get_the_post_thumbnail( $id , $stack_shop_thumb );
if ( ! empty( $rating ) ) {
echo ‘<div class=”star-rating-container aggregate “>’ . $rating . ‘</div>’;
}
echo ‘‘;
echo “</div>”;

}

add_filter(‘init’, function() {
remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘x_woocommerce_shop_product_thumbnails’, 10 );
});

add_action( ‘woocommerce_before_shop_loop_item_title’, ‘x_woocommerce_shop_thumbnail2’, 10 );

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40);
add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_template_single_meta’, 17 );

// Woocommerce Product Images = Show all thumbnails sizes under its settings
// =============================================================================

function remove_product_settings_filter() {
remove_filter( ‘woocommerce_product_settings’, ‘x_woocommerce_remove_plugin_settings’ );
}

add_filter(‘init’, ‘remove_product_settings_filter’);

/**
* Optimize WooCommerce Scripts
* Remove WooCommerce Generator tag, styles, and scripts from non WooCommerce pages.
*/
add_action( ‘wp_enqueue_scripts’, ‘child_manage_woocommerce_styles’, 99 );

function child_manage_woocommerce_styles() {
//remove generator meta tag
remove_action( ‘wp_head’, array( $GLOBALS[‘woocommerce’], ‘generator’ ) );

//first check that woo exists to prevent fatal errors
if ( function_exists( ‘is_woocommerce’ ) ) {
//dequeue scripts and styles
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
wp_dequeue_style( ‘woocommerce_frontend_styles’ );
wp_dequeue_style( ‘woocommerce_fancybox_styles’ );
wp_dequeue_style( ‘woocommerce_chosen_styles’ );
wp_dequeue_style( ‘woocommerce_prettyPhoto_css’ );
wp_dequeue_style( ‘x-woocommerce-css’ );
wp_dequeue_style( ‘smart-coupon-css’ );
wp_dequeue_script( ‘wc_price_slider’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-add-to-cart’ );
wp_dequeue_script( ‘wc-cart-fragments’ );
wp_dequeue_script( ‘wc-checkout’ );
wp_dequeue_script( ‘wc-add-to-cart-variation’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-cart’ );
wp_dequeue_script( ‘wc-chosen’ );
wp_dequeue_script( ‘woocommerce’ );
wp_dequeue_script( ‘prettyPhoto’ );
wp_dequeue_script( ‘prettyPhoto-init’ );
wp_dequeue_script( ‘jquery-blockui’ );
wp_dequeue_script( ‘jquery-placeholder’ );
wp_dequeue_script( ‘fancybox’ );
}
}
}
function woo_hide_product_categories_widget( $list_args ){
$list_args[ ‘hide_empty’ ] = 0;
return $list_args;
}

add_filter( ‘woocommerce_billing_fields’, ‘wc_npr_filter_phone’, 10, 1 );

function wc_npr_filter_phone( $address_fields ) {
$address_fields[‘billing_phone’][‘required’] = false;
return $address_fields;
}

// Image dimensions-WooCommerce
function wpml_shortcode_func(){
do_action(‘icl_language_selector’);
}
add_shortcode( ‘wpml_lang_selector’, ‘wpml_shortcode_func’ );

$catalog = array(
‘width’ => ‘450’,
‘height’ => ‘480’,
‘crop’ => 1
);

$single = array(
‘width’ => ‘450’,
‘height’ => ‘480’,
‘crop’ => 1
);

$thumbnail = array(
‘width’ => ‘100’,
‘height’ => ‘100’,
‘crop’ => 1
);
// Do Not Remove Woocommerce Plugin Settings
// =============================================================================
function x_woocommerce_donot_remove_plugin_setting(){
if ( ! is_admin() ) {
return;
}
remove_filter( ‘woocommerce_product_settings’, ‘x_woocommerce_remove_plugin_settings’, 10 );
}
add_action(‘init’, ‘x_woocommerce_donot_remove_plugin_setting’);

Does it look correct for you?
If I want to change the images sizes again do I need to change both WooCommerce/Settins/Display/Products-size and in Functions.php?

Thanks for good support.
Jonas

[Rue NelModerator]

Hey Jonas,

If there is something wrong in the code, it will throw in a fatal error which would lock you out of the WP dashboard. Looking at the code, you are not supposed to add this:

$catalog = array(
‘width’ => ‘450’,
‘height’ => ‘480’,
‘crop’ => 1
);

$single = array(
‘width’ => ‘450’,
‘height’ => ‘480’,
‘crop’ => 1
);

$thumbnail = array(
‘width’ => ‘100’,
‘height’ => ‘100’,
‘crop’ => 1
);

Please remove it right away and review the other topic that I’ve sent to you.
Just set the product image sizes in WooCommerce/Settins/Display/Products-size .

Hope this helps.

[Author]

Posts