WordPress.org

Forums

WooCommerce - excelling eCommerce
[resolved] Site design screwed up after update (2.1 & 2.1.1) (10 posts)

  1. Thomas Schmall
    Member
    Posted 1 year ago #

    I don't get it - the buttons on top of my page are not even really in the scope of the WooCommerce plugin. The code is the same site-wide. But on all pages of the shop, these are screwed up.

    You can check it here: http://www.oxpal.com/shop
    As you can see, the top buttons are lower than they should be, and somehow repeat. There is a big free space beneath them. If go to any page that has no WooCommerce content, they look fine.

    That issue since the 2.1 update and persisting in 2.1.1.. It can be seen in Firefox, InternetExplorer and Chrome (which btw screws up the product view anyways, no clue why).

    https://wordpress.org/plugins/woocommerce/

  2. greenpeamedia
    Member
    Posted 1 year ago #

    I had the same thing happen to two of my sites which I upgraded. The theme layout was completely off. I found this to be because the themes were not updated and ready for the 2.1 upgrade so I had to roll both of them back to 2.0 and wait for the theme developers to update the themes.

    I'm sure this is the case with your site as well. Contact the support for your theme and find out about a timeline to upgrade the theme.

    BJ

  3. Mike Jolley
    Member
    Plugin Author

    Posted 1 year ago #

    It's just this CSS rule: https://dl.dropboxusercontent.com/s/x78f4htvr9ptm7b/2014-02-13%20at%2022.34.png

    You can fix it by setting the rule for your menu to !important, if you can find it.

  4. Thomas Schmall
    Member
    Posted 1 year ago #

    @Greenpeamedia: Thanks for the hint. I'm using an own theme - and fixed it now.

    @Mikejolley: Thanks a lot for looking into this. Indeed, that fixed it - I've put the pixel height in for the buttons.
    The content is still too low now somehow. I'll try to figure out why - that must be another new css setting I assume.

    I'm no professional webdesigner, but I find it a bit strange that WooCommerce would override the general img tag. Can imagine that causes trouble for many themes.

    In general I find the CSS handling of WooCommerce odd or unpractical. Took me a long time to figure out that when I want to override parts of the WooCommerce style sheet, then I have to write !important basically everywhere in mine. And to find the parts of the original that I have to replace is a nightmare, since these sheets have no readable formatting. Some things are so complicatedly coded, that it's basically impossible to change.
    Maybe I'm not getting the idea behind it right.

  5. Thomas Schmall
    Member
    Posted 1 year ago #

    Fixed it for the content alignment too - was also because of images. Had to add css lines for every image up there now. Feel a bit dirty doing that ;)

  6. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Thomas,

    That's a fair point about the WooCommerce img styles being global. We could probably add some more specificity there. However these styles shouldn't really produce any conflicts. I can't see what your original problem is now that you've fixed it to investigate further.

    FYI seeing as you're running a custom theme I'd strongly recommend that you actually remove the WooCommerce styles and create your own. This way you'll never have these problems during future updates.

    Thanks

  7. Thomas Schmall
    Member
    Posted 1 year ago #

    @jameskoster:
    > However these styles shouldn't really produce any conflicts.

    Huh? Why not? They did though - and I didn't do anything unusual for all I see.

    > I can't see what your original problem is now that you've fixed it

    The problem was that WooCommerce sets all images to 'height:auto'. Which even overrides when I specifically say 'height="17px"' in the img tags themselves.
    It does that for every WooCommerce page that comes up, even if they don't use the "woocommerce.php". My fix was to create an CSS tag for each image that i needed to scale, and set it's height in there, to override the WooCommerce sheet.
    I dunno if this 'height:auto' is a useful setting anyways, seeing that the thumbnails and previews in WooCommerce are a bit of a blurry mess.

    >FYI seeing as you're running a custom theme I'd strongly recommend that you actually remove the WooCommerce styles and create your own. This way you'll never have these problems during future updates.

    Ok, thanks James - I'll check that out. I thought I would be more future safe when I only replace the parts that I need to be different. Since it's a massive amount of settings you have in your CSSs. ...and they're very hard to read to rework them fully.

  8. Thomas Schmall
    Member
    Posted 1 year ago #

    ... maybe removing this would even solve the issue with the randomly scaled images in the product listing (and with the other images).

    For example you have in those images the width and height coded:
    <img class="attachment-shop_catalog wp-post-image" width="147" height="300" alt="Poppy Flowers, Brush Stroke View" src="http://www.oxpal.com/wp-content/uploads/2013/12/poppy-flowers-painting-poster-147x300.jpg"></img>

    But this height gets overridden - thus ends up as 310 in my case. Which blurs the image.

    Relevant support thread: http://wordpress.org/support/topic/woocommerce-product-images-blurry-and-not-fitting/

  9. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    The images aren't randomly scaled. They should be scaled in proportion. We use height auto because the images are fluid width now that the default WooCommerce css is responsive. Otherwise, as the images shrink down to handheld size they will inherit the height attribute on the img tag making them horribly distorted. Make sense?

  10. Thomas Schmall
    Member
    Posted 1 year ago #

    So it's about smaller devices? Yeah that makes sense.
    Just for the site as on a PC I thought it was strange that I can set the size in the options (300 in my case), but then it get's scaled to another (310). It's in proportion but leads to blurring. I called it random, because I can't figure out the system behind it, it's kinda different for each area.
    But I'm alright with it - gonna live with the blur.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic