Support » Plugin: WooCommerce » Responsive Form Fields

  • I am working on a site that has just added the Woo Commerce plugin. The theme is a child theme built off of “Pin Board,” and excellent responsive theme. Well, at least it was until we installed Woo Commerce… lol None of the forms are responsive, and the product columns do not float left, lovely! You would think the plugin would be responsive right out of the box, but no.

    Any suggestions on this?

Viewing 9 replies - 1 through 9 (of 9 total)
  • It’s difficult to make a plugin’s HTML / CSS responsive when the plugin developer has no idea which of 150,000+ themes you might be using – because responsiveness is primarily the theme’s job and is handled differently in various themes. “Responsive” is concept related to adjusting screen elements based on display size, and that is implemented in whatever way a person wants to implement it, and there are many ways to get that done.

    I must say, that’s very un helpful…….. 🙁 I ask for help, and all I get is blah, blah, blah, from the plugin developer’s rep. Could it be it’s because you want people to buy Woo’s own responsive themes? Instead of adapting the one they want to use?

    Pity you had nothing to say.

    Plugin Author James Koster


    @odinkinder IgniteWoo is _not_ a WooThemes team member and has no reason to want you to buy Woo products.

    What he said is true. It is impossible for one plugin to integrate with the hundreds of thousands of WordPress themes out there.

    That said, it should be easy to make WooCommerce responsive if you have some CSS skill. That is not really something we can do for you though.

    Yes, I undertand that, but, would it hurt to configure the CSS so that the pages that have two columns on it for the right one to “float left” at `@media screen and (max-width: 760px)? Or, to have your forms set to something like 100% width? And, I have looked at your CSS, with an eye toward modifying it, and in Text Wrangler, it just a long string, doing a “hard wrap” does improve the situation some, but, not by much. Also, the moment my client hits the “upgrade” button on the next version change, it all gets wiped away. They have spent well over $200 USD on “extensions” on your site, and we thought we were done, and at the last minute, with a deadline looming, the “free” part of the plugin fails us. I must say, they are not thrilled. All we need is some float left on the columns in the product, and check out page, and for the cart to be responsive in width.

    Now, can you offer some help in this area please?

    How is this Woo’s problem? Incompatibility with your theme is the theme author’s problem, clearly.

    Also, when you apply the Css customization you will be authoring (probably take less time than all of the to-ing and fro-ing), you should apply these to a css file you own (bottom of your theme style.css, for example), and thus the changes will be unaffected by future Woo updates.

    Sorry, but no, the Woo plugin has it’s own CSS for layout, changing the theme’s CSS has no effect on the CSS in the plugin.

    Well let’s break it down, then.
    (1) identify in what sequence the css files for your site get executed, and particularly when the Woo css is applied.
    (2) ensure that any *additions* to your css configuration, which are aimed at repairing the float and other issues, are executed after Woo/last (even if you have to create another CSS file, to control this timing issue).
    (3) enqueue this new css file in your theme’s functions file. Using priority will help to ensure this file is last.
    (4) using firefox/firebug or google chrome, identify the css changes needed for your site and introduce them into that last css file, as you test.

    This method allows css overrides to be introduced without touching Woo code in any way, making them independent of future Woo upgrades.

    And Bob’s your uncle, Fanny’s your aunt.

    Now see? This is more helpful, thank you. They are not totally in love with the Woo Commerce appearance, so they went out and found a developer to make changes. I told them that while he was at it, he might as well make it responsive too. We shall see how it goes. I told them that all that would needed to be done was uncheck the box controlling the Woo CSS, and then I could style the pages. But, these folks have a hard time understanding things. One of the principals went in the code editor today and messed up the functions.php file and crashed the site……. lol I got it back up in five minutes, we’ll see how many more times that happens before they learn to keep their fingers out of the works.

    Thanks for your help.

    Plugin Author James Koster


    FYI if you want to disable the WooCommerce CSS entirely via your theme, add this to your functions.php file;

    define('WOOCOMMERCE_USE_CSS', false);

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive Form Fields’ is closed to new replies.