WC update 3.0.1 product display problem

Hi,
After I updated the WC to the last version. I have the follow display problem. Since I'm developing the website in localhost I post a pic to let you see what happened. The product name it become static and does not follow the price anymore in the animation when cursor hovers over a product:

Hi,
Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Hi,
as I said I'm developing it in localhost with easyPhp. So all you have to do to trigger the issue is to install the Quark e-commerce quick start and update woocommerce plugin to the last update 3.0.1. Or as soon as my website comes online I will let you know, sorry.

I can see the issue - the product title tag was changed in latest WooCOmmerce from h3 to h2, so you have to edit css/ecommerce/additional.css fiel and replace each occurance of

Code: Select all

ul.products li.product h3 and ul.products li.product:hover h3


with:

Code: Select all

ul.products li.product h2 and ul.products li.product:hover h2

thanks, it works!
FYI, I found another issue with the WC newer version. I'll try to explain again with pics, sorry. The product gallery pics are now same dimensions of the main product pic and are stacked under the main pic.
I have also a question offtopic: Do you have a mailing list to alert for themes update release and new themes release? Thanks

Yes, it was a big WooCommerce update - regarding the gallery, please check the following thread: https://www.gavick.com/forums/instyle-w ... ails-53800

We'll fix these issues with the next theme update, unfortunately we don't have mailing list for themes update notifications - you have to check our updates section: https://www.gavick.com/updates

I followed the instructions:
1. Add to functions.php the following lines:

Code: Select all

    add_theme_support( 'wc-product-gallery-zoom' );
    add_theme_support( 'wc-product-gallery-lightbox' );
    add_theme_support( 'wc-product-gallery-slider' );


after the line:

Code: Select all

    add_theme_support( 'woocommerce' );


Than I added to the custom css the following style code:

Code: Select all

    .woocommerce-product-gallery {
    position: relative;
    margin-bottom: 3em
    }

    .woocommerce-product-gallery figure {
    margin: 0
    }

    .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) {
    width: 25%;
    display: inline-block
    }

    .woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    float: left;
    cursor: pointer
    }

    .woocommerce-product-gallery .flex-control-thumbs img {
    opacity: .5
    }

    .woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1
    }

    .woocommerce-product-gallery img {
    display: block
    }

    .woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
    width: 33.3333%
    }

    .woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    width: 25%
    }

    .woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 20%
    }

    .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 99;
    }

    a.woocommerce-product-gallery__trigger {
    text-decoration: none;
    }

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: .875em;
    right: .875em;
    display: block;
    height: 2em;
    width: 2em;
    border-radius: 3px;
    z-index: 99;
    text-align: center;
    text-indent: -999px;
    overflow: hidden;
    }

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    background-color: #169fda;
    color: #ffffff;
    }

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
    background-color: #1781ae;
    border-color: #1781ae;
    color: #ffffff;
    }

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
    font: normal normal normal 1em/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    content: "\f00e";
    line-height: 2;
    text-indent: 0;
    }


Is the following result right?
Too bad the product gallery isn't in the right side anymore
Anyway thanks for the support

Please download latest version of Quark Ecommerce here:
https://www.gavick.com/download/downloa ... emes/quark
(gk_quark_ecommerce.zip), it's not listed in Updates section, because it's new package (not a child theme)

I downloaded the new package and I still have the product gallery at the bottom of the product image.
So is it true that the product gallery isn't on the right side anymore?
Thanks

Please download the Quark Ecommerce package again.

OK Joshua, now it works....with the theme, but not with the child theme
In the mean time I put the site online, so if you want I can gice you access, but I need your Ip address beacuse it is hidden. Or tell me what to do.
Thanks

You can add the modification to your child theme - what exactly doesn't work?

Sorry, I was wrong, it works with the child theme also. Thanks for all kind support.