Display product pics on homepage

Hello - I am using the Marketpress plugin with the Gridmarket theme and I am trying to display my products on the homepage. I have set the homepage to be a static page where I included the shortcut to display the products.

However, this only displays the Description and buy now button, not a picture.

I am trying to have a large picture of each product (I only have 5 products for which I need to display large, appealing pictures) on the homepage with the Excerpt displayed for each product and a link for further information per product.

Thanks

  • Timothy Bowers

    Hey there.

    I am trying to have a large picture of each product (I only have 5 products for which I need to display large, appealing pictures) on the homepage with the Excerpt displayed for each product and a link for further information per product.

    So the default grid layout is not needed here then?

    If you used the following shortcode:

    [mp_product product_id="36" title="1" content="excerpt" image="single" meta="1"]

    Then you can display each product independently on a page if there are only 5.

    You could also use CSS to alter the image site. Or use a combination of short codes:

    Product Image [mp_product_image] - Displays the featured image of a given product.
    Optional Attributes:

    "product_id" - The ID for the product. Optional if shortcode is in the loop.
    "context" - What context for preset size options. Options are list, single, or widget, default single.
    "size" - Set a custom pixel width/height. If omitted defaults to the size set by "context".
    Example: [mp_product_image product_id="1" size="150"]
    Product Buy Button [mp_buy_button] - Displays the buy or add to cart button.
    Optional Attributes:

    "product_id" - The ID for the product. Optional if shortcode is in the loop.
    "context" - What context for display. Options are list or single, default single which shows all variations.
    Example: [mp_buy_button product_id="1" context="single"]
    Product Price [mp_product_price] - Displays the product price (and sale price).
    Optional Attributes:

    "product_id" - The ID for the product. Optional if shortcode is in the loop.
    "label" - A label to prepend to the price. Defaults to "Price: ".
    Example: [mp_product_price product_id="1" label="Buy this thing now!"]
    Product Meta [mp_product_meta] - Displays the full product meta box with price and buy now/add to cart button.
    Optional Attributes:

    "product_id" - The ID for the product. Optional if shortcode is in the loop.
    "label" - A label to prepend to the price. Defaults to "Price: ".
    "context" - What context for display. Options are list or single, default single which shows all variations.
    Example: [mp_product_meta product_id="1" label="Buy this thing now!"]

    Screens attached to demo.

  • netherworks

    You can use shortcodes for this. Copy and paste the following code 5 times in the HTML mode of the page/post editor. Be sure to set the product ID where indicated. You can make it bigger or smaller by changing all the "250" values to whatever size works best for you.

    <div style="height: 300px; width: 250px; margin: 10px; float: left;">[mp_product_image product_id="<!--YOUR PRODUCT ID HERE-->" size="250"]
    <div style="text-align: center;">[mp_product product_id="<!--YOUR PRODUCT ID HERE-->" content="excerpt" image="0" meta="0"]</div>
    </div>

    Hope this does the trick for ya.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.