MarketPress: How to customize the product list?

Hi there

I created some products on MarketPress. The productlist is looking very simple, just a list of text, no pictures,etc…

How can i customize the productlist?

I would like to see the tumbnails at least at the list too, not only when i click on the product.

Also, can i transforme the list into grid?

Thank You

  • 3SixtyEvolve
    • New Recruit

    Greetings @caesaregypt

    Welcome to the WPMU DEV Community and thank you for posting to the forum.

    Is it possible to provide me with a bit more information about your setup and also a link that I can look at? It is always easier to assist with customization questions if we can actually see the site and check the code via Firebug.

    So I would just need a link, the name of the theme you’re using and what WordPress installation you’ve got (Multisite, single etc). Once I have this information I would be able to assist you better.

    Have a good day and look forward to receive your feedback :slight_smile:

    GinaB

  • 3SixtyEvolve
    • New Recruit

    Hi @caesaregypt

    Thank you for the link. I had a look at your site and although you’re not finished yet, I just wanted to let you that you’re doing a good job! And it’s quite a nice theme you’re using.

    With regards to Multisite or single, I think in your case you’re having just the standard WordPress installation, correct?

    I will revert back to you with a possible solution to your customization question at the earliest. Will first have a look at the code on your site (via Firebug).

    With regards to making a grid on your product page. Please see this thread with a solution.

    New Version of MarketPress Grid Shortcode plugin

    Well, hope the above is useful to you. Let me know if you need any further support.

    Have a good day and talk soon!

    Gina

    Hope my response is helpful. Appreciate a thumbs up if it is. If it’s not, please let me know how I can serve you better.

  • Fondeli
    • The Bug Hunter

    Hi Gaesaregypt,

    You should be able to get your products in a grid using CSS. Here is the css I have used:

    /* Grid Example */

    .product {
    width: 115px;
    float: left;
    height: 140px;
    border: 1px solid #E4E4E4;
    background: #FFFFFF;
    text-align: center;
    margin: 2px;
    padding: 4px;
    }

    .mp_product_image_list {
    text-align: left;
    width:105px;
    height:105px
    }

    h3.mp_product_name {
    font-size: 8pt;
    margin-bottom: 0px;
    padding-bottom: 0px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    }

    a.mp_product_content {
    display:none;
    }

    .mp_product_price {
    float: none;
    text-align: left;
    margin: 3px auto 3px;
    line-height: 10px !important;
    }

    a.mp_link_buynow {
    display:none;
    }

    div.mp_product_meta {
    clear: both;
    margin-top: 0px;
    overflow: hidden;
    }

    a.footer {
    clear: both;
    }

    You can use firebug to play around with the height and width in .product and .mp_product_image_list until you get something you are happy with, then make the changes to this code.

    This should be added to your style.css file.

    Hope it works out for you!

  • Patrick
    • Support Monkey

    Hi caesaregypt,

    The code provided by @fondeli should give you a nice grid layout (tweak it as desired).

    The reason you’re not getting images in your product list may be because you did not set those images as Featured Images.

    On the edit page for any product, look in the right-hand column where you see “Set featured image”. Click that and select the image to display for that product. You will need to then remove the code for the image you inserted in the product post editor (otherwise you will have 2 images on the product page).

    Hope this helps! :o)

  • caesaregypt
    • WPMU DEV Initiate

    @pcwriter: I am having difficulties removing the images. Even though I delete them from the Gallery, they are still there. ( I didn’t do anything in the editor, I just add the image as featured in the products) Did you mean the product editor, or the HTML editor of the MarketPress?

    Thank You

  • caesaregypt
    • WPMU DEV Initiate

    @fondeli, @ginab: I am sorry to bother you again, but I am really lost. I see what you guys sent to me, the HTML, CSS, etc…What I dont know is simple: HOW to use this??

    I am new to this.

    For example I got the Grid plugin GinaB sent to me, I installed, nothing happened.( At that forum, they are talking about to change certain codes, etc to work, but I dont know how)

    Do I have to go to the EDITOR of the respectiv Plugin? Or how do I edit it?

    (What are the Shortcodes by the way? How to use them?)

    The CSS Fondeli sent to me: Do I have to copy paste into the MarketPress Editor? If yes, then where exactly?

    Thank You

  • Patrick
    • Support Monkey

    Hi caesaregypt,

    For each product you created, you added some image code by clicking the “Add Media” icon in the product editor. Even if you remove the image from the media gallery, if that code is still there, the image will display. Simply delete the image code from the product post. Now, when you create a new product, set only the featured image; do not add the same image by clicking the ‘Add Media” icon.

  • Fondeli
    • The Bug Hunter

    Hi caesaregypt,

    The product grid css is added to your theme’s style sheet. Do you use cpanel to upload your files? In the File Manager you should go to wp-content/themes/your_theme/style.css and select Code Editor, you can then add the lines for the product grid. Alternatively you can download the styles.css file using FTP and make your changes and then FTP the file back up to your host again.

    I hope this makes sense for you.

  • 3SixtyEvolve
    • New Recruit

    @caesaregypt

    Hope you’re well and making progress with your site.

    I’m just checking in quickly to see if the advice from @pcwriter and @fondeli helped you. If you have any further questions, please don’t hesitate to ask. We would gladly assist.

    If you got sorted, I will leave it to you to close the thread – with a smile (since that’s how we like our members to close threads here at WPMU DEV :grinning:

    All the best and have a wonderful day!

    Gina

  • caesaregypt
    • WPMU DEV Initiate

    @fondeli: I inserted your CSS, and yes, it shows some kind of grid, but the whole page is look like chaotic, colors, lines, fonts, widgets, everything is upside down. So I took it down.

    Maybe if you could tell me, where exactly in the style.css should I paste it, what line, between what and what? Or it doesn’t matter?

    All I want is simple: I just would like to have a page like the GRIDMARKET add on the top right of this forum for example. I would like to list my products in a grid format, only pictures and price!

    Thank You for your help!

  • 3SixtyEvolve
    • New Recruit

    @caesaregypt

    I had a look at your site and it’s starting to take shape. Hope you’re using Firebug to play around with the code – it’s such a good tool and you’re not actually messing with your site. :slight_smile:

    Let me know if you need assistance with anything else. Gladly here to assist you.

    Have a good day!

    Gina

  • Fondeli
    • The Bug Hunter

    @caesaregypt it’s looking good. Once you have the grid format, playing around with the widths and that just takes a little getting used to. It actually took me ages to figure out the grid, I started at the very same level as you a year ago, so I do understand how hard it can be to understand what’s going on. But you are definitely making progress!! :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.