WordPress.org

Ready to get started?Download WordPress

Forums

Suffusion
[resolved] Suffusion and WooCommerce (4 posts)

  1. apcgallery
    Member
    Posted 1 year ago #

    Hello fellow Suffusioners (& Sayontan)

    I'll post this on Aquoid forums when I can; I'm having trouble accessing it at the moment, maybe due to high traffic.

    The past few months I've been building my first WordPress site. I started with a very basic knowledge of html and css, and the resourcefulness to query answers to the questions I have and things I need to know. I've learned so much, but I still have a ways to go. Thanks Sayontan for such an awesome theme.

    My current difficulty is with WooCommerce (ver. 2.0.12), but I think it relates to Suffusion as well. I'm using the most up-to-date versions of WP, Suffusion, and WC (http://apcfinearts.com/shop/).

    • By default, my store displays like this: (http://apcfinearts.com/default-display.png)
    • I found some CSS on Aquoid Forums, and tweaked the values. This is what the page currently uses.
    • .woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products {width:100%;}
      .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 37%;clear: none;height: 300px;}
    • I'd like to use more than 2 columns but when I try, this happens: (http://apcfinearts.com/3columndisplay.PNG). The only changes were height (250px) and width (27%).

    These changes also affect the related products of individual product pages. I can't remember ever adding this feature (and don't know where to remove it), but I would like to be able to re-size them separately from the catalog images- and display them horizontally rather than vertically.

    If you have helpful input with these issues or something similar, I would love to hear it. The store has a ways to go as far as design and usability, but this is priority one for me.

    Thanks in advance for any help you can offer!

  2. colinsp
    Member
    Posted 1 year ago #

    Do you have the Suffusion eCommerce plug-in installed? If not then get that.

  3. apcgallery
    Member
    Posted 1 year ago #

    Hi, Colinsp.

    Yes, Suffusion Commerce Pack was one of the first plugins I installed.

  4. apcgallery
    Member
    Posted 1 year ago #

    I've achieved a properly displayed 4-column product layout, thanks to Drake's post on aquoid:
    http://aquoid.com/forum/viewtopic.php?f=4&t=16782&hilit=woocommerce#p56192

    Since I did not mention this in my first post, this code goes in
    Suffusion Options > Back-end > Custom Includes > Custom Styles

    .woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products {width:100%;}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 21.5%;clear: none;height: 220px;}

    This post also fixed my problem with related products. Now they display on the same row, instead of 1 product on each row.

    .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce .related ul li.product, .woocommerce-page .related ul li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .upsells.products ul li.product {width: 47.5%;}

    What is most important about these bits of CSS is the width attribute. I attempted many values with no success. The values must be the correct width to display properly. If you change the "21.5%" to 25%, your products will become jumbled again.

    If you have any issues with suffusion, I suggest you visit AquoidForums and do an advanced forum search. I found my solution on the 8th thread I found, so look hard before posting a new topic ;)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic