Moving Additional Pictures

[sofasurfer]

It is edited as requested.
Now my discription and images are moved as they were before.
In post #29 when I had no results, I just found out why. I had placed the file into CUSTOM_TEMPLATE. Now however, I have placed it into CUSTOM_TEMPLATE/ templates and things are better.

[rbarbour]

My goal is to have the images grouped closer as they now are and I would like to get the attributes and the "add to cart" button either to the right of the main image or somewhere close, where ever there is room.

find:

<!--bof Product details list  -->
CONTENTS WITHIN
<!--eof Product details list -->

and:

<!--bof Attributes Module -->
CONTENTS WITHIN
<!--eof Attributes Module -->

move above:

<!--bof Add to Cart Box -->
CONTENTS WITHIN
<!--eof Add to Cart Box-->

Then comes the CSS changes:

[sofasurfer]

All done.
I did not notice any difference after this edit, just in case that is important.

[rbarbour]

All done.
I did not notice any difference after this edit, just in case that is important.

Did you look at a product with attributes?

[sofasurfer]

Yes. http://early1900photos.com/index.php...&products_id=5

[valansi]

I am almost there!

Sounds good, Just post on here or PM me.. thanks, you are a good man, or women, lol.

[rbarbour]

sofasurfer

In ADMIN > CONFIGURATION > IMAGES

find:
Product Info - Number of Additional Images per Row

set value to (2)

find:

<!--bof Main Product Image -->
CONTENTS WITHIN
<!--eof Main Product Image-->

<!--bof Additional Product Images -->
CONTENTS WITHIN
<!--eof Additional Product Images -->

Change to this:

<div class="productInfoImageWrapper">
<!--bof Main Product Image -->
CONTENTS WITHIN
<!--eof Main Product Image-->

<!--bof Additional Product Images -->
CONTENTS WITHIN
<!--eof Additional Product Images -->
</div>

now find all sections:

<!--bof Product Name-->
CONTENTS WITHIN
<!--eof Product Name-->

<!--bof Product Price block -->
CONTENTS WITHIN
<!--eof Product Price block -->

<!--bof free ship icon  -->
CONTENTS WITHIN
<!--eof free ship icon  -->

<!--bof Product details list  -->
CONTENTS WITHIN
<!--eof Product details list -->

<!--bof Attributes Module -->
CONTENTS WITHIN
<!--eof Attributes Module -->

<!--bof Add to Cart Box -->
CONTENTS WITHIN
<!--eof Add to Cart Box-->

<!--bof Quantity Discounts table -->
CONTENTS WITHIN
<!--eof Quantity Discounts table -->

re-arrange like this & add div & br:

<div class="productInfoImageWrapper">
<!--bof Product Name-->
CONTENTS WITHIN
<!--eof Product Name-->

<!--bof Product Price block -->
CONTENTS WITHIN
<!--eof Product Price block -->

<!--bof Quantity Discounts table -->
CONTENTS WITHIN
<!--eof Quantity Discounts table -->

<!--bof free ship icon  -->
CONTENTS WITHIN
<!--eof free ship icon  -->

<!--bof Product details list  -->
CONTENTS WITHIN
<!--eof Product details list -->

<!--bof Attributes Module -->
CONTENTS WITHIN
<!--eof Attributes Module -->

<!--bof Add to Cart Box -->
CONTENTS WITHIN
<!--eof Add to Cart Box-->
</div>
<br class="clearBoth" />

then in your stylesheet add:

.productInfoImageWrapper {
float:left;
width:50% !important;
}

.productInfoInfoWrapper {
float:right;
width:50% !important;
}

#productMainImage {
width:100% !important;
}

then find:

#cartAdd {
CONTENTS WITHIN
}

and remove:

float:left;

Here is a screenshot - good luck

Attachment 9219