WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] column product in new 2.1.2 (17 posts)

  1. lododicesimo
    Member
    Posted 6 months ago #

    There are 2 column in shop page and category

    ho i set 3 column? looking in google, all the fix doesen't work on news relase.
    thanks.

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

  2. Martin
    Member
    Posted 6 months ago #

    Same issue

  3. Coen Jacobs
    Member
    Plugin Author

    Posted 6 months ago #

    This is one of the topics I've written this post for: Changing the number of product columns in WooCommerce 2.1. Have fun!

  4. Martin
    Member
    Posted 6 months ago #

    Well, I tried your filter, Coen and that was a bust, unfortunately.
    Jeez, all I know it was displaying fine before 2.1 and now the columns and images are wrong.

    Yeah, I guessing it is probably the theme but don't even know where to begin and why it's gone so wrong with an update.

    My shop is at http://www.geekandjock.com/the-geekandjock-shop and even the single product images are width content width now when they were previously about 50%

    I've added the filter for column display of 4 and I can see a first and last class as well.

    Kinda lost at this point and updates to the theme takes freaking months so that's a bit of a no-go - got the theme originally for it's BuddyPress support and the WooCommerce display was a bonus - until now, that is :)

  5. lododicesimo
    Member
    Posted 6 months ago #

    Exactly the same here as Martin.
    I did the same , tryed the filter but still doesen't work, before 2.1.1 was ok!

    so i understand that nothing is change but is true that now doesen't work. i have a backup of my website with old woocommerce and all works even the filter.

    SO there must be a solution.

    my website is http://www.oliservices.it/webstore/

    The image of category was big! i had to manual use css to look small.. but i need to have 3 or 4 column.

    thanks

  6. babssaul
    Member
    Posted 6 months ago #

    I can see that some have found solutions. Any chance of sharing, please?

  7. lododicesimo
    Member
    Posted 6 months ago #

    are you speaking about me?
    what i did was only resize my image adding this change to css to look the image smaller..
    (i use my custom css plugin http://wordpress.org/plugins/my-custom-css/)
    and i did that code in it:

    .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    width: 50%;
    height: auto;
    display: block;
    margin: 0 0 8px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    -o-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
    }

    BUT column still 2 ! it only looks better...
    waiting for solution or i have to downgrade to old woocommerce...

  8. babssaul
    Member
    Posted 6 months ago #

    For my theme I over-rode the .hentry {clear: both;} code with .hentry {clear: none;}

    but I don't know enough geek to know if this is a sensible solution.

  9. lododicesimo
    Member
    Posted 6 months ago #

    how you do it?

  10. Martin
    Member
    Posted 6 months ago #

    Well, all I've managed to do is reduce the image sizing to the smaller size that was pre-v2.1

    Still 2 columns which looks out of place.
    Filter obviously doesn't work since the theme doesn't have the required template files, I'm guessing.

    Does anyone have any clues what and where I need to do next?
    This is driving me nuts :)

  11. lododicesimo
    Member
    Posted 6 months ago #

    How i do it:

    #1 Your theme doesn’t use the filter

    The filter gets called from the template files. A lot of themes out there bundle all the WooCommerce templates files (they shouldn’t, but do it anyway) and might remove filters like this, for whatever reason. Please check the source of your theme files to see if it overrides any WooCommerce template files (to be found in the /woocommerce/ folder in your theme). If it does, make sure the loop_shop_columns filter is still used.

  12. Martin
    Member
    Posted 6 months ago #

    no idea what you are trying to tell me @lododicesimo
    there is no /woocommerce/ folder in my theme

  13. lododicesimo
    Member
    Posted 6 months ago #

    exactly!!! is what i said! there is not. but Coen Jacobs in his post said it! http://coenjacobs.me/changing-number-columns-woocommerce-2-1/

    and he has put resolved to this post?!

    i still in the problem.

  14. Coen Jacobs
    Member
    Plugin Author

    Posted 6 months ago #

    That's only if your theme bundles WooCommerce template files.

    If it doesn't do that, that doesn't apply to your theme. In that case, go to the next steps.

  15. Martin
    Member
    Posted 6 months ago #

    I'm neither a code or CSS expert but have managed to get some progress on the product pages with some CSS (remember I'm not good at this).
    I've added it here:
    [1] In case it helps someone progress their site
    [2] They might some some additional suggestion or improvements
    [3] Suggestions why the product listing is a bit fragmented - can't quite nail that bit, at the moment

    /* ------- Style single page WooCommerce ------- */
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
      float: left !important;
      width: 45% !important;
      margin: 1em !important;
    }
    /* ------- end of Style single page WooCommerce ---------- */
    
    /* Woocommerce style fixes */
    
    #content div.page-description div.woocommerce.columns-4 ul.products li.product-category.product.first {
      float: left !important;
    	clear: none !important;
    	width: 22.05%;
      margin: 0 !important;
    }
    
    #content div.page-description div.woocommerce.columns-4 ul.products li.product-category.product.last {
      clear: none !important;
      width: 22.05% !important;
    }
    
    #content div.page-description div.woocommerce.columns-4 ul.products li.product-category.product {
      float: left !important;
    
    	clear: none !important;
      width: 22.05% !important;
    }
    
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
     clear: none !important;
      float: left !important;
      margin: 0 0 2.992em 1em !important;
      width: 22.05% !important;
    }
    
    /* fixes end */

    Hope it helps someone.

  16. lododicesimo
    Member
    Posted 6 months ago #

    much better! still empty part that I am trying to resolve..

  17. lododicesimo
    Member
    Posted 4 months ago #

    nobody have find new solution to look it better..

    situation still like that: http://oliservices.it/webstore/

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.