WooCommerce single product shows fullwidth product image after update

[lobsterass]

Hi!

I just updated everything on my site and ran into a problem with single product pages. They now don’t fit into the page grid anymore. Look here – the image and product info is fullwidth. How do I solve it? I have got some custom code from you for these pages and in product-image.php I’ve replaced image size 800 with 807. But that is not the problem cuz the problem is present without it too.

Please help.

<3

A

[lobsterass]

I added an image of my WooCom image settings.

….Also, something seems to be really wrong with my site. Every move backend loads SOOOO slow. Often, it even says it was interrupted and I have to kill the page. Is it the visual composer or something?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Do you have woocommerce files in your child theme? They have been updated, it’s likely that you’re using old files

– Kyle

[lobsterass]

Hi Kyle!

Long time no see! 🙂

Nope, I don’t believe I have the WooCommerce files in the Child theme. Please see my attached screen grabs from the FTP of this.

But I suspect the trouble of the super slooooow visual composer may have something to do with WooCommerce because I believe the issue started when I installed my webshop on the site. It shouldn’t be slow due to any heavy media files, as all images are saved small for web. The biggest images are like 250 KB.

It’s so slow to edit stuff backend now, that I really try not to have to do it at all. Please feel free to try it out. I don’t have this issue on any other websites I’ve made.

<3

Attachments:

You must be logged in to view attached files.

[Nishant – SUPPORT]

Please use this custom CSS

body.single.single-product .pb-fw-wrap {
  max-width: 1170px;
  margin: 0 auto;
}

Let us know how it goes.

[lobsterass]

Hola Nishant!

That made it better. It’s within the grid now. I would however like it to have a little margin on smaller screens than 1170px. On phones, image and text now go all the way out to the edge with no margin. Please see attached image of this.

<3

…Do you have any thoughts on why this happened in the first place?
…And why my visual composer is so incredibly slow? Just to open up one text box to edit it, can take up to 30 seconds. Sometimes it kills the page all together.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

EDIT: Apologies, just read the above posts. I will check your site.

The page builder being slow can only be down to plugins taking up too much memory or hosting speed.

– Ed

[Swift Ideas – Ed]

Can you confirm the login – the provided doesn’t seem to work.

– Ed

[lobsterass]

This reply has been marked as private.

[Swift Ideas – Ed]

Your theme files are not updated correctly. Specifically /woocommerce/content-single-product.php which is causing this issue.

– Ed

[lobsterass]

OK. Thanx. I removed the old custom code from content-single-product.php. Please tell me how I make the product title H1 placed above the body text on the right. Please see attached image of this.

Here are my old changes regarding this:

CSS:
.woocommerce div.product .entry-title {
 display: block;
 margin-bottom: 40px;
}

2) Woocommerce>content-single-product.php replace:
<div itemscope itemtype=”http://schema.org/Product&#8221; id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>

<div class=”entry-title” itemprop=”name”><?php the_title(); ?></div>

<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<div class=”summary entry-summary”>

<div class=”summary-top clearfix”>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”&gt;

<p itemprop=”price” class=”price”><?php echo $product->get_price_html(); ?></p>

<meta itemprop=”priceCurrency” content=”<?php echo get_woocommerce_currency(); ?>” />

<?php if (!$catalog_mode) { ?><link itemprop=”availability” href=”http://schema.org/&lt;?php echo $product->is_in_stock() ? ‘InStock’ : ‘OutOfStock’; ?>” /><?php } ?>

</div>
with
<div itemscope itemtype=”http://schema.org/Product&#8221; id=”product-<?php the_ID(); ?>” <?php post_class(); ?>>

<?php
/**
* woocommerce_show_product_images hook
*
* @hooked woocommerce_show_product_sale_flash – 10
* @hooked woocommerce_show_product_images – 20
*/
do_action( ‘woocommerce_before_single_product_summary’ );
?>

<div class=”summary entry-summary”>

<div class=”summary-top clearfix”>

<div class=”entry-title” itemprop=”name”><h1><?php the_title(); ?></h1></div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”&gt;

<p itemprop=”price” class=”price”><?php echo $product->get_price_html(); ?></p>

<meta itemprop=”priceCurrency” content=”<?php echo get_woocommerce_currency(); ?>” />

<?php if (!$catalog_mode) { ?><link itemprop=”availability” href=”http://schema.org/&lt;?php echo $product->is_in_stock() ? ‘InStock’ : ‘OutOfStock’; ?>” /><?php } ?>

</div>

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Move this line:

<div class="entry-title" itemprop="name"><h1><?php the_title(); ?></h1></div>

to below:

<div class="summary-top clearfix">

– Ed

[lobsterass]

I’m confused. That line:

<div class=”entry-title” itemprop=”name”><h1><?php the_title(); ?></h1></div>

is already below:

<div class=”summary-top clearfix”>

Could you please give me the complete part of the text that need to be exchanged with what complete part of text?

[Mohammad – SUPPORT]

Hi,
Where were you looking it? I dont see any code already at content-single-product.php . I applied the code that is suggested by Ed. Now everything seems fine.
Thanks
Mohammad

[lobsterass]

Thank you!

I still don’t get what I did wrong but I see what it is supposed to be like now. Sorry for bugging you about it like this, but I have to understand it so that I can make updates correctly by myself.

Thanks for great help as always!

<3