Support » Theme: Suffusion » Suffusion and WooCommerce

  • Resolved apcgallery


    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 (

    • By default, my store displays like this: (
    • 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: ( 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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Do you have the Suffusion eCommerce plug-in installed? If not then get that.

    Hi, Colinsp.

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

    I’ve achieved a properly displayed 4-column product layout, thanks to Drake’s post on aquoid:

    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 😉

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Suffusion and WooCommerce’ is closed to new replies.