Tutorial: How to Customise Marketpress Product List

Hope I’m not being too cheeky posting this, as I’m a complete noob and I hope I’m posting it in the right place. I’ve just spent the last couple of weeks trying to customise my MarketPress product list and having spent ages on the forums trying to get my head around it, so thought it might be useful to document the process all in one place.

You will need these open:



If you are looking for a grid format, download Framemarket and check out the gridmarket theme for pointers or this grid plugin for marketpress might be useful.

Step 1: Create a custom theme

Follow the instructions in /marketpress/marketpress-includes/themes/Themeing_MarketPress.txt to create a your_name.css file.

Step 2: Create a marketpress product list template for editing

Marketpress defaults to page.php as your store layout (each product is treated like a post on your main blog page). If you use a custom blog template and have changed column widths / sidebars etc, it may be better to start from your current template instead.

Copy your default blog page template (either page.php or your custom one) and save as mp_product_list.php in your theme folder.

Step 3: Create a basic product listing format

Most themes will clearly show you where your post is. On my theme (Themia Lite) it uses commenting and a div class:

<!--Start Post-->
<div class="post"> //You can add styling here to alter your css for this template only
//All product info will go here
<!--End Post-->

You can either build your product listing from scratch, or just tweak the existing format. If you wat an existing format to work with, ThePath kindly put me on the right track here, by providing a format that pulls the same info as default settings. Inside your post tags try:

<div id="prodimage">
<?php if ( has_post_thumbnail() ) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo '</a>';
} ?>
<?php $id = get_post_thumbnail_id(get_the_ID()); // gets the post thumbnail ID ?>
<div id="proddesc">
mp_buy_button(true, 'single');

Step 4: Customise your listing

Start by looking at the shortcodes Marketpress have provided (Store Settings tab). To call a Marketpress shortcode, use this format:

<?php echo mp_product_price ?> or <?php echo do_shortcode('[mp_product_price]'); ?>

If you read the shortcodes documentation, you will see that you can format the layout using optional attributes after the shortcode name eg.

<?php echo do_shortcode('[mp_product title="1" content="full" image="list" meta="1"]'); ?>

will give you the product title, full content (not excerpt), the image size specified for list, and the meta (price & buy button).

If the shortcodes don’t give you enough options, you can call data from individual fields. You can identify the field name by scrolling through marketpress/marketpress-includes/template-functions.php (I search for the label text from the New Product form to find what I need eg. “External Link”=”mp_product_link”:wink:.

To call individual fields (in this case mp_product_link, use the following code:

<?php $external = get_post_meta($post->ID, 'mp_product_link', true) ?>//define the field as a variable"
<?php if(!empty($external)): ?>//only calls data IF field is NOT EMPTY
<a href="<?php echo $external ?>"><?php the_title(); ?></a>// Echos field contents as Title link
<?php endif; ?>//Ends IF function

I used this with an else function to define different formatting for my internal and external links:

<?php $external = get_post_meta($post->ID, 'mp_product_link', true) ?>
<?php if(!empty($external)): ?>//If product has an external link do this:
<a rel="nofollow" target=”_blank” href="<?php echo $external ?>"><?php the_title(); ?></a>
<?php else : ?>//Otherwise, do this:
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endif; ?>

You can add custom fields in exactly the same way – the CustomPress plugin makes defining them very easy, and gives you the code to embed them too.

Random workarounds:

Displaying price on product list for products with variables. The standard product list formatting for products with variables does not show the price and gives a button with “Choose options”. I can’t find a way to get the price to display, so have added a custom price field for variables and use an if/else function to call the custom field instead of mp_price on products with variables.

You can change the display of the choose options button by editing the optional attributes on mp_product_meta (dropdown box / buy button) or adding in your own mp_buy_button. If you change the context on either to “single”, the button etc will be displayed in the same format as on your single product pages.

Hope this is helpful! Feel free to improve / edit / add to this. My code may well be a bit messy as I’m starting from no knowledge, but it does work :slight_smile: