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: June 7, 2021

Latest News: Updated the documentation.

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

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

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

Step 1-b ) 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

Step 1-c ) 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

Step 1-d ) 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.

WordPress eStore Plugin Tutorial List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 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)

7 + 3 =