Resolve (partial) dimension image product woocomerce with shapely

Shapely
1

Hello,
refer to old my request
https://colorlibsupport.com/t/dimension-image-prdocut-in-page-woocommerce-product-theme-shapely/
where unfortunately i have not answer, i find this solution to resolve can be useful for other…
I don’t know if it is perfectly correct, but seem funcioning.

I make this correction in the file:
wp-content/themes/shapely/woocomerce.php

i transform this line:
<div id=“primary” class=“col-md-8 mb-xs-24”>

into:
<div id=“primary” class=“col-md- mb-xs-24”>

i cut the number 8 after md

See the code complete:
<?php

get_header(); ?>
<div class=“row”>
<!-- ho tolto l’8, in pratica da col-md-8 a col-md- →
<div id=“primary” class=“col-md- mb-xs-24”>
<?php woocommerce_content(); ?>
</div><!-- #primary →
<aside id=“secondary” class=“widget-area col-md-4” role=“complementary”>
<?php dynamic_sidebar( ‘shop-sidebar’ ); ?>
</aside><!-- #secondary →
</div>
<?php
get_footer();

if other person can try and say to me if can be ok.
Regards
Stefano

2

Hi there

Hope you are having a good day and thank you for your solution, don’t forget to make your changes in the child theme

Thanks!
Colorlib Support Team

3

Dear Noda,
yes i put all in css of child theme.
The prevoiux post is for enlarge the dimension to full width of page, this instead to ridimension the div of image and div of description.

I add also in this child theme thiss css for modify the width always in woocomemrce product of image size of product (example 68%) and description text (28%)

/!---------- CAMBIARE DIMENSIONI IMMAGINI WOOCOMERCE----------/
.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images{float:left;width:68%}
.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.summary{float:right;width:28%;clear:none}

It can be useful for other with my need.
Regards

4

Thank you again @lartistico
if you don’t have anything to add let me know and I will mark this ticket as a resolved, once again, appreciate your time and effort

5

hi Noda,
i resolve dimension image but i have a problem that i can not resolve.
If you can add me so other person can advantage of this modify.

The first time i charge the page the thumbnails images under the main image of woocommerce remaing too much white space and i don’t understand why…if i click on second thumbnails than i resize automatically. See image how i see and how he must be.
see this link
http://www.lartistico.com/it/prodotti/pellet/caminipellet/serbis-m14/

Here the code in style.css i change in child theme:

@media (min-width: 1200px){
.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images{float:left;width:68%}
.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.summary{float:right;width:28%;clear:none}

}

Pheraps i must change other line css.
And this what i change in woocommerce.php always in child theme:

<?php

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array(
        'width'  => 150,
        'height' => 150,
        'crop'   => 0,
    );
} );
get_header(); ?>
	<div class="row">
		<!-- ho tolto l'8, in pratica da col-md-8 a col-md- -->
		<div id="primary" class="col-md-12 mb-xs-24">
			<?php woocommerce_content(); ?>
		</div><!-- #primary -->

		<aside id="secondary" class="widget-area col-md-4" role="complementary">
			<?php dynamic_sidebar( 'shop-sidebar' ); ?>
		</aside><!-- #secondary -->
	</div>
<?php
get_footer();

Please help me.
Thanks a lots
Stefano

6

Stefano you are awesome :slight_smile:

7

Noda thanks a lots, but i have again some problems, i hope you can help me and resolve for me and for other person of community.

The first time i charge the page the thumbnails images under the main image of woocommerce remaing too much white space and i don’t understand why…if i click on second thumbnails than i resize automatically. See image how i see and how he must be. Also on mobile phone the main image the first time not happear.(only the thumbnails) .i think modify this two line of css cause some problem of visualizing image…
Pheraps i must change other line css.

Pleae help me.
Thanks
Stefano

8

Hello there,

I am seeing this too.

Please use this plugin to clear your WordPress cache then reload the page:

Best Regards,
Support