May 292014
 

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

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.

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

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.

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

Change Height

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.

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

Control Description

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.

wp-estore-custom-shopping-cart-grid-display-description-height
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.

Enjoy.

Go Back To WordPress eStore Tutorial List:

Manuel 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)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.