{"id":2967,"date":"2014-06-25T04:55:52","date_gmt":"2014-06-25T04:55:52","guid":{"rendered":"http:\/\/www.tipsandtricks-hq.com\/ecommerce\/?p=2967"},"modified":"2023-10-19T12:19:08","modified_gmt":"2023-10-19T01:19:08","slug":"wp-shopping-cart-stacking-multiple-product-boxes-side-by-side","status":"publish","type":"post","link":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-shopping-cart-stacking-multiple-product-boxes-side-by-side-2967","title":{"rendered":"WP Shopping Cart – Stacking Multiple Product Boxes Side by Side"},"content":{"rendered":"

I received the following question today from one user:<\/p>\n

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?<\/span><\/em><\/strong><\/p>\n

In this tutorial I will explain how you can stack the product boxes side by side to display multiple products in one line.<\/p>\n

Preparation<\/h2>\n

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

CSS Tweaks<\/h2>\n

I am going to apply a few custom CSS tweaks to stack the product boxes horizontally.<\/p>\n

Step 1)<\/strong> Grab this custom css plugin<\/a> (it allows you to add your custom CSS code without modifying the main plugin).<\/p>\n

Step 2)<\/strong>\u00a0Lets make the product boxes narrower so there is more room to have multiple boxes side by side.<\/p>\n

Add the following block of CSS code in the custom CSS plugin’s interface to define a maximum width of 250px for the boxes.<\/p>\n

.wp_cart_product_display_box{\nmax-width: 250px;\n}<\/pre>\n
You can use a different value if you want to make it narrower.<\/p>\n
Step 3)<\/strong> Lets float the product boxes so they stack. Add the following CSS code just below the max-width that you defined in step 2:<\/p>\n
float: left;\n<\/pre>\n
You should have the following combined CSS code and the boxes should be stacked side by side now:<\/p>\n
.wp_cart_product_display_box{\nmax-width: 250px;\nfloat: left;\n}<\/pre>\n
Step 4)<\/strong> Finally, lets give it some margin to add some space between the boxes.<\/p>\n
Add the following CSS code just below what you defined in step 3:<\/p>\n
margin-right: 10px;\n<\/pre>\n
You should have the following combined CSS which is the final code<\/p>\n
.wp_cart_product_display_box{\nmax-width: 250px;\nfloat: left;\nmargin-right: 10px;\n}<\/pre>\n
The Final Output<\/h2>\n
The final output should look like the following example (your product boxes will be aligned horizontally):<\/p>\n
\"shopping-cart-grid-product-boxes-example\"<\/p>\n
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<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[30],"tags":[173,172,150,56,32],"class_list":{"0":"post-2967","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-wordpress-shopping-cart","7":"tag-e-commerce","8":"tag-grid-layout","9":"tag-product-box","10":"tag-product-display","11":"tag-wp-shopping-cart","12":"entry"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts\/2967"}],"collection":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/comments?post=2967"}],"version-history":[{"count":0,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts\/2967\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/media?parent=2967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/categories?post=2967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/tags?post=2967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}