How to Move Accessories Tab just under the product image on the product page?

[adamthomson123]

Hi,

I want to move the accessories tab just under the product image on product page. it is currently under the Data Sheet Table and customer cannot see the accessories sometimes. i want to move it up from data sheet and under the product image on product page. Screenshot is attached and can be viewed on product page live aswell. Please Need Help.Thanks

Edited June 21, 2015 by adamthomson123 (see edit history)

[NemoPS]

Open product.tpl in the theme's folder, locate this 

 

 

{if isset($accessories) && $accessories}

<!--Accessories -->

<section class="page-product-box">

 

 

And all it contains till the closing {/if}
Cut it from there and paste it before

</div>

<!-- end center infos-->

[x-sat.no]

Hi Memo1, thanks for your replay first of all.

i did exactly as you write, but my accessories did not moved under the product image.

is there any thing else one needs to edit to achieve this ?? any other file that must be edited for the accessories to be shown under the product image ?

 

 

 

Open product.tpl in the theme's folder, locate this 

 

 

{if isset($accessories) && $accessories}

<!--Accessories -->

<section class="page-product-box">

 

 

And all it contains till the closing {/if}
Cut it from there and paste it before

</div>

<!-- end center infos-->

 

[MosheDan9]

I did the same and had the same results. Nothing. i think the solution may lie in editing the .css file, but i'm not sure how to do this.

 

help?

[Ugo Fontana]

NEMO is as usual perfect and simple in his solutions.

 

I made a little modify to let it work, but with his tips it was really easy:

 

i CUT

{if isset($accessories) && $accessories}
			<!--Accessories -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Accessories'}</h3>
				<div class="block products_block accessories-block clearfix">
					<div class="block_content">
						<ul id="bxslider" class="bxslider clearfix">
							{foreach from=$accessories item=accessory name=accessories_list}
								{if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) && $accessory.available_for_order && !isset($restricted_country_mode)}
									{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
									<li class="item product-box ajax_block_product{if $smarty.foreach.accessories_list.first} first_item{elseif $smarty.foreach.accessories_list.last} last_item{else} item{/if} product_accessories_description">
										<div class="product_desc">
											<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{$accessory.legend|escape:'html':'UTF-8'}" class="product-image product_image">
												<img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
											</a>
											<div class="block_description">
												<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{l s='More'}" class="product_description">
													{$accessory.description_short|strip_tags|truncate:25:'...'}
												</a>
											</div>
										</div>
										<div class="s_title_block">
											<h5 itemprop="name" class="product-name">
												<a href="{$accessoryLink|escape:'html':'UTF-8'}">
													{$accessory.name|truncate:20:'...':true|escape:'html':'UTF-8'}
												</a>
											</h5>
											{if $accessory.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
											<span class="price">
												{if $priceDisplay != 1}
												{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}
												{/if}
											</span>
											{/if}
										</div>
										<div class="clearfix" style="margin-top:5px">
											{if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
												<div class="no-print">
													<a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html':'UTF-8'}" data-id-product="{$accessory.id_product|intval}" title="{l s='Add to cart'}">
														<span>{l s='Add to cart'}</span>
													</a>
												</div>
											{/if}
										</div>
									</li>
								{/if}
							{/foreach}
						</ul>
					</div>
				</div>
			</section>
			<!--end Accessories -->
		{/if}

as NEMO said...

 

and past it right here:

{if isset($images) && count($images) > 1}
				<p class="resetimg clear no-print">
					<span id="wrapResetImages" style="display: none;">
						<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" data-id="resetImages">
							<i class="icon-repeat"></i>
							{l s='Display all pictures'}
						</a>
					</span>

PAST HERE




{/if}
		</div> <!-- end pb-left-column -->
		<!-- end left infos-->
		<!-- center infos -->

And everything works

Edited June 22, 2016 by Ugo Fontana (see edit history)

[Craft13]

Hi

 

I followed both Nemo and Udo instructions, and it worked but I had to do something really wrong as the it doesnt stretch on the whole page's width - just shows as a cut "box".

 

I am not a programmer but please see by yourself, what did I do wrong in the code? 

			<!--Accessories -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='YOU MIGHT ALSO LIKE'}</h3>
				<div class="block products_block accessories-block clearfix">
					<div class="block_content">
						<ul id="bxslider" class="bxslider clearfix">
							{foreach from=$accessories item=accessory name=accessories_list}
								{if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) && $accessory.available_for_order && !isset($restricted_country_mode)}
									{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
									<li class="item product-box ajax_block_product{if $smarty.foreach.accessories_list.first} first_item{elseif $smarty.foreach.accessories_list.last} last_item{else} item{/if} product_accessories_description">
										<div class="product_desc">
											<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{$accessory.legend|escape:'html':'UTF-8'}" class="product-image product_image">
												<img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
											</a>
											<div class="block_description">
												<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{l s='More'}" class="product_description">
													{$accessory.description_short|strip_tags|truncate:25:'...'}
												</a>
											</div>
										</div>
										<div class="s_title_block">
											<h5 itemprop="name" class="product-name">
												<a href="{$accessoryLink|escape:'html':'UTF-8'}">
													{$accessory.name|truncate:20:'...':true|escape:'html':'UTF-8'}
												</a>
											</h5>
											{if $accessory.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
											<span class="price">
												{if $priceDisplay != 1}
												{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}
												{/if}
											</span>
											{/if}
										</div>
										<div class="clearfix" style="margin-top:5px">
											{if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
												<div class="no-print">
													<a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html':'UTF-8'}" data-id-product="{$accessory.id_product|intval}" title="{l s='Add to cart'}">
														<span>{l s='Add to cart'}</span>
													</a>
												</div>
											{/if}
										</div>
									</li>
								{/if}
							{/foreach}
						</ul>
					</div>
				</div>
			</section>
			<!--end Accessories -->
		{/if}

[NemoPS]

You might want to add it to the upper level container, that one looks like the pb left column, it has overflow:hidden applied

[edhost]

Hello

 

I did it as Nemo said:

 

{if isset($accessories) && $accessories}

<!--Accessories -->

<section class="page-product-box">

 

And all it contains till the closing {/if}

Cut it from there and paste it before
 

and it works..

 

But there is something more I'd like to do:

 

1. Add left column to product page, but starting in product description like the image attached.

 

2. Keep accessories slider as full width column in same position, like image attached.

 

How could we add this left column?

 

Thanks!

Edited September 9, 2016 by edhost (see edit history)