May 272014
 

WP eStore Custom Shopping Cart Grid Display shows you how to display a custom shopping cart using all items for a category in a grid like style.

Last Updated: May 31, 2017

Latest News: I have removed the menu and added a footer link to the menu.

What You Need:

WP eStore Custom Shopping Cart Grid Display Steps

What you will achieve. 

  • Create a Grid Display of the products in a category .
  • Clicking on a product it will take you to a landing or product page.
  • In the landing or product page you can have either option, a Buy Now button or an Add To Cart button.

Step 1 ) Go to WP eStore -> Add/Edit Products and create your new products. See image below.

  • For this tutorial I created three twitter products

wp-estore-custom-shopping-cart-grid-display-product

The following image allows you to add Product Description and a product Thumbnail Image URL.

wp-estore-custom-shopping-cart-grid-display-description

The following image allows you to Add a Category if you don’t already have one.

For this tutorial I created a Twitter category.

wp-estore-custom-shopping-cart-grid-display-add-category

The following image shows you the category twitter created above checked and the custom Button Image “Read more” URL added .

(Your image might be different depending on your products and destination URL)

wp-estore-custom-shopping-cart-grid-display-button-image

The following image allows you to click on Save Product button or Delete Product link. (Remember to save your product once you have completed the setup)

wp-estore-custom-shopping-cart-grid-display-save-product

Step 2 ) We are going to add the following shortcode to a post or page to display our shopping cart. See image below.

  • id = 1 this is the category id number.
  • show_price = 0 this will stop the price from showing on the item.
  • style = 5 this is the template we are using.

The following URL Stylish Product Display Options For WP eStore has more templates for you to choose.

[ wp_eStore_category_products_fancy id=2 show_price=0 style=5]

wp-estore-custom-shopping-cart-grid-display-shortcode

Step 3 ) The following image shows you the final results. Now you have your products displayed in a grid format using the above settings. You have your product image displayed, the title is displayed, the description is displayed and a custom button “Read more”

Note: The Read more button will take you to the landing or product page.

wp-estore-custom-shopping-cart-grid-display-grid-display

Step 4 ) In your landing or product page you will add the custom Buy Now button or Add To Cart button. See image below.

Notice: I have added a <div align=”center”>[shortcode goes here]</div> HTML container tag. This will align the image in the center of the landing or product page.

Remember: Your id number might be different. This is the product id number and is unique to each product.

wp-estore-custom-shopping-cart-grid-display-custom-button
I hope the above helps you to create your custom products grid display.

You have completed Part 1 WP eStore Custom Shopping Cart Grid Display. Click on the following URL WP eStore Shopping Cart Custom CSS to complete the second part.

Click on the following URL Troubleshooting to continue.

I will be updating this post from time to time. So keep coming back for more. If you have any questions please let me know.

Enjoy.

Go Back To WordPress eStore Tutorial List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)