Will Shaman Posted February 11, 2017 Share Posted February 11, 2017 I'm running CC6 with Minimizer Skin (which is based on Foundation) and want to improve the layout of the product page. At present, there's essentially a two-column layout, with the product title and picture(s) on the left, and the description followed by the price, quantity and Add to Basket button. When I have long descriptions — longer than the height of the picture — which is often the case, I end up with a tall thin column of text (my description) wasting a whole load of space beneath the picture. Furthermore, the price and Add to Basket button are then inevitably shoved right to the bottom of the page, well out of anyone's easy sight. A rough mock-up is attached (Layout-1) What I'd like to do is edit the template (presumably box.product.php) such that the description goes the full width of the page beneath my picture(s) and the price/Add to Basket button stuff is moved to the top right (see Layout-2). This would mean that, no matter how long my description, the picture, price and Add to Basket elements are always within easy reach for the customer and, importantly, my pages aren't wasted with lots of unhelpful white space. Given that Cubecart seems to have no documentation and I can't work out from the template how the various divs work together, I'm at a loss as to how to make this edit. I'd be ok if the divs were just divs, but it seems to break the page if I just use my common html sense. Any clues anybody, pretty please? Thanks in advance. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 11, 2017 Share Posted February 11, 2017 Please realize the right column can get quite tall, even without the product description. In the template content.product.php, near line 32, find: {if !empty($PRODUCT.description)} {$PRODUCT.description}{/if} Change to: {* {if !empty($PRODUCT.description)} {$PRODUCT.description}{/if} *} Near lines 188-198, find: {if $PRODUCT.product_weight > 0} <tr> <td>{$LANG.common.weight}</td> <td>{$PRODUCT.product_weight}{$CONFIG.product_weight_unit}</td> </tr> {/if} </tbody> </table> </div> </div> </div> After that, add: <div class="row"> <div class="small-12 columns"> {if !empty($PRODUCT.description)} {$PRODUCT.description}{/if} </div> </div> Quote Link to comment Share on other sites More sharing options...
Will Shaman Posted February 11, 2017 Author Share Posted February 11, 2017 Thanks for your speedy response, BSmithers! Am I right in saying your suggestion moves the product description to a position beneath the product picture(s)? And, if so, does the little block containing the price/quantity/basket button thus slide to the top of the page? Best wishes, Will Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 11, 2017 Share Posted February 11, 2017 The product description position falls to the lower of the gallery or the extra info and Buy Button. This is what your suggested image shows, although, as I said, the extra info can still be quite long with having options, bulk pricing, and the product details table. But, as you surmised, taking the description out of that column makes that column just that much shorter. Quote Link to comment Share on other sites More sharing options...
Will Shaman Posted February 13, 2017 Author Share Posted February 13, 2017 Thanks. That worked exactly as I wished. You're a star. Have a lollipop! Quote Link to comment Share on other sites More sharing options...
Smithy Posted May 25, 2018 Share Posted May 25, 2018 I was wondering if it is possible to do the same with the Mican Blue skin? Thanks, Smithy Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 25, 2018 Share Posted May 25, 2018 Very similar, if not exactly the same. Quote Link to comment Share on other sites More sharing options...
Smithy Posted May 25, 2018 Share Posted May 25, 2018 (edited) Sorry mate, coding is a bit foreign to me. Is the template/content.product.php file the one under the mican blue folder? If so I cannot find the coding you suggest. Thanks Smithy Edited May 25, 2018 by Smithy Quote Link to comment Share on other sites More sharing options...
bsmither Posted May 25, 2018 Share Posted May 25, 2018 In the Mican skin template content.product.php: Find near line 56: <h2>{$LANG.catalogue.product_description}</h2> <div class="product_description"> {$PRODUCT.description} Change to: {* <h2>{$LANG.catalogue.product_description}</h2> *} <div class="product_description"> {* {$PRODUCT.description} *} Then, near line 118, find: {if isset($PRODUCT.discounts)} On a new blank line ABOVE that, add: {* NEW PLACEMENT *} <h2>{$LANG.catalogue.product_description}</h2> {$PRODUCT.description} {* *} Because you edited a skin template, you may need to have CubeCart clear its cache (admin, Maintenance, Rebulid tab, Cear Cache). Quote Link to comment Share on other sites More sharing options...
Smithy Posted May 25, 2018 Share Posted May 25, 2018 (edited) Thanks mate, That worked a treat, sorry to have been a pain. Regards, Smithy Edited May 25, 2018 by Smithy Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.