Shop page layout is wrong after demo apply

Hi I changed my theme to be applied as the Ethos 1 but the shop page shows the photos wrong compared to the example

I applied this theme:
http://demo.theme.co/ethos-1/

  1. the product list all the products are squashed to the left
  2. the tiny additional images for the photo gallery

Hi There,

Thanks for writing in! Can you please make sure that you’re using the latest version of X theme, Cornerstone and the recommended version of WooCommerce. You can check the version numbers from here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195).

If you’re using any caching plugins, make sure to disable it while you’re testing the issues.

Also if you have added any custom CSS to the site, remove them all temporarily and test your site as well.

Let us know how it goes.
Thanks!

I don’t have any cache plugins except the one that comes with wordpress under general settings but I have since disabled it. All of the below plugins are newer then what is listed in your articule
ThemeCo version 5.2.5
Woocommerce version 3.2.6
Cornerstone version 2.1.7
This issue occurred without any CSS changes as it was a fresh theme apply.

ok i fixed my 1st issue of product showing to far left, I just need help with 2nd issue of the little tiny pics

Hi There,

Yes regarding the WooCommerce Images, please follow this post: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706

Hope it helps,
Cheers!

Hi this has been done multiple times even though the image settings were not changed. I did it again after this suggestion and went into incognito mode and the issue still exists.
I have provided a theme checker error screen shot, but I don’t know how to fix these errors or if its related.

I will see if I can follow this and if it fixes it… https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Hi there,

Please kindly remove the filters and use the CSS code below to make the thumbnails show the old way. You can add the code below to X > Launch > Options > CSS:

.single-product .flex-control-nav.flex-control-thumbs {
    float: none;
    position: relative;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    min-height: 60px;
}

.flex-control-nav.flex-control-thumbs li {
margin: 10px;
}

.woocommerce-product-gallery__trigger img {
    visibility: hidden;
}

.woocommerce-product-gallery__trigger:before {
    font-family: "FontAwesome";
    content: "\f065";
    color: white;
}

The reason why it is not like the Demo is that new versions of the Woocomerce use a completely new gallery system which has those thumbnails at the top and small. The demo itself uses an old version of the Woocomemrce. The CSS code above helps to show the thumbnails like the old version which you see in the demo.

Thank you.

I’m not exactly sure what you mean by filters because there isn;t any on the single product page just the shop page but that looks ok. Its the single page I have an issue with, there was an improvement in the thumbnail size after the css apply but still not right location and size

Hello There,

Thanks for updating in!

I have resolved the issue by installing a child theme and added this custom code in the child theme’s functions.php file

// Remove product gallery slider and gallery zoom
// =============================================================================
add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-slider' );
}
// =============================================================================

Please check your site now.

This code will remove the WooCommerce product gallery slider and the gallery zoom. If you remove this code, you will see the previous issue as shown in your screenshot. If you want to resize the dimensions of the thumbnails, please go to WooCommerce > Settings > Products > Displays > Product images. After changing, please regenerate the thumbnails and then clear the cache again. It might also be good to disable the Photon module in Jetpack because it is caching the images. To know more about Photon module, please check it here: https://developer.wordpress.com/docs/photon/

Hope this helps.

Thanks, its an improvement I can live with, appreciate your time and effort!

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.