Tips and Tricks WP eCommerce

eCommerce Solution for WordPress Blog

  • Home
  • eCommerce Plugins
  • WP eStore Documentation
  • WP Shopping Cart Doc

WP Shopping Cart – Stacking Multiple Product Boxes Side by Side

I received the following question today from one user:

I love the display box feature, yet I cannot get them to align horizontally on the page. How can I get more that one item per line?

In this tutorial I will explain how you can stack the product boxes side by side to display multiple products in one line.

Preparation

If you don’t know how to create a product box using the WP Shopping Cart plugin then read this page first.

CSS Tweaks

I am going to apply a few custom CSS tweaks to stack the product boxes horizontally.

Step 1) Grab this custom css plugin (it allows you to add your custom CSS code without modifying the main plugin).

Step 2) Lets make the product boxes narrower so there is more room to have multiple boxes side by side.

Add the following block of CSS code in the custom CSS plugin’s interface to define a maximum width of 250px for the boxes.

.wp_cart_product_display_box{
max-width: 250px;
}

You can use a different value if you want to make it narrower.

Step 3) Lets float the product boxes so they stack. Add the following CSS code just below the max-width that you defined in step 2:

float: left;

You should have the following combined CSS code and the boxes should be stacked side by side now:

.wp_cart_product_display_box{
max-width: 250px;
float: left;
}

Step 4) Finally, lets give it some margin to add some space between the boxes.

Add the following CSS code just below what you defined in step 3:

margin-right: 10px;

You should have the following combined CSS which is the final code

.wp_cart_product_display_box{
max-width: 250px;
float: left;
margin-right: 10px;
}

The Final Output

The final output should look like the following example (your product boxes will be aligned horizontally):

shopping-cart-grid-product-boxes-example

Our WP eStore plugin has more product display templates and better grid layout options. You can check the styles offered in WP eStore by visiting this page.

Create a Grid Display for Your Products Using the WP eStore Plugin

You can show your products in nice grid display using the WP eStore plugin. First, make sure that you have the following installed:

  1. WP eStore
  2. Extra eStore Shortcodes Addon

Fancy Display Templates that Support Grid Display

You will need to pick which fancy template you want to use for your grid display.

The following fancy display templates can be used to make a grid layout

  • Fancy 3
  • Fancy 5
  • Fancy 6
  • Fancy 11
  • Fancy 13
  • Fancy 14
  • Fancy 17

You can find an example of all the Fancy display templates here.

Steps for Making a Grid Display

Step 1: Install the WP eStore plugin and Extra eStore Shortcodes Addon (if you haven’t done it already).

Step 2: Choose which display template you want to use. Lets say you want to use fancy display template 3.

Step 3: Choose which category display option you want to use. You can see all the options here.

Step 4:  Now, create a new WordPress page or post and use the category product display shortcode (using your preferred display template) and it will automatically show all the products from that category in a grid layout.

Example: Below is an example shortcode that will show all products from category 1 using the a grid layout:

[wp_eStore_category_products_fancy id=1 style=3]

Using the style parameter you can modify which display template you want to use for your grid layout. In this example we are using the fancy display template 3:

estore-product-grid-display-example

Note: You can also use the display all products shortcode found here to show all your products in a grid layout.

Your Shopping Cart

Shopping Cart Empty
Shopping Cart is Empty
Visit The Shop

Search

Featured Documents

Stylish Product Display Options for WP eStore WP eStore Quick Setup and Usage Video Tutorial WP eStore Shortcodes and Functions Reference WordPress eStore Plugin Features WordPress eStore Plugin Demo What Our Customers Have to Say About Our Products WordPress eStore WishList (Feature Suggestions) WordPress eStore Frequently Asked Questions (FAQ) How to Show Add to Cart buttons

Featured Plugins

WP Express Checkout Plugin
wordpress_estore_icon
wordpress membership plugin icon
wordpress_affiliate_plugin_icon

Copyright © 2025 | eCommerce Plugins