How can I make products look like this

-- url of the page with the problem -- : mywebsite.com/mypage
-- HikaShop version -- : 2.3.0
-- Joomla version -- : 2.58
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : Chrome
-- Error-message(debug-mod must be tuned on) -- : Error_message

I'd like to make my product description display on the SIDE of the product...
AND I'd like to move the product price and add to cart button up under the product image.

Here's how it currently looks

Hi,
The solution will be to use some CSS code, and to edit the "Show_default" file of the "product" view of your front-end template through "Hikashop->DIsplay->Views" and move the code :

  <div id="hikashop_product_description_main" class="hikashop_product_description_main">
    <?php
    //DISPLAY the product description
    echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
    ?>
  </div>

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">

Thank you....I did it...and it's not working.

Here's what it looks like in my code. the underlined part is the part I copied and moved to right under the line you told me to. Yet in my site, the info is still under the image.

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">

//---------
<div id="hikashop_product_description_main" class="hikashop_product_description_main">
    <?php
    echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
    ?>
  </div>
//----------

  <?php
  if(!empty($this->element->extraData->rightBegin))
    echo implode("\r\n",$this->element->extraData->rightBegin);
  ?>
    
  <div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
    <?php
    $config =& hikashop_config();
    if($this->params->get('show_vote_product') == '-1'){
      $this->params->set('show_vote_product',$config->get('show_vote_product'));
    }
    if($this->params->get('show_vote_product')){
      $js = '';
      $this->params->set('vote_type','product');
      if(isset($this->element->main)){
        $product_id = $this->element->main->product_id;
      }else{
        $product_id = $this->element->product_id;
      }
      $this->params->set('vote_ref_id',$product_id);
      echo hikashop_getLayout('vote', 'mini', $this->params, $js);
    }
    ?>
  </div>

Hi,

I think that you will have to set a width on the left and right part, you can set for example 45%.

.hikashop_product_left_part{ width: 45%; }
.hikashop_product_right_part{ width: 45%; }

Thank you...do I put that {width} par tin THIS code.... or do I have to go to the Front-end css file?

It's better to go to the Front-end css file.

Thank you Xavier

So.... I went into the front-end css and put the {width 45} in

@xavier
This post is relative to layout for hikashop component . does all the layout ll be documented or does all users with css problem ll have to go to the css code file ( browser debug) or BackEnd Web GUI ( setting layout ) to find by themselves the way to resolve the problem ?
i think with the great suport this forum has , people ( i have ) ll learn more on joomla and css than the official joomla forum ....


@simmiepam
a direct link to the page instead the main page ll be usefull . It take time to study css (some mpeople ll say debug ) ..........
I think the problem must come from the layout see how behave the box each other !
Seem that this link goes to publicity web page ?
regard's

OK...

I've managed to get the description moved to the right of the image.

However....I cannot seem to get the text to be the rest of the width of the page.

I've been using inspect element to try to find it, but I guess I'm not too good at this yet.

Is the place to make the margin for the description in the front-end .css
or in one of the views under display?

Hello,
Can you give us a link to your website so that we can directly test it ?
Thanks.

www.bestedernewsletters.com/cart/index.p...tegory/13-post-cards

Using this kind of CSS code will probably do the job :

.hikashop_product_item_right_part .hikashop_product_desc {
width: 560px;
}

@simmiepan
refer to what you want the #hikashop_category_information_module_114 div.hikashop_container position the text to center !!

regard's