WP eStore Shopping Cart Custom CSS shows you how to customize your grid layout to look better in your website using different css class.
Last Updated: December 24, 2017
Latest News: I have updated the information.
When you use grid layout for your products, the layout might not look the way you would like it to appear on your website. There are many factors that involve the layout of your items in a grid display even if you use a different fancy layout. One of them is the theme you use the other is the overall page or the wrapper width. This tutorial will guide you and help you to customize your layout using some very simple techniques.
Note: These are simple basic changes. There are more changes you can carry out from the information displayed below in the images. Remember CSS is very flexible and powerful.
What You Might Need:
- WordPress Custom CSS Plugin (Optional = Some themes have an option for you to add custom code in the theme admin panel. I use Suffusion which has this option).
WP eStore Shopping Cart Basic Custom CSS Steps
- WP eStore Custom Shopping Cart Grid Display
- WP eStore Shopping Cart Custom CSS
To find out what needs to be altered in CSS, I use Firebug addon in Firefox. You can also use the option to Inspect the element by right clicking on the area of the website you wish to inspect.
Step 1 ) Previously we created the following shopping cart grid display using fancy 5 display. See image below.
Step 2 ) The following image allows you to control the height and width of the overall layout of the product in the grid. Currently the height is set to 270px and the width is set to 222px. You can change the height and width to display the products correctly on your website.
Note: If you have 3 images displayed horizontally like the above example, increase the width will expand all the images across. So make sure that you don’t increase the width by too much or else it will push the third image to the next line. Keep checking your settings while you are adjusting the CSS width.
For this customization you need to alter the following class .eStore-fancy5.
Step 3 ) The following image allows you to change the height of the thumbnail image. In this example I have set it up to 230px which is higher than the above image. I have done this so you can see the difference.
For this customization you need to alter the following class .eStore-fancy5-thumb and the img id.
Step 4 ) The following image allows you to control the description box. For this example the description box is set to 225px in height so it will display the whole product description. I added more information in the description for this product so you could see the difference.
For this customization you need to alter the following class .eStore-fancy5-description.
I hope the above helps you to create your custom products display.
Click on the following URL Troubleshooting to find some solutions to the most common errors and issues.
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.
Go Back To WordPress eStore Tutorial List: