How to style the products table in WP E-Commerce

This article is related to WP E-Commerce shop styling plugin so if you have not installed the plugin you should do this before continuing here.

Add/Remove columns in products table

In the WordPress backend you can customize the columns you want to display in the table. Go to settings->Shop styling and select the tab “products table”. You’ll see a list of 10 columns but you may not need all of them. For each column you want to use you can select a title and a field for the content. If you don’t want to show a column, just set the field to “hide column”. products table in wpec shop styling

The download link column

The download link is a special column: You can define the position, but the shop styling knows itself whether to show the button or not.

  • If there is no digital product in the order, the column will always be hidden
  • If there is a downloadable product in the order the button will only show up if the payment was already accepted
  • In the PDF invoice the button will never show up, so be sure you also show the products table in the email.

 

The products table HTML Code

This is an example of the productstable with the same settings you see in the screenshot above:

# Product Quantity Price single Tax % Tax Price
1 dummy product 1 2 €14.40 20.00 €4.80 €28.80

and here’s the according HTML code:

<table id="products-table">
<tbody>
<tr>
<th class="item_number">#</th>
<th class="product_name">Product</th>
<th class="product_quantity">Quantity</th>
<th class="product_price">Price single</th>
<th class="product_gst">Tax %</th>
<th class="product_tax_charged">Tax</th>
<th class="price_sum">Price</th>
</tr>
<tr>
<td class="item_number">1</td>
<td class="product_name">dummy product 1</td>
<td class="product_quantity">2</td>
<td class="product_price"><span class="pricedisplay">€14.40</span></td>
<td class="product_gst">20.00</td>
<td class="product_tax_charged">€4.80</td>
<td class="price_sum"><span class="pricedisplay">€28.80</span></td>
</tr>
</tbody>
</table>

This code will be used in three different contexts: Your emails The transaction results The PDF invoice The HTML code will be the same everywhere you display the products table (except the download button) but the tables may still look different, because you can apply individual css styles to each context.

The CSS styling

Every single column and every column title can be styled with an individual selector. Have a look at the HTML code above and you’ll see the classes. To align the price column right for example you can use this CSS:

#products-table .product_price {
  text-align:right;
}

To set a grey background for all headline write the following CSS:

#products-table th {
  background-color:#aaaaaa;
}

If you’re familiar with CSS the rest is pretty easy. If not you may have a look at w3schools.com But the main question is: “Where do I write the CSS code?”

CSS code for emails

To apply the CSS code to the products table in your emails go to settings->shop styling in your WordPress backend and open the tab email Template Search for “#products-table” in the existing code and customize or replace this part of the CSS rules. If you use a custom mail template you may not find the #products-table definitions. Just add your CSS code somewhere before the closingtag.

CSS code for transaction results

The transaction results page is part of your theme so it has to be styled in the CSS files of your wordpress theme. In most cases you can just add your custom definitions to the end of wp-content/themes//style.css

CSS code for PDF invoice

To customize the table style of your invoice go to the Invoice CSS tab of your shop styling configuration and modify or replace the #products-table part.This article is related to WP E-Commerce shop styling plugin so if you have not installed the plugin you should do this before continuing here.

Add/Remove columns in products table

In the WordPress backend you can customize the columns you want to display in the table. Go to settings->Shop styling and select the tab “products table”. You’ll see a list of 10 columns but you may not need all of them. For each column you want to use you can select a title and a field for the content. If you don’t want to show a column, just set the field to “hide column”.   products table in wpec shop styling

The download link column

The download link is a special column: You can define the position, but the shop styling knows itself whether to show the button or not.

  • If there is no digital product in the order, the column will always be hidden
  • If there is a downloadable product in the order the button will only show up if the payment was already accepted
  • In the PDF invoice the button will never show up, so be sure you also show the products table in the email.

 

The products table HTML Code

This is an example of the productstable with the same settings you see in the screenshot above:

# Product Quantity Price single Tax % Tax Price
1 dummy product 1 2 €14.40 20.00 €4.80 €28.80

and here’s the according HTML code:

<table id="products-table">
<tbody>
<tr>
<th class="item_number">#</th>
<th class="product_name">Product</th>
<th class="product_quantity">Quantity</th>
<th class="product_price">Price single</th>
<th class="product_gst">Tax %</th>
<th class="product_tax_charged">Tax</th>
<th class="price_sum">Price</th>
</tr>
<tr>
<td class="item_number">1</td>
<td class="product_name">dummy product 1</td>
<td class="product_quantity">2</td>
<td class="product_price"><span class="pricedisplay">€14.40</span></td>
<td class="product_gst">20.00</td>
<td class="product_tax_charged">€4.80</td>
<td class="price_sum"><span class="pricedisplay">€28.80</span></td>
</tr>
</tbody>
</table>

This code will be used in three different contexts: Your emails The transaction results The PDF invoice The HTML code will be the same everywhere you display the products table (except the download button) but the tables may still look different, because you can apply individual css styles to each context.

The CSS styling

Every single column and every column title can be styled with an individual selector. Have a look at the HTML code above and you’ll see the classes. To align the price column right for example you can use this CSS:

#products-table .product_price {
  text-align:right;
}

To set a grey background for all headline write the following CSS:

#products-table th {
  background-color:#aaaaaa;
}

If you’re familiar with CSS the rest is pretty easy. If not you may have a look at w3schools.com But the main question is: “Where do I write the CSS code?”

CSS code for emails

To apply the CSS code to the products table in your emails go to settings->shop styling in your WordPress backend and open the tab email Template Search for “#products-table” in the existing code and customize or replace this part of the CSS rules. If you use a custom mail template you may not find the #products-table definitions. Just add your CSS code somewhere before the closingtag.

CSS code for transaction results

The transaction results page is part of your theme so it has to be styled in the CSS files of your wordpress theme. In most cases you can just add your custom definitions to the end of wp-content/themes//style.css

CSS code for PDF invoice

To customize the table style of your invoice go to the Invoice CSS tab of your shop styling configuration and modify or replace the #products-table part.