Products List page styling

I see that on the Products List page marketpress uses its own code to strip tags from the description field, for example bullets are removed, etc. (Standard.jpg attachment). This text is just output without any HTML such as paragraph tags or CSS classes.

What I had to do was to hack marketpress.php to display the description in a paragraph tag to be able to style it using CSS when I wanted to create a grid-based layout (GridLayout.jpg).

Here's what I did with marketpress (starting from line 2615):

//replaces wp_trim_excerpt in our custom loops
  function product_excerpt($excerpt, $content, $product_id) {
    $excerpt_more = ' <a class=&quot;mp_product_more_link&quot; href=&quot;' . get_permalink($product_id) . '&quot;>' .  __('More Info &raquo;', 'mp') . '</a>';
    if ($excerpt) {
      return $excerpt . $excerpt_more;
    } else {
  		$text = strip_shortcodes( $content );
  		//$text = apply_filters('the_content', $text);
  		$text = str_replace(']]>', ']]>', $text);
  		$text = strip_tags($text);
  		$excerpt_length = apply_filters('excerpt_length', 55);
  		$words = preg_split(&quot;/[\n\r\t ]+/&quot;, $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
  		if ( count($words) > $excerpt_length ) {
  			array_pop($words);
  			$text = implode(' ', $words);
  			$text = $text . $excerpt_more;
  		} else {
  			$text = implode(' ', $words);
  		}
		$pretext = '<p>';
		$posttext = '</p>';
		$text = $pretext . $text;
		$text = $text . $posttext;
  	}
  	return $text;
  }

The reason for my post is to ask if this could be addressed in a future version. For now I will have to manually edit the marketpress.php file each time I update the plugin to a new version. I presume some other users might also want to create their own CSS styles for the plugin, so keep this is mind if possible.

  • DavidM

    Hi cdutoitza,

    I'm guessing you likely saw the files already, but just in case, MarketPress provides a few ways to style and layout the MarketPress product content using shortcodes and template functions combined with any custom css you might want.

    The following files in the MarketPress package shed a bit more light on the matter:
    marketpress\marketpress-includes\template-functions.php
    marketpress\marketpress-includes\marketpress-shortcodes.php
    marketpress\marketpress-includes\themes\Themeing_MarketPress.txt

    Would these provide enough flexibility for your purpose?

    Cheers,
    David

  • Chris du Toit

    Hi David

    I am referring to the Themeing_Marketpress.txt file and I'm using an existing Marketpress CSS file as template to change and build my own using Headway Visual Editor. Once the design is complete, it will be removed from Visual Editor and saved as a CSS Theme file in the Marketpress themes folder and users can choose any of the designs. This combination is working like gangbusters (Headway and Marketpress).

    Looking at the marketpress-functions.php file, you will also see that the output of the actual product excerpt is done without an HTML element. Both the image and the excerpt are written in the same Div class (mp_product_content).

    Marketpress-functions - (line 1072):

    $content .= '<div class="mp_product_content">';
          $content .= mp_product_image( false, 'list', $post->ID );
          $content .= $mp->product_excerpt($post->post_excerpt, $post->post_content, $post->ID);
          $content .= '</div>';

    This means I can hide (or style) both elements by referencing the CSS class, or just the image since since I can target images which uses the specific class. I am however unable to reference the description/text separately using the sample below since it is not enclosed in a paragraph tag or separate class.

    /* Hide product description */
    mp_product_content p { display:none; }

    After changing the marketpress.php file as per the first post I now have <p> tags to reference and that is the only way I have found to style the page.

  • Mason

    Hiya Chris,

    With WordPress, it's standard to output the excerpt without any html - that's one of the ways it's separate from the actual content.

    Seeing what you're trying to do, why not style the entire mp_product_content class for the text portions and then target the image with a pseudo class and style accordingly?

    I can ask a developer to respond here as well, but I don't see us adding a paragraph tag into the plugin and using the above you should be able to get any desired result.

    Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.