[Resolved] Conflict on new subdomain

[Renaldo]

Good Evening

I have just created a subdomain, so we can launch our website in another country. We cloned the website over to the subdomain and everything works. It is just the mobile version of the products displayed on mobile does not look correct. Not sure if there is CSS conflict with the newly updated woocommerce.

The products don’t display correctly. And are not aligned as it should when viewing the homepage or pages.

Please, could you assist?

[Leo]

Hi there,

I’m unable to get the linked page to load.

Can you double check?

Let me know 🙂

[Renaldo]

Hey there

https://us.botthms.com

[Leo]

Hmm that’s the same link in the original topic.

It’s just loading a blank page for me:
https://www.screencast.com/t/0I25OQsVg4

Can you double check?

Thanks 🙂

[Renaldo]

The link is working on my side?

That is very strange. Could you perhaps try a mobile device?

[Leo]

It’s working now.

Can you first purge and disable WP Rocket?

[Renaldo]

Okay, we have done that.

You can compare the site to our botthms.com site. And see the differences

[Leo]

Hmm the two sites seem to have different HTML.

The old one is using GP’s columns for WooCommerce and the new one is using WooCommerce blocks?

Have you checked with their support by any chance?

[Renaldo]

How do we resolver this? As mentioned we just cloned the site and updated woocommerce?

What suggestions do you have for us?

[Leo]

How did you clone it?

The two sites are showing pretty different HTML markup:
https://www.screencast.com/t/n9zhpFrM915

It was all good before the WooCommerce update?

[Renaldo]

Cloned it inside of kinsta. And just added to the subdomain. So nothing was really changed.

Just updated the plugins. Any suggestions? Should we repeat the process by recloning or get a developer?

Because we are using a childtheme for the botthms.com website

[David]

Hi there,

so the Wooocommerce Blocks Plugin was updated on your cloned site. This brings significant changes to the markup which is why the columns are broken.

Try this CSS to fix the columns:

.wc-block-grid__product {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .wc-block-grid.has-3-columns .wc-block-grid__product {
        flex: 1 0 50%;
        max-width: 50%;
    }
}

The missing details like review stars, you will need to edit the page and check to see if that is an option on the Block.

[Renaldo]

Good day

This looks like it has been resolved. Can we activate WP Rocket again?

Thanks for assisting.

Kind Regards

[Leo]

Yup you can activate it back now.

[Author]

Posts