Related Product Styling

[ninad_jad]

hi,
i need to modify look of related product, and add add tp cart button in that,

i have searched a lot but i didn't find where exactly the code of related product placed
can someone help to find the location of code of Related product

i got only <span class="product-field-display"><?php echo $field->display ?></span>   in productdetails page

eagerly waiting for solution ..

[PRO]

thats what prints out the field.

So you want to add an add to cart button?

[ninad_jad]

yeh i need to add the "add to cart" button and i would like to change its display,
currently my related products displayed very unprofessional (* screen shot attached ) i need to put product title on top of image



[attachment cleanup by admin]

[PRO]

I dont know about adding the cart button , but you can get it looking better with css.

It is hard because the picture and text is all 1 span etc.



[attachment cleanup by admin]

[JtouchMobile.com]

Here you are:

/components/com_virtuemart/view/productdetails/tmpl/default.php

Search for those code:

if (!empty($this->product->customfieldsRelatedProducts)) { ?>
      <div class="product-related-products">
      <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>

      <?php
      foreach ($this->product->customfieldsRelatedProducts as $field){
         ?><div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field_type ?>">
         <span class="product-field-display"><?php echo $field->display ?></span>
         <span class="product-field-desc"><?php echo jText::_($field->custom_field_desc) ?></span>
         </div>
         <?php
      } ?>
      </div>
      <?php
   } // Product customfieldsRelatedProducts END

[ninad_jad]

Thnx Gr8, i have solved my problem by modifying little css and little code.

to solve the problem in css you need to add override img in main related product class and put your formatting style..

[b.nalta]

Hi everyone,
I have the same problem :
I would like to add css classes in this code :
<a title="___" href="___">
    <img alt="___" src="____">
    table test
</a>

that is generated with <?php  echo $field->display ?> in

/components/com_virtuemart/view/productdetails/tmpl/default.php

if (!empty($this->product->customfieldsRelatedProducts)) { ?>
      <div class="product-related-products">
      <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>

      <?php
      foreach ($this->product->customfieldsRelatedProducts as $field){
         ?><div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field_type ?>">
         <span class="product-field-display"><?php echo $field->display ?></span>
         <span class="product-field-desc"><?php echo jText::_($field->custom_field_desc) ?></span>
         </div>
         <?php
      } ?>
      </div>
      <?php
   } // Product customfieldsRelatedProducts END



any ideas ?

[PRO]

you can strip and replace

<?php $field->display = str_replace( 'this', 'with-this', $field->display ); ?><?php echo $field->display ?>

[solantis]

Thnx Gr8, i have solved my problem by modifying little css and little code.

to solve the problem in css you need to add override img in main related product class and put your formatting style..

Please show me an example of the CSS

[PRO]

Guys I use this code to "clear" the image and the text going below always

It adds  break after the image, so the "product name"  does not float left
    <?php
    foreach ($this->product->customfieldsRelatedProducts as $field) {
   ?><div class="width25">
          <div class="border spacer center"><?php $field->display = str_replace( '"  />', '"  /><br/>', $field->display ); ?><?php echo $field->display; ?></div>
      </div>
   <?php } ?>
        </div>

[solantis]

Guys I use this code to "clear" the image and the text going below always

It adds  break after the image, so the "product name"  does not float left
    <?php
    foreach ($this->product->customfieldsRelatedProducts as $field) {
   ?><div class="width25">
          <div class="border spacer center"><?php $field->display = str_replace( '"  />', '"  /><br/>', $field->display ); ?><?php echo $field->display; ?></div>
      </div>
   <?php } ?>
        </div>

Thank BanquetTables.pro it work! Coupled with that i insert the following into my css file:

.width25{float: left;width: 25%;}
.spacer2{margin:1px;padding:2px}
.center2{text-align:center}
.border2{border:1px solid #ccc;-moz-border-radius:6px;border-radius:6px}

[baggiesmad]

is it possible to add styling to the product title just on the 'related products' template?

[PRO]

is it possible to add styling to the product title just on the 'related products' template?

what do you mean?