WP eStore Custom Shopping Cart Grid Display

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:

• WordPress eStore (Note: This is an affiliated link = I get a small commission if you make a purchase.)
• Extra Shortcode addon

WP eStore Custom Shopping Cart Grid Display Steps

• WP eStore Custom Shopping Cart Grid Display
• WP eStore Shopping Cart Custom CSS

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

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

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.

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)

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)

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]

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.

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.

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:

• WP eStore Plugin Complete Online Selling Solution