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
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;}