Woocommerce shop looks broken after PRO v4.0.x

[WP_rockstar]

Here’s how I see products columns when I updated to PRO v.4, something like 1 and a half columns, very weird:

Here’s how it is supposed to look (prior to update) 3 columns + sidebar:

Here’s URL to live website, currently I’m using PRO 3.2.3 until I get work around this: https://www.bbqs-algarve.com/shop/

Please help

[marc_a]

Hi @WP_rockstar,

Thanks for reaching out.

I suggest that you will create a staging area and do the theme update there, please keep in mind that the latest version of Pro is 4.0.8. Please update your theme because it fixes various conflicts with the theme options, builder not loading and plugin conflict. If the issue still persists after updating the Pro theme to the latest version, we should check your admin dashboard to check what error causing the issue by giving the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[WP_rockstar]

Yes, I have version 4.0.9 on my staging site: https://wordpress-271710-1665179.cloudwaysapps.com/shop/

Shop looks wrong on my staging site.

I have version 3.2.3 on my live site, and everything works well here: https://www.bbqs-algarve.com/shop

[alexander]

Hi @WP_rockstar,

Thanks! After logging in. I was able to locate the problem. We simplified our WooCommerce integration in 4.0 and stopped overriding as many templates and switched to using filters wherever possible.

In your child theme, it looks like you’ve copied over many of the WooCommerce templates. If you haven’t customized the markup yourself, you can probably just delete those. I changed the loop-start.php template to correct the issue because instead of being styled by cols-3 (an X class) it now uses the WooCommerce class columns-3.

[WP_rockstar]

Hi, thank you so much.

That solved the issue on Shop page.

But I see two new issues on Homepage check the Recently Added section on both site and you will see it is different.

High-quality BBQs and grills in Algarve

https://wordpress-271710-1665179.cloudwaysapps.com/

---

[tristup]

Hi @WP_rockstar,

The issue in the staging site is due to the missing width of each product. As my colleague says earlier that we have simplified WooCOmmerce integration and stopped overriding a few classes and templates, the following CSS code is missing from your site. I would recommend you to add the following CSS code into the Theme Options > CSS to avoid this issue.

.woocommerce.columns-4 li.product 
{
    width: 22%;
}

Please remember that the above code will work if it copied as it is and not conflicted with any of your existing styles.

Hope this helps.
Thanks

[WP_rockstar]

ok thanks @tristup, that fixed it.

Last thing (I think) that broke after v4.x update was the headline at the top of my Homepage.
I use the “responsive text” functionality on your theme for that.
The text is supposed to display at 65px size for desktop, but now it only display at 36px after update.

BEFORE (right): https://www.bbqs-algarve.com/

---

AFTER (wrong): https://wordpress-271710-1665179.cloudwaysapps.com/

[prakash_s]

Hello @WP_rockstar,

In CSS, an em unit is equal to the computed font-size for the element to which the em is applied. When em units are declared on child elements that don’t have a font-size defined, they will inherit their font-size from their parent, or from another ancestor element, possibly going all the way back to the root element on the document.

In case if you want 65px font-size then you can set your font size as 4.65em. It would be approx 65px. Please feel free to change it as per your design.

Hope it helps
Thanks

[jgreenberg]

I seem to have the same issue on my staging site as well.

You mentioned you had changed the most recent php templates for woocommerce to fix this:

Woocommerce shop looks broken after PRO v4.0.x

Hi @WP_rockstar, Thanks! After logging in. I was able to locate the problem. We simplified our WooCommerce integration in 4.0 and stopped overriding as many templates and switched to using filters wherever possible. In your child theme, it looks like you’ve copied over many of the WooCommerce templates. If you haven’t customized the markup yourself, you can probably just delete those. I changed the loop-start.php template to correct the issue because instead of being styled by cols-3 (an X cla…

Do you happen to have the template so I can replace the exisiting one? Or would you rather confirm this by having login information?

[tristup]

Hi Joseph,

We would like to investigate your staging site to see what is the reason behind your issue, please provide login credentials for your staging site in the secure note of a different thread, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[jgreenberg]

Shalom @tristup,

I gave the credentials here already:

Cart count broken after update Pro

Here is the secure note to the staging site.

I would like to do the update but I need to make sure that the store is not broken. I also will need to know the solution so I can replicate it on my production site.

thanks,

[ruenel]

Hello Joseph,

To make sure that there are no issues with the updates on your site, we would highly recommend that you create a staging site. This is very useful because you can test drive any X updates in the staging area, do the customizations and troubleshooting without disrupting your live site. Once everything is perfect, you can easily and flawlessly proceed with the update on the live site. To know how to create a staging area, please check out these articles:

• http://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/
• https://maintainn.com/2015/02/how-to-create-a-staging-site-for-wordpress/

Best Regards.

[jgreenberg]

The credentials I gave you ARE for a staging site. I am doing exactly what you are saying.

[ruenel]

Hi Joseph,

We will be responding in your own thread.

Thanks.