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”. 
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”.
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.