Cornerstone update results in weird store behaviour (images display and widget troubles)

[Oxley-2014]

Hello,
I updated Cornerstone and my store page ended up with anarchic display of products pictures. Some are small and other are huge so there is 1 or 2 or 3 products displayed per “line”… (Pictures 1 and 2).
However if on a specific product page, the products pictures displayed under this main product are correctly sized and displayed (4 columns and all images are of the same size) (Pictures 3 and 4).

Another important problem is the description of the product (on a specific product page) that is not displayed. There is only the “description” tab that is displayed… The same goes with the additional info tab. Only the tab is displayed… (Picture 5).

Concerning the widgets on the sidebar it is also a mess. If I want to filter by brand for example then nothing is filtered. This widget and others have no impact on the page…
The price filter is even weirder. It is correctly displayed if I use the X “customize” mode and it works unlike all the other “filtering” widgets but if I don’t customize the page then this widget is not correctly displayed… (Pictures 6 and 7).

Could you help with all these troubles, please.
Thanks in advance for your help.

Oxley

P.S.:
In order to help I would like to upload screenshots but I do not see how…
I guess I have to send a link for the screenshot.

[Prasant]

Hello @Oxley-2014,

Thanks for asking and sorry for the problems you are facing.

You can use file sharing tools like Dropbox to upload the image and then share the URL of the same or you can press the upload button to share the image. Here is a screencast in secure note.

Regarding the problem you are facing, as of now I can suggest you following solutions:

1. Please make sure you are using latest version of X Theme. It’s mentioned that you have updated Cornerstone but please make sure to update X Theme to the latest version which as of today is 6.1.6.
2. Please make sure that you are using compatible version of WooCommerce. As of today the compatible version of WooCommerce is 3.4.2.
3. Please try testing for plugin conflict by deactivating all plugins and then re-activating one at a time to narrow down in case you discover that it’s indeed a plugin issue.
4. Make sure you are using latest version of WordPress 4.9.7.

To update theme and plugins please take a look at following article:

How to Update | Themeco Docs

To lean about the latest compatible versions of bundled and supported plugins, please take a look at following page:

Version Compatibility | Themeco Docs

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks.

[Oxley-2014]

Prasant,
Hello,

Before reading your answer I realized X was not updated (I thought it was) and indeed the update fixed most of the problems.
Sorry for the confusion.
And thanks for the explanation on how to upload pics. I have not opened a case for a lonnnnnng time and I did not remember about this tool.

That said, the problem with the display of products pictures on the main page of the store is still here and has nothing to do with a plugin since I have not installed any new plugin for about a year, if not more.
Could you help me with this, please?

Regards,
Oxley.

[nabeel]

Hi again,

I checked your store front page and it seems like the woocommerce CSS is not being applied. I noticed you’re on the latest version of WooCommerce i.e v 3.4.3 however as Prasant mentioned earlier the compatible version of WooCommerce is 3.4.2. try downgrading your plugin version and see if this resolves the issue.

This could also be related to the customization you may have in your child theme, to eliminate this factor try switching to parent theme and see if this resolves the issue.

If nothing works then try adding the following code in the Theme Options > CSS:

ul.products.columns-4 > li {
    width: 22%;
}
.woocommerce li.product .entry-featured img {
    min-width: auto;
}

.pagination,.woocommerce-pagination {
    padding: 1em 0;
    border: 1px solid rgba(0,0,0,.05);
    border-width: 1px 0;
    text-align: center;
    clear: both
}

.pagination ul.page-numbers:after,.pagination ul.page-numbers:before,.woocommerce-pagination ul.page-numbers:after,.woocommerce-pagination ul.page-numbers:before {
    content: "";
    display: table
}

.pagination ul.page-numbers:after,.woocommerce-pagination ul.page-numbers:after {
    clear: both
}

.pagination .page-numbers,.woocommerce-pagination .page-numbers {
    list-style: none;
    margin: 0
}

.pagination .page-numbers li,.woocommerce-pagination .page-numbers li {
    display: inline-block
}

.pagination .page-numbers li .page-numbers,.woocommerce-pagination .page-numbers li .page-numbers {
    border-left-width: 0;
    display: inline-block;
    padding: .3342343017em .875em;
    background-color: rgba(0,0,0,.025);
    color: #8a8a8a;
}

.pagination .page-numbers li .page-numbers.current,.woocommerce-pagination .page-numbers li .page-numbers.current {
    background-color: #2c2d33;
    border-color: #2c2d33
}

.pagination .page-numbers li .page-numbers.dots,.woocommerce-pagination .page-numbers li .page-numbers.dots {
    background-color: transparent
}

.pagination .page-numbers li .page-numbers.next,.pagination .page-numbers li .page-numbers.prev,.woocommerce-pagination .page-numbers li .page-numbers.next,.woocommerce-pagination .page-numbers li .page-numbers.prev {
    padding-left: 1em;
    padding-right: 1em
}

.pagination .page-numbers li a.page-numbers:hover,.woocommerce-pagination .page-numbers li a.page-numbers:hover {
    background-color: rgba(0,0,0,.05)
}

.rtl .pagination a.next,.rtl .pagination a.prev,.rtl .woocommerce-pagination a.next,.rtl .woocommerce-pagination a.prev {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

Let us know how this goes!