WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
WooCommerce on iPhone (9 posts)

  1. Karloo
    Member
    Posted 1 year ago #

    When opening the Store on the Agency Theme from Studiopress on an iPhone, I note that the buttons below every product is destroyed and often unreadable. That shop is built on the WooCommerce plugin.

    Is this deforming of the buttons the expected behaviour for small screens?

    I guess the WooCommerce plugin is not advertised as being responsive.
    Am I right?

    http://wordpress.org/extend/plugins/woocommerce/

  2. Roy Ho
    Member
    Posted 1 year ago #

    It is the theme that should be responsive. And if the theme is responsive and it supports WooCommerce, then the theme is responsible to make WooCommerce responsive as well...

  3. Karloo
    Member
    Posted 1 year ago #

    Thanks for commenting. As I understand this then the menues of the plugin should be edited in the stylesheet for the theme.

    Well, now I understand why the menues fail because they try to combine two different types of thing that not are naturally combined. It might be hard to find out which CSS properties should be used to change a plugin.

  4. Roy Ho
    Member
    Posted 1 year ago #

    Well in order to make something responsive, you have to have pretty good knowledge on how CSS works and more specifically how media queries work. Finding the CSS for an element is the easy part as you can use any of the dev tools out there like firebug or chrome tools.

  5. Karloo
    Member
    Posted 1 year ago #

    Yes, and it is even harder to change in menues that someone else has created. If I had set the CSS-styles myself I would have tried, but only for the smallest screensize. Then I guess, I would have deleted the background on the buttons and adjusted the different paddings to the smaller screen as well as decreased the font-size. But that has to be done for every state of the buttons,so I refrain from mixing in.

    There might be other plugins or solutions out there.

  6. bloohair
    Member
    Posted 10 months ago #

    Hi, I'm having a similar issue using WooCommerce with a theme that supports it - 'Responsive Theme' by Cyberchimps.
    The products page displays all products in 4 columns rather than one as it should do for mobiles.
    I understand CSS very well, including responsive media queries as I have hand built responsive sites myself.
    However, playing detective, trying to find out where other people have coded the CSS and what they called it is somewhat nightmarish. But I suppose this is a feature of WordPress and plug ins that we have to live with.
    My problem is that the CSS for WooCommerce displays in my editor as one paragraph of code - no separations of CSS content making it almost impossible to see where one CSS instruction ends and another starts.
    If I find the solution, I'll let you know.

  7. Roy Ho
    Member
    Posted 10 months ago #

    @bloohair - what you're seeing is a compressed version of the CSS. Nothing wrong with that. If you want to see the "human readable" version, look for the LESS files. Those files contain the uncompressed CSS code.

  8. bloohair
    Member
    Posted 10 months ago #

    Smashing Pixels - thanks. I'll look at the LESS files. Not had anything to do with those so far, so a new thing for me.
    I've also had a response from Cyberchimps who see the site fine on mobile - so it could just be my iphone. there's a new update out now, so I will install that first and then see.

  9. sparky672
    Member
    Posted 6 months ago #

    Quote Roy:

    It is the theme that should be responsive. And if the theme is responsive and it supports WooCommerce, then the theme is responsible to make WooCommerce responsive as well...

    This sounds good but WooCommerce is still not working very well with a stock theme (TwentyThirteen).

    Just pull up the Cart page on an iPhone 5/5s using the TwentyThirteen theme and you can see the layout is somewhat broken. When TwentyThirteen works as designed, you should not see everything pushed the left with white space running from top to bottom on the right. Yet, that's exactly what the Cart page is doing.

    This is exactly what happens to TwentyThirteen when any posted content is wider than it should be. The Cart page itself is just too wide for this theme on iPhone.

    Again, this example only uses default installations of TwentyThirteen and WooCommerce... nothing modified.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic