• Resolved Inbound Horizons

    (@inboundhorizons)


    It looks like WooCommerce 6.5.1 introduced a CSS change that overwrites a WooSwipe style.

    Using WooCommerce 6.5.1 and WooSwipe 2.0.1.

    Problem: Main image in product page shows at 25% width instead of expected 100% width.

    Cause: WooCommerce 6.5.1 introduces the following style rule in /wp-content/plugins/woocommerce/assets/css/woocommerce.css

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

    This takes precedence the WooSwipe rule in /wp-content/plugins/wooswipe/wooswipe.css

    .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
        width: 100%;
    }

    My temporary solution was to mark the width: 100% !important; but it would be nice to have that permanently included in future versions.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author THRIVE – Web Design Gold Coast

    (@deanoakley)

    Hi @inboundhorizons. This isn’t happening on my demo, I’ve just updated it.

    https://plugins.thriveweb.com.au/product/wooswipe/

    What theme are you using?

    Thread Starter Inbound Horizons

    (@inboundhorizons)

    I apologize…I just realized that there was an “optimization” on my website that moved the WooCommerce stylesheets further down in the page. This placed them below the WooSwipe stylesheets and took precedence.

    Sorry for the trouble!

    Plugin Author THRIVE – Web Design Gold Coast

    (@deanoakley)

    No worries 🙂

    Bobkata

    (@bobkata)

    This is error in console I don`t know is it conected somehow to the above

    wooswipe.js:8 Uncaught ReferenceError: addpin is not defined
    at productThumbnails (wooswipe.js:8:27)
    at wooswipe.js:156:7
    at wooswipe.js:224:3

    Thread Starter Inbound Horizons

    (@inboundhorizons)

    @bobkata No, it is probably connected to this question: https://ww.wp.xz.cn/support/topic/version-2-0-erro/.

    I did experience your issue and realized it was because my website was using the new version of the WooSwipe plugin but loading a cached copy of wooswipe.js from the old versions. I solved that JS error by rigorously clearing all possible caches. (WordPress caching plugins, CDN cache, CloudFlare cache, browser cache, etc.) Sometimes you have to clear the caches a couple times to prevent the files from accidentally propagating while you’re clearing the other caches.

    miata2

    (@miata2)

    Hi,

    Conflict after updating (using Storefront theme)

    Plugin Author THRIVE – Web Design Gold Coast

    (@deanoakley)

    @miata2 Please double check it’s not a cache issue. We did test with Storefront.

    Everyone with an upgrade problem has been related to caching issues.

    Thanks to @inboundhorizons for replying. Plpease check “WordPress caching plugins, CDN cache, Cloudflare cache, browser cache”

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘WooCommerce CSS conflict’ is closed to new replies.