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.
WordPress eStore Plugin Tutorial List: