product customization tab - can i move the field?

adriangillitt · July 7, 2013

Hi there hope someone can help me. I have several products on my site that require customization, i have created 2 fields, however i am unhappy that these are right at the bottom of the page and you have to click on an additional tab, these all seems quite hard work for the customer.

Is there a way to move these fields to the same area as where you have the product combination drop down menus?

I look forward to getting some help on this one as i already tried moving the code for the fields in the pruduct.tpl file to above the footer, but this still does not really have the right effect.

adriangillitt · July 7, 2013

PS: i am running PS version 1.5.4.1 any help appreciated. thanks Adrian

Enrique Gómez · July 7, 2013

Maybe this free module could help you

http://catalogo-onlinersi.net/en/add-ons-prestashop-modules/341-visible-customization.html

This module adds the product page in hookExtraRight, options for customization of the product to be more accessible to users

nadie · July 7, 2013

You can use the module the user "Shacker"

http://catalogo-onli...tomization.html

Or, for example you can do this:

File:

/themes/your-template/product.tpl

Find and delete the following code:


<!-- Customizable products -->
{if isset($product) && $product->customizable}
<div id="idTab10" class="bullet customization_block">
<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
<p class="infoCustomizable">
{l s='After saving your customized product, remember to add it to your cart.'}
{if $product->uploadable_files}<br />{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
</p>
{if $product->uploadable_files|intval}
<div class="customizableProductsFile">
<h3>{l s='Pictures'}</h3>
<ul id="uploadable_files" class="clearfix">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 0}
<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if isset($pictures.$key)}
<div class="customizationUploadBrowse">
<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)}" title="{l s='Delete'}" >
<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
</a>
</div>
{/if}
<div class="customizationUploadBrowse">
<label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your computer'}{/if}{if $field.required}<sup>*</sup>{/if}</label>
<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
</div>
</li>
{counter}
{/if}
{/foreach}
</ul>
</div>
{/if}
{if $product->text_fields|intval}
<div class="customizableProductsText">
<h3>{l s='Text'}</h3>
<ul id="text_fields">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 1}
<li class="customizationUploadLine{if $field.required} required{/if}">
<label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
<textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input">{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
</li>
{counter}
{/if}
{/foreach}
</ul>
</div>
{/if}
<p id="customizedDatas">
<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
<input type="hidden" name="submitCustomizedDatas" value="1" />
<input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
<span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
</p>
</form>
<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
</div>
{/if}

-------

And before this line:

<!-- description and features -->
{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}

Paste this code:

<!-- Customizable products -->
{if isset($product) && $product->customizable}
 <div class="bullet customization_block">
  <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
<p class="infoCustomizable">
 {l s='After saving your customized product, remember to add it to your cart.'}
 {if $product->uploadable_files}<br />{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
</p>
{if $product->uploadable_files|intval}
<div class="customizableProductsFile">
 <h3>{l s='Pictures'}</h3>
 <ul id="uploadable_files" class="clearfix">
  {counter start=0 assign='customizationField'}
  {foreach from=$customizationFields item='field' name='customizationFields'}
   {if $field.type == 0}
	<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
	 {if isset($pictures.$key)}
	 <div class="customizationUploadBrowse">
	  <img src="{$pic_dir}{$pictures.$key}_small" alt="" />
	  <a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)}" title="{l s='Delete'}" >
	   <img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
	  </a>
	 </div>
	 {/if}
	 <div class="customizationUploadBrowse">
	  <label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your computer'}{/if}{if $field.required}<sup>*</sup>{/if}</label>
	  <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
	 </div>
	</li>
	{counter}
   {/if}
  {/foreach}
 </ul>
</div>
{/if}
{if $product->text_fields|intval}
<div class="customizableProductsText">
 <h3>{l s='Text'}</h3>
 <ul id="text_fields">
 {counter start=0 assign='customizationField'}
 {foreach from=$customizationFields item='field' name='customizationFields'}
  {if $field.type == 1}
  <li class="customizationUploadLine{if $field.required} required{/if}">
   <label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
   <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input">{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
  </li>
  {counter}
  {/if}
 {/foreach}
 </ul>
</div>
{/if}
<p id="customizedDatas">
 <input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
 <input type="hidden" name="submitCustomizedDatas" value="1" />
 <input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
 <span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
</p>
  </form>
  <p class="clear required"><sup>*</sup> {l s='required fields'}</p>
 </div>
{/if}

----

After search:

 {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}

change by

{*   {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
*}

---

Final result:

Attached Image

Sorry for my English

PD: Remember that if you modify the file "product.tpl", you have to force compilation.

adriangillitt · July 8, 2013

great job guys, many thanks.

I used the module as i thought it looked a little cleaner. And i also used some of the code to remove the customized tab, thanks again!!

adriangillitt · July 8, 2013

Just one more thing. Is there a way to move this module above the add to cart buttons? ideally just below the drop down boxes for the other options?

NOSaint · July 22, 2013

Thanks Nadie! Your fix worked perfectly! Great explanation!

ares · March 8, 2014

Nobody has been able to move this module above the add to cart buttons?

I tried in every way, but nothing to do, does not work.

There are some modules for a fee?

Prestashop 1.5.6.2

vekia · March 8, 2014

solution is several posts above, posted by Nadie.

have you tried it?

ares · March 9, 2014

I tried, but if I try to move it above the add to cart button does not work.
While moving under the add to cart button is all OK.
I can not understand why

Any idea?
thanks

vekia · March 9, 2014

may i know where exactly you tried to move it?

i think that you moved it before <form>

the most important thing: this button must be included inside <form>

ares · March 9, 2014

Hello,
I did as he says NADIE
But copying over line 380
above
<! - Out of stock hook ->
<div id="oosHook"{if $product-> quantity> 0} style = "display: none;" {/ if}>

I need to insert a Textbox onto the button
inclusion in the cart.
I can not find the solution.
Any help is appreciated

vekia · March 10, 2014

is there any chance to see your modified file?

if so, please paste it for example to service like pastebin.org

it will be much easier to inspect it

ares · March 10, 2014

Thank you,
I attach the modified file link

http://pastebin.com/xNcJR85q

vekia · March 10, 2014

ohh i see where the problem is.

in this case it's necessary to move it before <form id="buy_block">

ares · March 10, 2014

OK, thanks 1000, so it actually works.

There is no way to insert a text field on the add to cart button, to allow buyers to enter various instructions?

Anyway thanks again.

Alberto Fernández · April 10, 2014

ohh i see where the problem is.

in this case it's necessary to move it before <form id="buy_block">

That's why it wasn't working for me!

Thank you so much Vekia!

vekia · April 10, 2014

That's why it wasn't working for me!

Thank you so much Vekia!

you're welcome

may i know what prestashop version you use?

and also theme?

Alberto Fernández · April 10, 2014

you're welcome

may i know what prestashop version you use?

and also theme?

Of course, I'm using 1.5.6.1, Sellya theme.

Now the buying process is more aesthetic and natural for the customer: http://cincelaser.com/cristaleria/[spam-filter]2-copas-burdeos-570-ml-en-cajita-regalo.html

Next step, to hide the save button !

ares · April 11, 2014

(sorry for my english)
Hello,
I am attaching link the modified file to hide the save button.
(I tried it and it works)
I would like to please know how you managed to enter the fields before the buy button.
But I do not work in any way.
You can post the change?

thanks

http://www.prestashop.com/forums/topic/76874-how-to-remove-save-button-for-customized-fields/page-8

Edited April 11, 2014 by ares (see edit history)

Alberto Fernández · April 12, 2014

(sorry for my english)

Hello,

I am attaching link the modified file to hide the save button.

(I tried it and it works)

I would like to please know how you managed to enter the fields before the buy button.

But I do not work in any way.

You can post the change?

thanks

http://www.prestashop.com/forums/topic/76874-how-to-remove-save-button-for-customized-fields/page-8

Jus following the instructions provided by nadie several posts above, but moving customzation code before <form id="buy_block">

jajarom · July 22, 2015

Who can help me for Prestashop 1.6.1.0 ?

adtastic · August 24, 2015

prestashop 1.6 here. I've tried this fix and others found via the forum and none worked. However. I was able to figure it out for myself and put these fields in the best possible place for my store which is directly under the short description.

in product.tpl take this code:

<!--Customization -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Product customization'}</h3>
				<!-- Customizable products -->
				<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
					<p class="infoCustomizable">
						{l s='After saving your customized product, remember to add it to your cart.'}
						{if $product->uploadable_files}
						<br />
						{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
					</p>
					{if $product->uploadable_files|intval}
						<div class="customizableProductsFile">
							<h5 class="product-heading-h5">{l s='Pictures'}</h5>
							<ul id="uploadable_files" class="clearfix">
								{counter start=0 assign='customizationField'}
								{foreach from=$customizationFields item='field' name='customizationFields'}
									{if $field.type == 0}
										<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if isset($pictures.$key)}
												<div class="customizationUploadBrowse">
													<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
														<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
															<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
														</a>
												</div>
											{/if}
											<div class="customizationUploadBrowse form-group">
												<label class="customizationUploadBrowseDescription">
													{if !empty($field.name)}
														{$field.name}
													{else}
														{l s='Please select an image file from your computer'}
													{/if}
													{if $field.required}<sup>*</sup>{/if}
												</label>
												<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
											</div>
										</li>
										{counter}
									{/if}
								{/foreach}
							</ul>
						</div>
					{/if}
					{if $product->text_fields|intval}
						<div class="customizableProductsText">
							<h5 class="product-heading-h5">{l s='Text'}</h5>
							<ul id="text_fields">
							{counter start=0 assign='customizationField'}
							{foreach from=$customizationFields item='field' name='customizationFields'}
								{if $field.type == 1}
									<li class="customizationUploadLine{if $field.required} required{/if}">
										<label for ="textField{$customizationField}">
											{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if !empty($field.name)}
												{$field.name}
											{/if}
											{if $field.required}<sup>*</sup>{/if}
										</label>
										<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
											{if isset($textFields.$key)}
												{$textFields.$key|stripslashes}
											{/if}
										{/strip}</textarea>
									</li>
									{counter}
								{/if}
							{/foreach}
							</ul>
						</div>
					{/if}
					<p id="customizedDatas">
						<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
						<input type="hidden" name="submitCustomizedDatas" value="1" />
						<button class="button btn btn-default button button-small" name="saveCustomization">
							<span>{l s='Save'}</span>
						</button>
						<span id="ajax-loader" class="unvisible">
							<img src="{$img_ps_dir}loader.gif" alt="loader" />
						</span>
					</p>
				</form>
				<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
			</section>
			<!--end Customization -->

move it just below:

</div>

Now what I am trying to solve is taking the "social share buttons, write a review, send to a friend, print" options

and move those below the more info (product main description)

SaLiC · December 28, 2015

I tried this. It works ok, but the heading to the field is visible even when there are no customizations available.

Is there a solution to that?

prestashop 1.6 here. I've tried this fix and others found via the forum and none worked. However. I was able to figure it out for myself and put these fields in the best possible place for my store which is directly under the short description.

in product.tpl take this code:

<!--Customization -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Product customization'}</h3>
				<!-- Customizable products -->
				<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
					<p class="infoCustomizable">
						{l s='After saving your customized product, remember to add it to your cart.'}
						{if $product->uploadable_files}
						<br />
						{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
					</p>
					{if $product->uploadable_files|intval}
						<div class="customizableProductsFile">
							<h5 class="product-heading-h5">{l s='Pictures'}</h5>
							<ul id="uploadable_files" class="clearfix">
								{counter start=0 assign='customizationField'}
								{foreach from=$customizationFields item='field' name='customizationFields'}
									{if $field.type == 0}
										<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if isset($pictures.$key)}
												<div class="customizationUploadBrowse">
													<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
														<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
															<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
														</a>
												</div>
											{/if}
											<div class="customizationUploadBrowse form-group">
												<label class="customizationUploadBrowseDescription">
													{if !empty($field.name)}
														{$field.name}
													{else}
														{l s='Please select an image file from your computer'}
													{/if}
													{if $field.required}<sup>*</sup>{/if}
												</label>
												<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
											</div>
										</li>
										{counter}
									{/if}
								{/foreach}
							</ul>
						</div>
					{/if}
					{if $product->text_fields|intval}
						<div class="customizableProductsText">
							<h5 class="product-heading-h5">{l s='Text'}</h5>
							<ul id="text_fields">
							{counter start=0 assign='customizationField'}
							{foreach from=$customizationFields item='field' name='customizationFields'}
								{if $field.type == 1}
									<li class="customizationUploadLine{if $field.required} required{/if}">
										<label for ="textField{$customizationField}">
											{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if !empty($field.name)}
												{$field.name}
											{/if}
											{if $field.required}<sup>*</sup>{/if}
										</label>
										<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
											{if isset($textFields.$key)}
												{$textFields.$key|stripslashes}
											{/if}
										{/strip}</textarea>
									</li>
									{counter}
								{/if}
							{/foreach}
							</ul>
						</div>
					{/if}
					<p id="customizedDatas">
						<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
						<input type="hidden" name="submitCustomizedDatas" value="1" />
						<button class="button btn btn-default button button-small" name="saveCustomization">
							<span>{l s='Save'}</span>
						</button>
						<span id="ajax-loader" class="unvisible">
							<img src="{$img_ps_dir}loader.gif" alt="loader" />
						</span>
					</p>
				</form>
				<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
			</section>
			<!--end Customization -->

move it just below:

</div>

Now what I am trying to solve is taking the "social share buttons, write a review, send to a friend, print" options

and move those below the more info (product main description)

folkifoon · December 15, 2016

Hi i moved my custom block to a different place in website.

All looks ok but when i want to upload a file it just keeps loading.

Is there something i forgot?

Chris Dodd · February 16, 2020

On 7/8/2013 at 4:08 AM, Enrique Gómez said:

Maybe this free module could help you

http://catalogo-onlinersi.net/en/add-ons-prestashop-modules/341-visible-customization.html

This does not work to well in 1.6!

num47 · November 16, 2020

On 12/28/2015 at 3:33 PM, SaLiC said:

I tried this. It works ok, but the heading to the field is visible even when there are no customizations available.

Is there a solution to that?

add the following before the code and it should solve the problem and don't forget to force compile to make it work:

{if isset($product) && $product->customizable}

product customization tab - can i move the field?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in