- Posts: 301
- Thank you received: 1
Help with Product page layouts
Have attached an image of the product page currently on my site (Mockup). I am having trouble finding where things are in views to manipulate the layout. A couple of things.
I want to basically make the Hika layout look like that shown in Mockup2 image (which is prestashop)
How do I make the Main product image larger (the thumbnails below are ok)?
It looks like that if things aren't being used such as vote, or dimensions - it is leaving blank space where they are normally located - you can see the spacing. Not sure how to stop this.
How do I get the intro text (before the readmore in my product description) to sit on the right hand side where the price and characteristic currently is.
My order would be
Product Description
Characteristics
Quantity
Price
Add to Cart
Much the same as the Mockup2 image,
I want to add the word quantity in front of the text box as well - not sure which view
Hopefully this makes sense
Thanks
Please Log in or Create an account to join the conversation.
The bit below :
<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>
Is currently located in <div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part"> move it to just under <div id="hikashop_product_right_part" class="hikashop_product_right_part">.
Please Log in or Create an account to join the conversation.
I might be doing something wrong though
Please Log in or Create an account to join the conversation.
<?php
echo preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->row->product_description);
?>
stripped from the listing products, please be aware if you have any code such as tabs etc above the intro text that comes across as well, so you have to format it right
Please Log in or Create an account to join the conversation.
Please Log in or Create an account to join the conversation.
If you have a link can poke it to check
Please Log in or Create an account to join the conversation.
There is another problem - somewhere along the line all the categories showing in a module, related items, featured items, have all of a sudden gone vertical - cannot for the life of me think why. Haven't made any changes in the modules. Might have done something in the CSS though - accidently deleted something. Boxes are showing around them which is fine, but the rounded corners have disappeared.
www.ecomad.com.au/ecomadBamboo/eco-shop.html
Please Log in or Create an account to join the conversation.
<div class="hikashop_category_image" style="height: 80px; text-align: center; clear: both;">
that will make it do that. go into config->display->Css-> front end css
maybe you were thinking of a float: left; instead ?
Please Log in or Create an account to join the conversation.
Even restoring the CSS to original doens't help.
Totally lost now as to what is causing it to all go vertical
Please Log in or Create an account to join the conversation.
As sefs are on cant quite see whats happening with links, but more than likely its one of the above, but here if need help.
Please Log in or Create an account to join the conversation.
Thanks for your help.
Would you know where the code is located that holds the table with the quantity and the plus and minus signs to increase/decrease product stock, and the Add to cart buttong on the product page? Can't find it in the views anywhere - thought it might be the view product quantity but can't see it in there. I need to style this particular table only. You can see here under the price www.ecomad.com.au/ecomadBamboo/shop-cate.../product/cid-32.html
Cheers
Please Log in or Create an account to join the conversation.
Note that we recommend that you use a template override to change that instead of modifying that file directly:
www.hikashop.com/en/support/documentatio...tation.html#override
Please Log in or Create an account to join the conversation.
All I want to do is amend styling. It would be good if each of the separate sections like the product page price and the module cart price for instance have their own CSS ID - as I have found it hard to change one thing without it changing another using CSS. The table in the product page which I want to change doesn't have a CSS ID or CLASS assigned and any changes I make to a table affect tables everywhere. This would make it simple to change styling of elements. But I might be missing something
The only other thing I wanted to do with this section is add the word Quantity in front of the Quantity text box. And it would be nice if it had similar look to the checkout where you get the refresh graphic. Will keep tinkering to see if I can do it
Thanks
Please Log in or Create an account to join the conversation.
Please explain what "table" you want to change, a link to the page on your website and I'll tell you the CSS you can use.
Please Log in or Create an account to join the conversation.
The page is here: www.ecomad.com.au/ecomadBamboo/shop-cate.../product/cid-32.html
I am trying to move the section where it has quantity, the plus and minus, and Add to Cart to the right. Also there is too much space between the + and - signs. And I want to add the word quantity in front of the text box. When I look at the source code of my page the table itself has no id or class.
<span class="hikashop_product_stock_count"></span>
<table>
<tr>
<td rowspan="2">
So I am not sure how to do this.
Thanks for your help.
EDIT: Have managed to right align that table but I can't seem to make the table padding smaller. Still having trouble with a few other styles like setting a height for the table and manipulating the padding / margins for the table.
Please Log in or Create an account to join the conversation.
.hikashop_product_stock_count table{
//your css
}
and that will apply CSS to that table.
Please Log in or Create an account to join the conversation.
- Posts: 12
- Thank you received: 0
ok this will do the job then :
<?php
echo preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->row->product_description);
?>
stripped from the listing products, please be aware if you have any code such as tabs etc above the intro text that comes across as well, so you have to format it right
Hi first of all, thanks for this thread Huski and rikatos. I have followed the steps and I manage to make the product description to appear on the right part. However, it puts everything in there including tabs where I actually want only the description before the tab. I have tried to fix it for some time but to no avail. Huski, you managed to fix it, what exactly did you do?
Please see the screenshots attached. Mockup is as-is and Mockup2 is to-be.
Many thanks in advance guys.
Please Log in or Create an account to join the conversation.
www.glcportal.co.uk/leisure/product/560-kru-xs-iso.html
Just that I have removed pricing:)
Please Log in or Create an account to join the conversation.
- Posts: 12
- Thank you received: 0
Please Log in or Create an account to join the conversation.
This allows you to edit the override file (ie if you mess it up you just get rid of your override and all returns to default).
I will pop across (attached) my show.php file so you can paste over and see if it fits your needs. Naturally I recommend doing on a test site not a live one !
Please Log in or Create an account to join the conversation.