Skip to content

Can I Display Products in Grid Format?

Yes. To display your products in a grid format as demonstrated in the two examples below, just follow the instructions shown with each of the examples.

Example #1

Open the page or post that you want to add the grid of products to. Select the HTML tab and insert the code below into the page/post.

[es1sc_prodlist prd_ids="prodi_d1,prod_id2,prod_id3, etc"]

Enter the following into the field labelled Product List Item Format on the 1SC Settings page:

<div class="product_l">
      #ProductImage
      <span class="product_name">
         <a style="display:block;text-align:center;" href="/store/#ProductHyphenName">#ProductName</a>
      </span> <br />
      <span class="product_details">
         <span class="price">#ProductPrice</span><br />
         <span class="buy-now">#BuyNow</span>
      </span>
</div>

And add the following to your theme's style sheet (style.css). Your theme's style sheet can be found in /wp-content/themes/YOUR_THEME_NAME.

div.product_l {border-bottom: 1px dotted #FF9900;border-right: 1px dotted #FF9900;font-size: 12px; padding: 5px 0; float: left; width: 140px; height:400px;}
.product_l .product_name {text-align: left; ; display:block; font-weight: bold; font-size: 0.95em;}
div.product_l img.product_image {float: left; padding: 5px 5px 5px 0; width: 130px; }
div.product_l .product_details {text-align: right; display:block;font-size: 0.95em; }
div.product_l .product_details .description {text-align: left; display: block;}
div.product_l .price {font-weight: bold; display: block;}
div.product_l .product_details .sku {text-align: left; font-size: 0.85em; display: block;}
div.product_l .product_details .buy-now {display: block; padding: 0 0 8px 0;}

Example #2

1shoppingcart wordpress plugin grid format option 2
Open the page or post that you want to add the grid of products to. Select the HTML tab and insert the code below into the page/post.

<div class="prodlist">
[es1sc_prodlist prd_ids="prodi_d1,prod_id2,prod_id3, etc"]
</div>

Enter the following into the field labelled Product List Item Format on the 1SC Settings page:

<div class="product">
   <div class="col1">#ProductImage</div>
   <div class="col2">
      <span class="product_name">#ProductName</span>
      <span class="product_details">
         <span class="description">#ShortDescription</span>
         <span class="sku">#ProductSku</span>
         <span class="price">#ProductPrice</span>
         <span class="buy-now">#BuyNow</span>
      </span>
      <div class="clear"> </div>
   </div>
   <div class="clear"> </div>
</div>    

And add the following to your theme's style sheet (style.css). Your theme's style sheet can be found in /wp-content/themes/YOUR_THEME_NAME.

/**
* Product Listing
*************************************************/
.prodlist {overflow: hidden; width: 100%;}
.prodlist .product {overflow: auto; width: 47%; display:inline-block; 
          padding: 8px; border-right: 1px dotted #666;border-bottom: 1px dotted #666;vertical-align: text-top;}
.prodlist .col1 {display:block;float:left; width: 33%;}
.prodlist .col2 {display:block;float:right; width: 66%;}
.prodlist .col1 img {width:115px;} 
.prodlist .product_name {font-weight: bold;}
span.regular, span.save-percent, span.save-dollar, span.sale, span.buy-now {display:block;text-align:right;}           

Feedback and Knowledge Base