Swap Images via Mouseover or Click Add-on: how to add CSS Style?

[vojager]

thanks a lot. Still one change: I want to move Products Description section below the Additional Product Images section(right after it). How to accomplish this correctly?

[gjh42]

You already have that. If you want the add to cart above the description, move its code block up in the file also, either just before or just after the additional images, whichever you want.

[vojager]

I edited tpl_product_info_display.php template in
/includes/templates/template_default/templates/tpl_product_info_display.php

I moved Additional Product Images section to the top, and placed it right after the 'free ship icon' section:

....
<!--eof free ship icon  -->

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
<br class="clearBoth" />

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->

I added <br class="clearBoth" /> after the end of Additional Product Images section, since Product description text wrapped around images without it. Is this correct way?

I did not added <br class="clearBoth" /> after 'free ship icon' section: is this correct also?

[gjh42]

What's correct is what works (as long as you don't create PHP or HTML errors in the process). If it is working well for you, that is all you need to do.

You could have done without the added
<br class="clearBoth" />
and just added to your stylesheet
#productDescription {clear: both;}

Either way works.

[vojager]

in default template after the 'Main Product Image' section goes 3 sections, 'Product Name', 'Product Price', 'free ship icon'. Does these 3 sections ('Product Name' ->'Product Price' ->'free ship icon') always will be displayed in one row, at the right side, irrespective of sections that will be located below them?

[gjh42]

You can change their location a bit with style rules in the stylesheet, or move them in the file if you want them in a different part of the page.

[vojager]

You can change their location a bit with style rules in the stylesheet, or move them in the file if you want them in a different part of the page.

The currect location is OK. I just wanna make sure that these elements will always stay on the same positions/will not break #productGeneral layout after I placed 'Additional Product Images' right after the 'free ship icon' section. (I didn't want place 'Additional Product Images' just after the 'Main Product Image'section, as this moves Product Name and Price downwards, under the Additional Product Images).