Change table layout to have a design

Hello,

Can someone let me know how I can change the Table layout for my product pages to include borders around each row and alternating colors for each row to help make it easier on the eye?

here is the product page in question:
www.pssgpcshop.com/index.php/hikashop/category/110-gram-columns

Thank you!

Hi there,

You have to edit the view corresponding in Display>Views. The file you are looking for is listing_table for product.
You then have to add some css and php. I would suggest to add a php var like:

$count=0;
foreach($this->rows as $row){
$count++;

I apologize, I am a novice at coding CSS and PHP.

Would it be possible for you to spell out exactly what I need?

Thank you in advance!

Ok,

One of the solution can be to :
- Edit the "Listing_table" file of your "product" view of your front-end template through "Hikashop->Display->Views".
- Change this line :

foreach($this->rows as $row){

$count = 0;
        foreach($this->rows as $row){
        $count++;
        if($count%2){
           $rowId = 'pair';
        }else{
           $rowId = 'odd';
        }

$link = hikashop_completeLink('product&task=show&cid='.$this->row->product_id.'&name='.$this->row->alias.$this->itemid.$this->category_pathway); ?>
        <tr>

$link = hikashop_completeLink('product&task=show&cid='.$this->row->product_id.'&name='.$this->row->alias.$this->itemid.$this->category_pathway); ?>
        <tr id="<?php echo $rowId; ?>">

#pair td {
border-color: blue !important;
}

Looks like we are making progress but isn't quite right:

www.pssgpcshop.com/index.php?option=com_...t=listing&Itemid=624

Attached is a copy of the php code i am using.

Hi,

You don't see the top border because of the following property:

.table {
border-collapse: collapse;
}

Thanks to change "collapse" to another property.

I searched in the php and css and do not see this code as you typed it. Where should I look for it?

Thank you for that clarification.

Is there any way to alternate the colors of the rows without affecting all tables in the shopping cart?

My product pages look nice now:

www.pssgpcshop.com/index.php/hikashop/category/110-gram-columns

But pages where tables make up the content (check out screen) are all wacky:
www.pssgpcshop.com/index.php/hikashop/checkout

Is there a way to change the colors without affecting the checkout screen and any other, non-product pages?

Hi,

Yes, you can precede the css properties with the class "hikashop_products_listing" like:

.hikashop_products_listing table{border-collapse: separate;}