Making changes to how products are displayed

I’m trying to personalize how my shop is displayed, but I fear my limited knowledge of code is working against me. Any help on the below issues would be appreciated. I am using the grid plugin and a theme from another developer.

1. How do I place the “Add to cart” button immediately below the price, rather than next to it? I want both to float left, so they are aligned. While I like having the cart button on the right, if I use a sale price, the increased length of the price causes the “add to cart” button to drop to the following line, making the site look sloppy.

2. How can I add text reading “Sale!” next to the decreased price? I want to be able to highlight the sale items, and creating a sale category doesn’t accomplish the same thing.

3. How do I keep the grids evenly spaced? The site will be selling ebooks, with titles and author names of varying lengths being used in the post title. When one name is longer than the others, it messes up everything (see screenshot). I need each grid to be the same size, and for the book images to line up cleanly.

Thank you for your help.

  • Arun Basil Lal
    • New Recruit

    Hey rqp,

    Welcome to the Forum!

    1. How do I place the “Add to cart” button immediately below the price, rather than next to it?

    This is shown off by your theme, Can you provide me with a direct link so I can see it and offer you a CSS fix?

    3. How do I keep the grids evenly spaced?

    Oops, that look bad. Again, it would be much easier if you could give me a direct link, Firebug would be my hero in here :slight_smile:

    Let me know!

  • rqp
    • New Recruit

    Arun,

    Thanks for getting back to me. I can’t go live for several more days, unfortunately. I’m attaching the code for the shop page, and a screenshot of “inspect element” for the green test book. I hope that helps.

    ETA: Sorry, I didn’t realize I can’t upload html files, so I didn’t attach the code, after all. If it’s just too much to fix without access to the code, I understand. Thanks for looking.

  • Arun Basil Lal
    • New Recruit

    Hello rqp,

    I appreciate you sending back the screenshot, but there is almost nothing I can do with it. Is the installation on your local machine? or somewhere online?

    If its online and If you can’t go Live, can you send me an Admin login so I can check it out?

    Send it via our contact forums: https://premium.wpmudev.org/contact in the following format:

    Subject: “Attn: Arun Basil Lal / Login Details”

    In the Body, include the link to this post, this one: https://premium.wpmudev.org/forums/topic/making-changes-to-how-products-are-displayed

    (The link is important so that I can find this thread later and give you a response)

    Looking forward. Thanks!

  • rqp
    • New Recruit

    Thanks for offering me different ways of getting support on this issue. I finally have the test site live at http://redqueenpress.com. It might need a username while in development. If so, it’s rqpress, password rqp4.

    In moving to the live version, some of the alignment issues seem to have fixed themselves. However, I really want the book images to be aligned with each other, regardless of how long the product title is, and I want all the product boxes in a row to be the same height. Basically, I want it all to look neat and orderly.

    Secondly, I decreased the font size for h3, and now the widgets are not aligned properly. I have two product list widgets, one directly below the other, and the “On Sale” widget is improperly placed.

    Thank you for your help.

  • Patrick
    • Support Monkey

    Hi rqp,

    Here’s a simple solution for your product images and headlines: add the following to your stylesheet to give the headings a minimum height. Then when you’re creating your product listings, you can control how much info needs to go in the heading to get it looking just right>

    h3.mp_product_name {
    min-height:100px;
    }

    For your sidebar issue, add the following to line 1106 of your stylesheet, where you see “.widget”. It will ensure all widgets start on a new line, so to speak.

    clear:left;

    Hope this helps! :slight_smile:

  • rqp
    • New Recruit

    Aristath, I’m not familiar with jQuery, but I’ll definitely read through that link. Am I correct in thinking that the jQuery will allow the rows to auto-size based on the content?

    PCwriter, once again you provide a quick and easy solution. Long term, I’d like one that can auto-size, but for now, the manual fix will work just fine. And that is such a simple fix for the widgets. Thank you!

  • Patrick
    • Support Monkey

    @rqp

    You’re welcome. It’s a simple css fix for now.

    But the jquery script that @aristath linked to above would definitely be a better solution for the long term. And to answer your question about auto-sizing, there’s this from the page describing the script:

    our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element

    So, in Marketpress, the container would be <div id=”mp_product_list”>, and the siblings would be <div class=”product”>.

    Hope this helps! :slight_smile:

  • rqp
    • New Recruit

    Okay, I’ll definitely have to set some time aside to learn some jquery basics, because that looks like exactly what I need.

    Any idea why, when I add something to my cart, “Checkout” is now right next to “Empty cart”, and the items in the cart are center-aligned? That wasn’t happening before, so it must have been something I did. I tried putting the code below in the stylesheet, but it didn’t do a thing, so I’m out of ideas.

    #mp_checkout_link
    {float: right;}

    I’m basically learning CSS as I go, on a need-to-know basis. It’s a slow process, and all the help is very much appreciated.

    Edited to say, hey, I figured it out! Just needed to change the # to a . I’ll get this eventually.

  • Patrick
    • Support Monkey

    @rqp

    Congrats!

    Here’s a tip: the “#” is used to designate an element with an id. The “.” is used to designate an element with a class. Ex:

    HTML <div id=”something”>

    in css syntax = #something

    HTML<div class=”else”>

    in css syntax = .else

    Hope this helps! :slight_smile:

  • rqp
    • New Recruit

    Pcwriter, you have been such a great help. Thank you again.

    There are three changes I’d still like to make.

    1. I would like to change the product name font. I tweaked the code you provided upthread to read:

    h3.mp_product_name {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#330000 !important;
    }

    and also tried

    #mp_product_list h3 {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#330000 !important;
    font-size:14px;
    }

    No luck. The name remains the site’s default link font.

    2. By changing the min-height of the mp_product_name, I now have a lot of white space in my product widgets. Ideally, I’d like to have the image left aligned with the text next to it, but I’ll settle for less white space.

    3. I’m still trying to left align the product name in the shopping cart widget. It looks like this should be the div class mp_cart_widget_content, and I’ve tried to make that (and every other ID and class in the immediate vicinity) float left, but nothing happens.

    And I genuinely think that should be it for me. Well, at least until I try to learn jquery, that is. There’s always one more thing, isn’t there?

  • Patrick
    • Support Monkey

    @rqp

    Ideally, I’d like to have the image left aligned with the text next to it

    That’s actually a whole heck of a lot easier to accomplish with very basic css than trying to figure out the intricacies of jquery,

    I tried accessing your site http://redqueenpress.com to check things and give you some working code, but it’s asking me for a “RQP site” username and password.

    Could you take that down or provide temporary access?

  • Patrick
    • Support Monkey

    Hi again rqp,

    To make a nice 2-column grid layout, with the book images on the left, titles on the right, and meta nicely aligned along the bottom, make the following changes – adding to or editing your code as necessary (screenshot of layout attached). If necessary to get the styles to “take”, add #content to all but the first set of rules:

    #content .grid .product, #maincontent .grid .product {
    min-height:0;
    width:45%;
    }
    h3.mp_product_name {
    min-height:0;
    float:right;
    width:60%;
    }
    .mp_product_price {
    float:left;
    clear:left;
    width:68%;
    line-height:25px;
    }
    form.mp_buy_form {
    float:right;
    clear:right;
    width:30%;
    }

    Hope this is the look you’re after :slight_smile:

  • Patrick
    • Support Monkey

    Hi rqp,

    Almost there! There are only a few adjustments that need to be done. Some of your style rules aren’t being applied because they’re being overridden by others in your stylesheet. Here’s the remedy: copy the styles below and use them to replace the ones you have. Note the use of !important which ensures that rule takes precedence.

    .product {
    border:2px solid #ccc;
    float:left;
    margin:5px !important;
    padding:10px !important;
    width:45%;
    }
    #content h3.mp_product_name {
    float:right;
    min-height:0;
    width:59%;
    }
    #content .mp_product_price {
    float:left;
    line-height:25px;
    width:66%;
    }
    #content form.mp_buy_form {
    clear:right;
    float:right;
    margin-bottom:0;
    width:33%;
    }

    This should look just fine once added to your stylesheet. :slight_smile:

  • rqp
    • New Recruit

    Pcwriter, I am just missing something here. I replaced the styles in my customized Marketpress stylesheet, but it seems to make no difference. I still can’t get the font color on h3_product_name to change, even with the !important tag, and the product formatting is still wonky (that’s the official word, right?).

    I realize I’m becoming very high maintenance, so please feel free to pass me off to the WPMU staff!

  • rqp
    • New Recruit

    Okay, wait a second. I had my landing page at the store set to Marketpress Grid, and that was giving me all the problems. When I look at the product page, set to the Marketpress default, it looks all shiny & pretty. Hurrah and, again, thank you.

    However (oh, that word), the product widgets in the sidebar are still mis-aligned, and I have yet to successfully change the product font or left align the products in the shopping cart widget.

  • Patrick
    • Support Monkey

    I realize I’m becoming very high maintenance, so please feel free to pass me off to the WPMU staff!

    No worries, I love solving puzzles… and yours is fun! :slight_smile:

    Oops…the sidebar. Forgot about that, sorry. Add this to correct the sidebar display:

    #sidebar .product {
    margin:0;
    padding:0;
    width:auto;
    }

    For the shopping cart widget, add this:

    .mp_cart_contents_widget tr, .mp_cart_contents_widget td, .mp_cart_contents_widget tbody {
    text-align:left;
    vertical-align:top;
    }

    For the product font, try this (same font family as your main nav):

    .mp_product_content {
    font-family:"Sorts Mill Goudy",Georgia,Times,serif;
    }

  • rqp
    • New Recruit

    Glad you enjoy this, because your help has been invaluable.

    Shopping cart widget is now fixed. Thank you!

    The sidebar is closer to being correct, but I still need to raise the image so that it sits next to the text, rather than below.

    I might have been unclear about the product font. I’m not trying to change the description, but the title/product link. I tried adding

    .mp_product_name {
    font-family: "Sorts Mill Goudy", Georgia, Times, serif;
    color:#330000 !important;
    }

    to the stylesheet, but nothing happened, so that’s definitely not the right bit of code.

    And in finally getting the store page correct, the single product pages now have an unnecessary border that messes up those pages. It’s web design whack-a-mole.

  • Patrick
    • Support Monkey

    Add the font-family and color to the headline, #content h3.mp_product_name, so it becomes

    #content h3.mp_product_name {
    float:right;
    min-height:0;
    width:59%;
    font-family: "Sorts Mill Goudy", Georgia, Times, serif;
    color:#330000 !important;
    }

    As for the single product pages, due to the structure of your theme’s html markup, there’s only one way to really distinguish between them and the grid on the other page: you need to specify the body class in the css we built for your product grid display. Add the following to each style rule we created for the grid display (if you ever delete the page and create a different one for your grid display, you will need to adjust the ID):

    .page-id-133

    Your styles should now be like this:

    .page-id-133 .product {
    border:2px solid #ccc;
    float:left;
    margin:5px !important;
    padding:10px !important;
    width:45%;
    }
    .page-id-133 #content h3.mp_product_name {
    float:right;
    min-height:0;
    width:59%;
    }
    .page-id-133 #content .mp_product_price {
    float:left;
    line-height:25px;
    width:66%;
    }
    .page-id-133 #content form.mp_buy_form {
    clear:right;
    float:right;
    margin-bottom:0;
    width:33%;
    }

    To adjust the sidebar heading, add this:

    #sidebar h3.mp_product_name {
    width:53%;
    }

    Let’s see how this looks :slight_smile:

  • rqp
    • New Recruit

    Ha. Well, we fixed the product page. Now the widgets on the main store page have a border — and still aren’t aligned, alas.

    The font code changed the font family, but the color stubbornly refuses to change to #330000.

  • Patrick
    • Support Monkey

    Ah yes, adding weight with .page-id-133 messed things up a bit with the sidebar. To remove the borders from the sidebar widgets, change this:

    #sidebar .product {
    margin:0;
    padding:0;
    width:auto;
    }

    …to this:

    #sidebar .product {

    margin:0 !important;

    padding:0 !important;

    width:auto;

    border:none;

    }

    To fix the headings, change this:

    #sidebar h3.mp_product_name {
    width:53%;
    }

    …to this:

    #sidebar h3.mp_product_name {
    width:53% !important;
    float:right;
    }

  • rqp
    • New Recruit

    Awesome! It looks great now. And I’m actually showing the ‘first draft’ of the site to my partners in ten minutes, so your timing is impeccable.

    I’d still love to figure out why this code:

    .mp_product_name {
    font-family: "Sorts Mill Goudy", Georgia, Times, serif;
    color:#330000 !important;
    }

    had no actual affect on the color, but for now, I can live with it.

    I am so pleased with how neat and organized the products look now. Your help made a <i>huge</i> difference, pcwriter. I only wish I had more rep points to give you!

  • rqp
    • New Recruit

    I tried changing those to #330000, which is a nice dark maroon, and it still shows as #b30000, the default link color (a bright red), on my browsers (tried it on Firefox, Safari & Chrome).

    But, fortunately, no one else seems to care that I can’t change the color, so I think I’m just going to leave it as is for now.

    In fact, though there is still plenty of tweaking to be done (my product categories and shopping cart widget are misbehaving, and now I get to figure out how to include the fields I create in CustomPress in my product description), the worst of the design work seems to be over. I am so very pleased with how the shop came out. Once more, thank you!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.