Altering the Product Display
Despite buying a template for this website we’ve had rework the layout for the product display on the single page as well as every results listing. Due to the products my client’s selling, most of the images are long and thin as opposed to boxy. The original design had the image to the left and the text and price to the right, however with the long/thin images the text was getting pushed out of the fixed width design.
So last night and today I’ve been digging out the various files that are used for the product display and altering them to have the image first and then below the image comes the title, text, price and buy now buttons. On the results listings the image above and the title, price and buy now button on the line below. For the long and thin images this looks quite nice however for the few square images there are it unfortunately doesn’t look too great, however without a lot of rewriting of the HTML and adding in some CSS floats to control where the text sits depending on the image, then this is the next solution.
Pages I’ve had to update have been
product_info.php - for the single display page
bestsellers.php
includes/classes/boxes.php
includes/modules/product_list.php
includes/modules/new_products.php
I had to dramatically alter the boxes.php page, and copy the class usually used for displaying boxes into the product’s own class so that it could be amended just for the product display, as I didn’t know what else it would affect. The trouble was the products came out, one product per row with the image, title, price and buy now button each in a separate column. So getting a second row into the mix and making the first row span 3 columns, was the hardest part. After a lot of trial and error and a missing equals sign (sending the file into a neverending loop!), the products finally started to display correctly.
Unfortunately my client however has been uploading her image photos with a lot of white space on them. All of the photos are on clear white backgrounds however she’s not been cropping them down, so at present some images sit higher above the title and price associated with it than others. It’s also taken me 3 goes to explain to her that I cannot reduce the size between the product image and the text below it as there has been no padding or margins added! I’m hoping once she crops the images she’ll start to get the idea otherwise I’ll be outlining all of the images so that she can see where they start and end for herself!
Leave a Reply