Customizing item listing on Product List page

Hi there,

I am using Marketpress with the Frontend plugin on my site. The goal is to allow users to post items they would like to sell (off-site). No e-commerce is needed, just listings with price, item title, and seller name and email.

I have two questions--

1. How do I edit the item listing on the Product List page to list the item name, price, seller name, and seller email? I would like all of this information to live under the product image, rather than the name existing above it. I would also like to remove the link on the item name so that users cannot access the individual product page.

2. Is there a way to integrate the lightbox feature on the Product List page, so users can click to open a larger image without going to the individual product page first?

Screenshot of my current set-up is attached. Thanks in advance!

  • Vaughan

    Hi @amanda,

    This would require some custom templates & use of custom fields. Which you could use customPress for.

    You would also need to edit the template-functions.php quite a bit to re-arrange the orders.

    This thread might help explain it. https://premium.wpmudev.org/forums/topic/is-there-an-easy-way-to-add-custom-fields-to-marketpress

    Though I think marketpress is a bit overkill for what you are trying to use it for. You might be able to achieve what you want with just the customPress plugin by creating a custom post type, as you are not actually using any e-commerce functions at all.

    See https://premium.wpmudev.org/project/custompress/#usage

    Hope this helps

  • Patrick

    Hi there @Amanda

    Welcome to the forums, glad to have you aboard!

    First thing is to set MarketPress to product listings only in the Miscellaneous Settings under the General tab. That disables shopping cart, checkout & order management and turns your site into more of a catalog than a store.

    Then to customize the layout, you'll need to create a custom mp_productlist.php template for your product listings page.

    You'll find instructions for that in marketpress/marketpress-includes/themes/Themeing_MarketPress.txt

    All the template tags you'll be using for your template (the functions that actually output the content) are found in marketpress/marketpress-includes/template-functions.php

    You can wrap those functions in any HTML and create any custom CSS you need to get the type of layout you want.

    If after having gone over the instructions, you need a bit of help with that, just let us know and we'll try to walk you through it. :slight_smile:

    As for the lightbox question, you would likely need to use a lightbox plugin, and add whatever custom classes are required to trigger the lightbox on those images.

  • Amanda

    Thank you both so much for the help! You've made the process much clearer.

    I have limited PHP knowledge, so I'm not sure where in my current product list page to add my HTML/functions.

    <?php // custom template for product list
    get_header();
    ?>
    <div id="content">
    	<?php if ( class_exists( 'MarketPress' ) ) {
    		?>
    			<h1 class="post-title"><?php _e( 'Our products', 'framemarket' ) ?></h1>
    			<?php echo mp_products_filter(); ?>
    			<div id="mp-product-grid">
    				<?php framemarket_grid_mp_list_products();?>
    				<div class="clear"></div>
    			</div>
    		<?php
    	}
    	?>
    </div>
    	<?php get_sidebar(); ?>
    <?php get_footer(); ?>

    Having trouble deciphering what's inside content div. If I were to replace line 10 with code to display product image, name, etc. all within the "mp-product-grid" div... would that remove the grid and display products as a list? My general instinct is that this file controls the wrapper of the entire product list and not the product itself.

    It seems that once I create the custom product list, it will be easy to integrate the custom fields with CustomPress.

    Any insight would be greatly appreciated!

  • Patrick

    Hi again @Amanda

    I hope you are well today!

    I actually just realized from your screenshot and the template code you posted that you appear to be using the FrameMarket theme.

    And yes, you are correct, that line generates the product list/grid. How it displays depends on settings on both MarketPress and FrameMarket.

    However, you can replace that line with your own custom code, all within the mp-product-grid div to get the layout you want.

  • Amanda

    Thank you Patrick!

    I am actually using the Gridmarket theme. However, it seems the mp_productlist.php file within the theme is unresponsive.

    I updated the file so the mp-product-grid is as followed:

    <div id="mp-product-grid">
         <?php echo mp_product_image(); ?>
         <div id="product-information" style="background-color: #00c;">
              <?php echo mp_product_title(); ?>
              <?php echo mp_product_price(); ?>
              <?php echo do_shortcode('[custom_fields_block]'); ?>
         </div>
         <div class="clear"></div>
    </div>

    Yet even adding a new div inside (with a bold background color), makes no changes to the site. The shop page still looks the same as it does in the screenshot attached in the original post.

    I don't see a mp_productlist.php in the Framemarket theme files. Should I be editing a different file?

  • Ash

    Hi @Amanda

    I hope you are well today.

    You can find the mp_productlist.php file in gridmarket theme. Please note that, you need to use gridmarket theme, but you need to have framemarket and gridmarket both theme installed. Gridmarket is a child theme of framemarket. So you should make all changes in gridmarket theme.

    How's about editing mp_productlist.php file in gridmarket theme? Make sure you are using gridmarket theme.

    Cheers
    Ash

  • Patrick

    Hi again @Amanda

    I just took a look at your code and it looks just fine. But that template is only used on the products virtual page created by MarketPress found at domain.com/store/products

    If you are displaying products on a different page (with a shortcode for example), that template won't apply.

    Also, the template tags you are using are to be used to display data from a single product and require the product ID or they throw an error.

    I think to achieve what you want, we'd likely have more success with a bit of CSS tweaking instead.

    This CSS works just fine on my test site to pop the product title in between the image and the meta:

    #content #mp-product-grid .product {position:relative;}
    #content #mp-product-grid .mp_product_name {bottom:30px; position:absolute;}
    #content #mp-product-grid .mp_product_meta {padding-top:30px;}

    It works on both the products page using the default template in GridMarket:
    http://reallywantthis.com/store/products/

    ...and a regular ol' WP page using the shortcode:
    http://reallywantthis.com/

    Please let us know if this would work for you, and we'll try to help you get it looking smart on your site. :slight_smile:

  • Amanda

    Thanks Patrick!

    The CSS you provided works, but creates issues when product names are long. See example attached.

    The products on this site are going to be added by a variety of people with a range of computer skills. I will not be managing the page or adding items myself once it goes live. (The concept is a marketplace page where tenants in one apartment building will list items they're getting rid of and want to sell. Similar to Craigslist, but exists within a portal website for a single apartment building.)

    We don't want users seeing any of the Wordpress back-end, so we chose Marketpress to use with its Frontend plug-in. Because I will not be controlling the product listings, I need a layout that is fluid/flexible and will accommodate any length of product name and display correctly on desktop and mobile devices alike.

    Is there a way I can achieve this with CSS? If not, what PHP file can be edited to control the layout of the product list on the main page (domain.com/shop)?

  • Patrick

    Hi again @Amanda

    I hope you had a great weekend!

    What I find a bit odd is that you are using GridMarket and that long product tile is appearing all on a single line, and bleeds into the neighboring product.

    GridMarket should wrap long titles onto multiple lines as seen here:
    http://reallywantthis.com/

    When that is the case, a simple CSS addition to restrict the height of the h3 tag there, and hide the overflow, solves the problem like so:

    #mp-product-grid h3.mp_product_name {
    height:15px;
    overflow:hidden;
    }
  • Amanda

    Thanks Patrick! That definitely helped.

    However, because of the prior CSS suggested here in order to move the product name and price under the image... the product name wraps, but rather than pushing the price down, it builds upwards into the product image. Screenshot attached.

    The actual site, if this helps: http://www.whitmanowner.com/shop

    And the aforementioned code:

    #container #mp-product-grid .product {position:relative;}
    #container #mp-product-grid .mp_product_name {bottom:25px; position:absolute;}
    #container #mp-product-grid .mp_product_meta {padding-top:40px;}
    #mp-product-grid h3.mp_product_name { overflow:hidden; white-space: normal; }

    Is there a way to build this product layout so that the text flows fluidly? I need the site to be responsive for desktop and mobile alike so absolute positioning is not a preferred method.

  • Michael Bissett

    Hey @Amanda,

    Replace this earlier piece of code:

    #container #mp-product-grid .product {position:relative;}
    #container #mp-product-grid .mp_product_name {bottom:25px; position:absolute;}
    #container #mp-product-grid .mp_product_meta {padding-top:40px;}
    #mp-product-grid h3.mp_product_name { overflow:hidden; white-space: normal; }

    With this:

    #mp-product-grid .mp_product_content {
        display: table-header-group;
    }
    #mp-product-grid .mp_product_name {
        display: table-row-group;
    }

    That should re-order the text and product images, while having the product text behave as it should. :slight_smile:

    Let me know if this helps please!

    Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.