There are essentially four different possible views for your products through FoxyPress. We are looking to implement custom product templates so you can use WordPress templates to modify your templates, instead of straight CSS for a specified html structure.
For now, below are the possible structures available, give or take some options as you change your store, and the CSS that can be applied to each of them. If you need additional help, please contact us through live chat or our contact form and we’d be happy to look at your CSS!
.foxy_item_wrapper_single{float:right;width:500px;}
/* controls the name */
.foxypress_item_name_single{}
/* This controls the price */
.foxypress_item_price_single{/*font-weight:bold;*/}
/* controls the description */
.foxypress_item_description_single{/*font-style:italic;*/}
/* wraps the product options */
.foxypress_item_options{}
/* wraps the submit wrapper */
.foxypress_item_submit_wrapper_single{margin-top:10px;}
/* controls the submit button */
.foxypress_item_submit{/*background:#FFFFFF;border:none;*/}
/* wraps the item's image(s) */
.foxypress_item_image_single{float:left;}
/* controls the item's main image */
.foxypress_item_image_single img{width:425px;}
/* controls the item's list of additional images */
.foxypress_item_image_thumbs_single{list-style-type:none;margin:0;}
/* controls the list item's */
.foxypress_item_image_thumbs_single li{float:left;margin-top:5px;}
/* controls the list item's images */
.foxypress_item_image_thumbs_single img{width:125px;margin-right:5px;}
HTML
<div class="foxy_item_wrapper_single">
<form action="https://websevenpointo.foxycart.com/cart" method="POST" class="foxycart" accept-charset="utf-8" id="foxypress_form_uam9ogid">
<input type="hidden" name="name" value="Marimekko Räsymatto Red Bed Linens" />
<input type="hidden" name="code" value="211722" />
<input type="hidden" name="price" value="299.00" />
<input type="hidden" name="category" value="General" />
<input type="hidden" name="image" value="http://www.foxy-press.com/wp-content/inventory_images/fp_4oem1fq2s7_4.jpg" />
<input type="hidden" name="weight" value="0" />
<input type="hidden" name="h:m_id" value="" />
<input type="hidden" name="Downloadable" value="false" />
<input type="hidden" name="quantity_max" value="3" />
<input type="hidden" name="Inventory_ID" value="4" />
<div class="foxypress_item_name_single">Marimekko Räsymatto Red Bed Linens</div>
<div class="foxypress_item_price_single">$299.00</div>
<div class="foxypress_item_description_single">
<p>Appearing as a disciplined linear pattern from afar....</p>
</div>
<div class="foxypress_item_options">Accessories:
<select name="Accessories" onchange="foxypress_modify_max('foxypress_form_uam9ogid',
'0-pillow{c:211722}~5,1-pillow{p+25.00|w+1.00|c:211722-P}~1', this.value, 3);">
<option value="0-pillow{c:211722}">w/ no Pillow</option>
<option value="1-pillow{p+25.00|w+1.00|c:211722-P}">w/ 1 Pillow +$25.00</option>
</select>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
var maxfieldfoxypress_form_uam9ogid = jQuery("#foxypress_form_uam9ogid").find('input[name=quantity_max]');
console.log(maxfieldfoxypress_form_uam9ogid);
maxfieldfoxypress_form_uam9ogid.val(3);
});
</script>
</div>
<div class="foxypress_item_submit_wrapper_single">
<div class="shipto_container">
<div class="shipto_select" style="display:none">
<label>Ship this item to:</label><br />
(you will be able to input shipping addresses during checkout)<br />
<select name="x:shipto_name_select">
</select>
</div>
<div class="shipto_name">
<label>Enter the name of the recipient (or leave it empty to ship it to yourself):</label><br />
<input type="text" name="shipto" value="" />
</div>
</div>
<input type="submit" value="Add To Cart" class="foxypress_item_submit_single" />
</div>
</form>
</div>
<div class="foxypress_item_image_single">
<img src="http://www.foxy-press.com/wp-content/inventory_images/fp_4oem1fq2s7_4.jpg" />
<ul class="foxypress_item_image_thumbs_single">
<li>
<a href="http://www.foxy-press.com/wp-content/inventory_images/fp_4oem1fq2s7_4.jpg" rel="colorbox">
<img src="http://www.foxy-press.com/wp-content/inventory_images/fp_4oem1fq2s7_4.jpg" />
</a>
</li>
<li>
<a href="http://www.foxy-press.com/wp-content/inventory_images/fp_t3vdx46d7s_4.jpg" rel="colorbox">
<img src="http://www.foxy-press.com/wp-content/inventory_images/fp_t3vdx46d7s_4.jpg" />
</a>
</li>
<li>
<a href="http://www.foxy-press.com/wp-content/inventory_images/fp_zs068523ti_4.jpg" rel="colorbox">
<img src="http://www.foxy-press.com/wp-content/inventory_images/fp_zs068523ti_4.jpg" />
</a>
</li>
</ul>
</div>
View Sample File (right click save as)
/* controls the row wrapper div surrounding X products you choose per row */
.foxypress_item_row{width:700px;}
/* wraps the item's information and image(s) */
.foxy_item_wrapper{float:left;width:300px;margin-right:15px;}
.foxypress_item_content_wrapper{}
/* controls the name */
.foxypress_item_name{/*color:#E4AE0A;*/}
/* controls the price */
.foxypress_item_price{/*font-weight:bold;*/}
/* controls the description */
.foxypress_item_description{/*font-style:italic;*/}
/* wraps the read more button */
.foxypress_item_readmore {/*margin-top:10px;*/}
/* wraps the item's image(s) */
.foxypress_item_image{}
/* controls the item's main image */
.foxypress_item_image img{width:300px;}
.foxypress_item_row_clear{clear:both;/*padding-bottom:20px;*/}
HTML
<div class="foxypress_item_row"> <div class="foxy_item_wrapper"> <div class="foxypress_item_image"> <a href="http://www.foxy-press.com/product-detail?id=3"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" /></a> </div> <div class="foxypress_item_content_wrapper"> <div class="foxypress_item_name">Meridian Café Dining Table</div> <div class="foxypress_item_price">$149.00</div> <div class="foxypress_item_description"> Round Café Table. (2.5"dia. umbrella hole); 34"... </div> <div class="foxypress_item_readmore"><a href="http://www.foxy-press.com/product-detail?id=3">Read More</a></div> </div> </div> <div class="foxy_item_wrapper"> <div class="foxypress_item_image"> <a href="http://www.foxy-press.com/product-detail?id=3"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" /></a> </div> <div class="foxypress_item_content_wrapper"> <div class="foxypress_item_name">Meridian Café Dining Table</div> <div class="foxypress_item_price">$149.00</div> <div class="foxypress_item_description"> Round Café Table. (2.5"dia. umbrella hole); 34"... </div> <div class="foxypress_item_readmore"><a href="http://www.foxy-press.com/product-detail?id=3">Read More</a></div> </div> </div> </div> <div class="foxypress_item_row"> <div class="foxy_item_wrapper"> <div class="foxypress_item_image"> <a href="http://www.foxy-press.com/product-detail?id=3"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" /></a> </div> <div class="foxypress_item_content_wrapper"> <div class="foxypress_item_name">Meridian Café Dining Table</div> <div class="foxypress_item_price">$149.00</div> <div class="foxypress_item_description"> Round Café Table. (2.5"dia. umbrella hole); 34"... </div> <div class="foxypress_item_readmore"><a href="http://www.foxy-press.com/product-detail?id=3">Read More</a></div> </div> </div> <div class="foxy_item_wrapper"> <div class="foxypress_item_image"> <a href="http://www.foxy-press.com/product-detail?id=3"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" /></a> </div> <div class="foxypress_item_content_wrapper"> <div class="foxypress_item_name">Meridian Café Dining Table</div> <div class="foxypress_item_price">$149.00</div> <div class="foxypress_item_description"> Round Café Table. (2.5"dia. umbrella hole); 34"... </div> <div class="foxypress_item_readmore"><a href="http://www.foxy-press.com/product-detail?id=3">Read More</a></div> </div> </div> </div>
View Sample File (right click save as)
.foxy_item_wrapper_detail{float:right;width:500px;}
/* controls the name */
.foxypress_item_name_detail{/*color:#E4AE0A;*/}
/* This controls the price */
.foxypress_item_price_detail{/*font-weight:bold;*/}
/* controls the description */
.foxypress_item_description_detail{/*font-style:italic;*/}
/* wraps the product options */
.foxypress_item_options_detail{}
/* wraps the submit wrapper */
.foxypress_item_submit_wrapper_detail{margin-top:10px;}
/* controls the submit button */
.foxypress_item_submit_detail{/*background:#FFFFFF;border:none;*/}
/* wraps the item's image(s) */
.foxypress_item_image_detail{float:left;}
/* controls the item's main image */
.foxypress_item_image_detail img{width:425px;}
/* controls the item's list of additional images */
.foxypress_item_image_thumbs_detail{list-style-type:none;margin:0;}
/* controls the list item's */
.foxypress_item_image_thumbs_detail li{float:left;margin-top:5px;}
/* controls the list item's images */
.foxypress_item_image_thumbs_detail img{width:125px;margin-right:5px;}
HTML
<div class="foxy_item_wrapper_detail">
<form action="https://websevenpointo.foxycart.com/cart" method="POST" class="foxycart" accept-charset="utf-8" id="foxypress_form">
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="name" value="Meridian Café Dining Table" />
<input type="hidden" name="code" value="575392" />
<input type="hidden" name="price" value="139.00" />
<input type="hidden" name="category" value="General" />
<input type="hidden" name="image" value="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" />
<input type="hidden" name="weight" value="0" />
<input type="hidden" name="h:m_id" value="" /><input type="hidden" name="Downloadable" value="false" /><input type="hidden" name="quantity_max" value="" /><input type="hidden" name="Inventory_ID" value="3" />
<input type="hidden" name="discount_quantity_amount" value="" />
<input type="hidden" name="discount_quantity_percentage" value="" />
<input type="hidden" name="discount_price_amount" value="" />
<input type="hidden" name="discount_price_percentage" value="" />
<div class="foxypress_item_name_detail">Meridian Café Dining Table</div>
<div class="foxypress_item_price_detail">
<span class="foxypress_item_original_price" style="text-decoration:line-through;">$149.00</span>
<span class="foxypress_item_sale_price">$139.00</span>
</div>
<div class="foxypress_item_description_detail">
<p>Round Café Table. (2.5"dia. umbrella hole); 34" dia. x 28"</p>
<p>Cozy seating for two on the deck or poolside. ...</p>
</div>
<div class="foxypress_item_options_detail">
<div class="foxypress_item_options">Accessories:
<select name="Accessories" onchange="foxypress_modify_max('foxypress_form', '1-chair{p+75.00|w+5.00|c:575392-1}~5,2-chairs{p+150.00|w+10.00|c:575392-2}~5', this.value, 0);">
<option value="1-chair{p+75.00|w+5.00|c:575392-1}">w/ 1 Chair +$75.00</option>
<option value="2-chairs{p+150.00|w+10.00|c:575392-2}">w/ 2 Chairs +$150.00</option>
</select>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
var maxfieldfoxypress_form = jQuery("#foxypress_form").find('input[name=quantity_max]');
maxfieldfoxypress_form.val(5);
});
</script>
</div>
</div>
<div class="foxypress_item_quantity_wrapper_detail">
Quantity: <input type="text" name="quantity" value="1" class="foxypress_item_quantity_detail" />
</div>
<div class="shipto_container_wrapper_detail">
<div class="shipto_select" style="display:none">
<label>Ship this item to:</label><br />
(you will be able to input shipping addresses during checkout)<br />
<select name="x:shipto_name_select"></select>
</div>
<div class="shipto_name">
<label>Enter the name of the recipient (or leave it empty to ship it to yourself):</label><br />
<input type="text" name="shipto" value="" />
</div>
</div>
<div class="foxypress_item_submit_wrapper_detail">
<input type="submit" value="Add To Cart" class="foxypress_item_submit_detail" />
</div>
</form>
</div>
<div class="foxypress_item_image_detail">
<img src="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" />
<ul class="foxypress_item_image_thumbs_detail">
<li><a href="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" rel="lightbox[foxypress3]" title="Meridian Café Dining Table"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_3j3zrfvech_3.jpg" /></a></li>
<li><a href="http://www.foxy-press.com/wp-content/inventory_images/fp_ud02m8ir_3.jpg" rel="lightbox[foxypress3]" title="Meridian Café Dining Table"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_ud02m8ir_3.jpg" /></a></li>
<li><a href="http://www.foxy-press.com/wp-content/inventory_images/fp_gjuhpzio0_3.jpg" rel="lightbox[foxypress3]" title="Meridian Café Dining Table"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_gjuhpzio0_3.jpg" /></a></li>
</ul>
</div>
View Sample File (right click save as)
/* controls the row wrapper div surrounding X products you choose per row */
.foxypress_item_row{width:700px;}
/* wraps the item's information and image(s) */
.foxy_item_wrapper_nodetail{}
/* wraps the item's information */
.foxypress_item_content_wrapper_nodetail{float:right;width:250px;}
/* controls the name */
.foxypress_item_name_nodetail{}
/* This controls the price */
.foxypress_item_price_nodetail{}
/* controls all the pricing variations */
span.foxypress_item_regular_price_nodetail{}
span.foxypress_item_original_price_nodetail{}
span.foxypress_item_sale_price_nodetail{color:red;}
/* controls the description */
.foxypress_item_description_nodetail{}
/* wraps the product options */
.foxypress_item_options_nodetail{}
/* wraps the read more button */
.foxypress_item_readmore_nodetail{display:none;}
/* wraps the ship to functionality */
.shipto_container_wrapper_nodetail{}
/* wraps the submit wrapper */
.foxypress_item_submit_wrapper_nodetail{}
/* controls the submit button */
.foxypress_item_submit_nodetail{}
/* wraps the item's image(s) */
.foxypress_item_image_nodetail{float:left;width:430px;}
/* controls the item's main image */
.foxypress_item_image_nodetail img{width:430px;}
/* controls the item's list of additional images */
.foxypress_item_image_thumbs_nodetail{list-style-type:none;margin:0;}
/* controls the list item's */
.foxypress_item_image_thumbs_nodetail li{float:left;margin-top:5px;}
/* controls the list item's images */
.foxypress_item_image_thumbs_nodetail img{width:125px;margin-right:5px;}
/* clear the row */
.foxypress_item_row_clear{clear:both;}
HTML
<div class="foxypress_item_row">
<div class="foxy_item_wrapper_nodetail">
<div class="foxypress_item_content_wrapper_nodetail">
<form action="https://websevenpointo.foxycart.com/cart" method="POST" class="foxycart" accept-charset="utf-8" id="foxypress_form">
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="name" value="Klyne Sofa" />
<input type="hidden" name="code" value="237437" />
<input type="hidden" name="price" value="1199.00" />
<input type="hidden" name="category" value="Furniture" />
<input type="hidden" name="image" value="http://www.foxy-press.com/wp-content/inventory_images/fp_mzor2dt2q_1.jpg" />
<input type="hidden" name="weight" value="2" />
<input type="hidden" name="h:m_id" value="" />
<input type="hidden" name="Downloadable" value="false" />
<input type="hidden" name="quantity_max" value="" />
<input type="hidden" name="Inventory_ID" value="1" />
<input type="hidden" name="discount_quantity_amount" value="" />
<input type="hidden" name="discount_quantity_percentage" value="" />
<input type="hidden" name="discount_price_amount" value="" />
<input type="hidden" name="discount_price_percentage" value="" />
<div class="foxypress_item_name_nodetail">Klyne Sofa</div>
<div class="foxypress_item_price_nodetail">
<span class="foxypress_item_original_price_nodetail" style="text-decoration:line-through;">$1,199.00</span>
<span class="foxypress_item_sale_price_nodetail">$699.99</span>
</div>
<div class="foxypress_item_description_nodetail">
<p>Sofa 80"Wx40"Dx27"H<br />
Our Klyne is a compact sofa whose bold saffron color fills the room with attitude. Narrow tapered arms cut a sleek profile and make for an even roomier experience. The perfect size for apartment and small space living…or use in conversational pairs for larger spaces.
</p>
</div>
<div class="foxypress_item_options_nodetail">
<div class="foxypress_item_options">Color:
<select name="Color" onchange="foxypress_modify_max('foxypress_form', 'green{p-20.00|w-1.00|c:237437G}~4,dolpin{p+5.00|w+2.00|c:237437D}~34,safron{c:237437S}~', this.value, 0);">
<option value="green{p-20.00|w-1.00|c:237437G}">Green -$20.00</option>
<option value="dolpin{p+5.00|w+2.00|c:237437D}">Dolpin +$5.00</option>
<option value="safron{c:237437S}">Safron</option>
</select>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
var maxfieldfoxypress_form = jQuery("#foxypress_form").find('input[name=quantity_max]');
maxfieldfoxypress_form.val(4);
});
</script>
</div>
</div>
<div class="foxypress_item_readmore_nodetail">
<a href="http://www.foxy-press.com/product-detail?id=1">Read More</a>
</div>
<div class="shipto_container_wrapper_nodetail">
<div class="shipto_select" style="display:none">
<label>Ship this item to:</label><br />
(you will be able to input shipping addresses during checkout)<br />
<select name="x:shipto_name_select"></select>
</div>
<div class="shipto_name">
<label>Enter the name of the recipient (or leave it empty to ship it to yourself):</label><br />
<input type="text" name="shipto" value="" />
</div>
</div>
<div class="foxypress_item_submit_wrapper_nodetail">
<input type="submit" value="Add To Cart" class="foxypress_item_submit_nodetail" />
</div>
</form>
</div>
<div class="foxypress_item_image_nodetail">
<img src="http://www.foxy-press.com/wp-content/inventory_images/fp_mzor2dt2q_1.jpg" />
<ul class="foxypress_item_image_thumbs_nodetail">
<li><a href="http://www.foxy-press.com/wp-content/inventory_images/fp_mzor2dt2q_1.jpg" rel="lightbox[foxypress1]" title="Klyne Sofa"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_mzor2dt2q_1.jpg" /></a></li>
<li><a href="http://www.foxy-press.com/wp-content/inventory_images/fp_jxkws70i9a_1.jpg" rel="lightbox[foxypress1]" title="Klyne Sofa"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_jxkws70i9a_1.jpg" /></a></li>
<li><a href="http://www.foxy-press.com/wp-content/inventory_images/fp_qp0ykyyy7e_1.jpg" rel="lightbox[foxypress1]" title="Klyne Sofa"><img src="http://www.foxy-press.com/wp-content/inventory_images/fp_qp0ykyyy7e_1.jpg" /></a></li>
</ul>
</div>
</div>
<div class="foxypress_item_row_clear"> </div>
</div>
View Sample File (right click save as)
This plugin is free and is continually updated/improved as we receive donations and project requests from our FoxyPress community. Please consider funding a project or donating to a tool you can customize....or at least buy us some coffee to keep us up late developing!