Add A CSS-Only Products Grid To WP eCommerce Page

In this video, I’m going to show you how you can transform a default products display that comes with the free WordPress plugin WP eCommerce into a great looking grid-view.

If you use the great WP eCommerce plugin to power your shop, but would love to display your products in a grid instead of just having one product stacked on top of the other, you’ll need to upgrade your plugin with a paid add-on, called Gold Cart.

This add-on will super charge WP eCommerce with a number of features, including that of configuring your products grid from the admin panel.

In this video, I’m going to show you how to achieve a pretty decent products grid with WP eCommerce without using the paid add-on. However, it’ll be a CSS solution, without back-end configuration options.

If you’re ready to get your hands dirty with some code, let’s get started.

Resources and Credits

Video edited using the YouTube video editor.

Which plugin do you use for your e-commerce website? Do you prefer a grid or list display for your online store? I’d love to hear from you in the comments below:)


2 thoughts on “Add A CSS-Only Products Grid To WP eCommerce Page

  1. Hello Maria!
    Thanks for the Tutorial! I have the same problem on my hands right now, plus some more…
    But there is no much use this kind of Tutorial if you aren’t showing it step by step or even better
    give the CSS Code available. Why people must do the same thing many times if it is already done
    once. We could even pay something for that.
    BR, Jari

    • Hi Jari,
      Thanks for your comment. I didn’t leave the CSS file to download nor did I go into the CSS step by step mainly because I was using a particular theme and not everybody works in the same context. The CSS rules that worked in that context might not work on another, or might need some adjustment. However, I think I explained what I did, and if you stop the video in the right places, you can understand the code that’s needed to get the grid layout working. These are relatively short, focused tutorials aimed at solving a particular problem. Unless it’s something more complicated than activating a theme or a plugin, they presuppose some knowledge of CSS and familiarity with WP. Are you a developer? Are you working on a website? What kind of problems are you having?

Have your Say

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s