exposeclothing Posted October 2, 2014 Share Posted October 2, 2014 Hey Folks, I love the new prestashop 1.6, but the only thing i dont like which seems to come standard in bootstrap is how the "light grey payment logo / add to cart / product attribute seletor /add to wishlist" is seperate from the products title block. I dont remember it being the same in 1.5, or perhaps i modified it to much and was never faced with the issue - but i find the image is a little to small in comparison to the two big large boxes next to it, and when it comes to selling clothing, its the image which sells the item, and not so much the massive "payment logos / add to cart button / social media links etc" i found the important parts are small, and the non-important parts are maximized in the layout. I would like to somehow merge the features that are inside the light grey box, into the section right next to the product, so i can then use that extra space to make the product image display larger. My initial guess is that its a positional module that i can transplant? however i want to double check with others, as i have previously moved modules in the past, and completely messed up the whole store, and started again, silly me didnt back up prior, so i started from scratch. For me to get the results as shown in the image, should i move the payment logos / add to cart etc into the short description section, or should i move the short description section into the payment logos / add to cart block? is this done through moving modules? http://www.exposeclothing.com.au/index.php?id_product=183&controller=product#/color-taupe/size-m this is the position im after Link to comment Share on other sites More sharing options...
exposeclothing Posted October 12, 2014 Author Share Posted October 12, 2014 As mentioned in my previous post, i wanted a larger product image, and to combine the "add to cart" section into the product description. Im far from a prestashop expert, and while im happy to provide the solution i personally used, I have no idea if it will work for your specific case, so please only do this at your own risk, and you MUST do a backup just incase it doesnt work for you. I did everything in dreamweaver and left the file open, and cleared the cache and refreshed the page, and viewed my product list display, to make sure each step didnt alter the product display layout, and if it did, i could "undo" the latest adjustment, and save the file to the server the simply "undo" the change id just made. Anyway, firstly i changed the background of the centercolumn to one colour - (the center column on the product display page only - this includes behind your image, your description, your "add to cart" aswell as your "more info" product description and customer comments section) I did this in file themes/bootstrapdefault/css/product.css on line 290 .pb-center-column { background: none repeat scroll 0 0 #040404; margin-bottom: 30px; i then changed the background of the "Add to cart" Block to having no background, i also removed the 1px borders by changing the colour to match the background (the colour iv chosen is #040404, so you can change according to your own colour selection this can be found in the same file themes/bootstrapdefault/css/product.css around line 528 #center_column.col-sm-9 .col-md-3 .box-info-product { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #040404; border-color: #040404; border-image: none; border-left: 0 solid #040404; border-right: 0 solid #040404; border-style: solid; Now that all the backgrounds are th same colour, i then made the image larger, which pushed the "add to cart" block underneath the the short product description... I did this by changing the underlined on global.css line 871 .col-md-5 { padding-left: 0.5px; padding-right: 2px; width: 60%; Now the add to cart section should under the product description, but i found it looked a little odd being so close to the image considering how much extra space if available, so i then added padding to the short description section Product.css Line 290 .pb-center-column { background: none repeat scroll 0 0 #040404; margin-bottom: 30px; margin-left: 73px; now it should be a little more appropriatley spaced, and oviously you can alter to your own requirments. Link to comment Share on other sites More sharing options...
Bill Dalton Posted October 12, 2014 Share Posted October 12, 2014 Nice write-up, thanks for sharing. Link to comment Share on other sites More sharing options...
exposeclothing Posted October 12, 2014 Author Share Posted October 12, 2014 (edited) Now the part i need a little assistance with, and im hoping someone could help me out, or atleast let me know if its possible.... But id like to move the "this product is out of stock" message, the social media sharing, aswell as the easy links (print & send to a friend) and have these listed under the "Add to cart" (if its in stock), attribute selection, and add to wish list. as you can see in the above image, The display is *product name *Model # *condition *short description *Stock numbers *social media sharing links *print / send to friend links *price *attribute selection *add to cart - (i have since added stock to the inventory to see where the "add to cart" is displayed) *add to wishlist but i would like it to display as *product name *Model # *condition *price *short description *Stock numbers *attribute selection *add to cart - (i have since added stock to the inventory to see where the "add to cart" is displayed) *add to wishlist *social media sharing links *print / send to friend links Is it as simple as cutting and pasting the relevent coding, in order of how i would like the items displayed? I THINK the file i have to alter is the product.tpl - my plan was to cut the coding from the "right product block" and paste it under the "centre product block" ... i did this and the page was full of header bars, so i "un-done" my changes, and decided its prob best to await a response before i make a mess. perhaps i missed an ending code? i have no idea. heres my aim Edited October 12, 2014 by exposeclothing (see edit history) Link to comment Share on other sites More sharing options...
exposeclothing Posted October 12, 2014 Author Share Posted October 12, 2014 Nice write-up, thanks for sharing. No worries. I just figure im here all the time requesting assistance, and although im no prestashop expert, the very least i can do it attempt to give back to the community... i just hope it doesnt screw up anyones store hahaha. 2 Link to comment Share on other sites More sharing options...
exposeclothing Posted October 19, 2014 Author Share Posted October 19, 2014 Found an easier and cleaner way to move the add to cart into the description In the themes/defaultbootstrap/PRODUCT.TPL save a copy to your desktop incase an error is made. you can see in this file there are lines which say <!-- the seperate areas of the layout --> (in light grey if using dreamweaver) you should see a few lines around line 239 which says </div> <!-- end center infos--> <!-- pb-right-column--> if like me you also want to move the "add to wishlist", the attributes, add to cart, payment logo (and anything else thats generally in that block) -dont select the <div class="pb-right-column col-xs-12 col-sm-4 col-md-3"> but select the line underneath where i have highlighted in red <!-- pb-right-column--> <div class="pb-right-column col-xs-12 col-sm-4 col-md-3"> {if ($product->show_price && !isset($restricted_country_mode)) || isset($groups) || $product->reference || (isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS)} <!-- add to cart form--> <form id="buy_block"{if $PS_CATALOG_MODE...... Continue to select all the text until you reach </div> <!-- end box-cart-bottom --> around line 386 (include this line in the selected text) Once you have selected your text, cut the coding and paste it just before you see (Paste your cut coding here) </div> <!-- end center infos--> <!-- pb-right-column--> and save the file to server, clear cache and you should see your add to cart block in the product description 2 Link to comment Share on other sites More sharing options...
Recommended Posts