MarketPress related products styling issue

Hi all,

I'm not really sure I have not posted about this before (if I have, please mark as duplicate!) but I ran into a styling issue that I have encoutered before.

To style the Products grid view so that the third column does not have a right margin and aligns nicely with other content to the right, I usually append a style rule like:

.mp_grid .mp_one_tile:nth-child(3n+3) {
    margin-right: 0 !important;
}

This overrides the 20px margin on the right for each third tile in the grid. So far, so good :slight_smile:

But now the problem: this rule also applies to the grid view of Related Products because it uses the same classes. But the rule does not work as expected there!

This is caused by the fact that the div with class mp_grid not only contains mp_one_tile divs but also one div (with class mp_related_products_title) containing the "Related Products" title. Now suddenly each second tile in the grid has no right margin.

Could this be fixed in the default MarketPress templates please? That stray title div should not be inside the .mp_grid div...

Thanks :slight_smile:

  • Vinod Dalvi

    Hi @RavanH,

    Thank you for your question.

    Could this be fixed in the default MarketPress templates please? That stray title div should not be inside the .mp_grid div...

    Could you please share me the page link from your site where you are facing this issue so that i can test it?

    Also is this issue only happening when you use the above custom CSS code?

    Please advise.

    Kind Regards,
    Vinod Dalvi

  • RavanH

    Hi Vinod, thanks for responding :slight_smile:

    A product grid view example: https://m-etropolis.com/theshop/products/
    And a related products grid view: https://m-etropolis.com/theshop/products/zorn-thompson-my-mind-was-matching-what-you-were-making/

    On these pages, this style rule is used to make the right margin of every third tile in the grid collaps:

    #mp_product_list.mp_grid .mp_one_tile:nth-child(3n+3), #mp_related_products.mp_grid .mp_one_tile:nth-child(3n+4) {
        margin-right: -1%;
    }

    It would have been more logical (semantics-wise) if a simple rule like

    .mp_grid .mp_one_tile:nth-child(3n+3) {
        margin-right: -1%;
    }

    would work on both lists but because there is an extra div

    <div class="mp_related_products_title"><h4>Related Products</h4></div>

    living inside the related products grid, this logic does not apply anymore.

    Hope you can follow my explanation :slight_smile:

  • Vinod Dalvi

    Hi @RavanH,

    Thank you for your detailed reply.

    I have notified the plugin developer to change it as a feature request and i hope it will be changed in the future version of plugin.

    In the meanwhile if you want to change it then create a functions.php file in the directory wp-content/mu-plugins( Create it if not exist ) and add the following code in it. The following code will wrap the related products in the div having id as "mp_one_related_tiles" or you can change the following code however you want to.

    <?php
    
    if (!function_exists('mp_related_products')) :
    /**
     * Displays related products for the passed product id
     *
     * @param int $product_id.
     * @param bool $in_same_category Optional, whether to limit related to the same category.
     * @param bool $echo. Optional, whether to echo or return the results
     * @param int $limit. Optional The number of products we want to retrieve.
     * @param bool $simple_list Optional, whether to show the related products based on the "list_view" setting or as a simple unordered list
     * @param bool $in_same_tags Optional, whether to limit related to same tags
     */
    function mp_related_products() {
    	global $mp, $post;
    
    	$output = '';
    	$categories = $tag_list = array();
    
    	if( $mp->get_setting('related_products->show') == 0)
    		return '';
    
    	$defaults = array_merge($mp->defaults['related_products'], array(
    		'simple_list' => $mp->get_setting('related_products->simple_list'),
    		'relate_by' => $mp->get_setting('related_products->relate_by'),
    		'limit' => $mp->get_setting('related_products->show_limit'),
    	));
    
    	$args = $mp->parse_args(func_get_args(), $defaults);
    
    	if( !is_null($args['product_id']) ) {
    		$args['product_id'] = ( isset($post) && $post->post_type == 'product' ) ? $post->ID : false;
    		$product_details = get_post($args['product_id']);
    	}else{
    		$product_details = get_post($args['product_id']);
    		$args['product_id'] = ( $product_details->post_type == 'product' ) ? $post->ID : false;
    	}
    
    	if( is_null($product_details) )
    		return '';
    
    	//setup the default args
    	$query_args = array(
    		'post_type' 	 => 'product',
    		'posts_per_page' => intval($args['limit']),
    		'post__not_in' 	 => array($args['product_id']),
    		'tax_query' 	 => array(), //we'll add these later
    	);
    
    	//get the tags for this product
    	if ( 'both' == $args['relate_by'] || 'tags' == $args['relate_by'] ) {
    		$tags = get_the_terms( $args['product_id'], 'product_tag');
    
    		if ( is_array($tags) ) {
    			foreach($tags as $tag) {
    				$tag_list[] = $tag->term_id;
    			}
    
    			//add the tag taxonomy query
    			$query_args['tax_query'][] = array(
    					'taxonomy' => 'product_tag',
    					'field' => 'id',
    					'terms' => $tag_list,
    					'operator' => 'IN'
    			);
    		}
    	}
    
    	//are we limiting to only the assigned categories
    	if( 'both' == $args['relate_by'] || 'category' == $args['relate_by'] ) {
    		$product_cats = get_the_terms( $args['product_id'], 'product_category' );
    
    		if( is_array($product_cats) ) {
    			foreach($product_cats as $cat) {
    				$categories[] = $cat->term_id;
    			}
    
    			$query_args['tax_query'][] = array(
    					'taxonomy' => 'product_category',
    					'field' => 'id',
    					'terms' => $categories,
    					'operator' => 'IN'
    			);
    		}
    	}
    
    	//we only want to run the query if we have categories or tags to look for.
    	if ( count($tag_list) > 0 || count($categories) > 0 ) {
    		//make the query
    		$related_query = new WP_Query($query_args);
    
    		//how are we formatting the output
    		if( $args['simple_list'] ) {
    
    			$output = '<div id="mp_related_products">';
    			$output .= '<div class="mp_related_products_title"><h4>' . apply_filters( 'mp_related_products_title', __('Related Products','mp') ) . '</h4></div>';
    			if( $related_query->post_count ) {
    				$list = '<div id="mp_one_related_tiles"><ul class="mp_related_products_list">%s</ul></div>';
    				$items = '';
    				foreach($related_query->posts as $product) {
    					$items .= '<li class="mp_related_products_list_item"><a href="'.get_permalink($product->ID).'">'.$product->post_title.'</a></li>';
    				}
    				$output .= sprintf($list, $items);
    			}else{
    				$output .= '<div class="mp_related_products_title"><h4>'. apply_filters( 'mp_related_products_title_none', __('No Related Products','mp') ) . '</h4></div>';
    			}
    
    			$output .= '</div>';
    		} else {
    			//we'll use the $mp settings and functions
    			$layout_type = $mp->get_setting('list_view');
    			$output = '<div id="mp_related_products" class="mp_' . $layout_type . '">';
    			//do we have posts?
    			if( $related_query->post_count ) {
    				$output .= '<div class="mp_related_products_title"><h4>' . apply_filters( 'mp_related_products_title', __('Related Products','mp') ) . '</h4></div>';
    				$temp = $layout_type == 'grid' ? _mp_products_html_grid($related_query) : _mp_products_html_list($related_query);
    				$output .= '<div id="mp_one_related_tiles">'. $temp .'</div>';
    			}else{
    				$output .= '<div class="mp_related_products_title"><h4>'. apply_filters( 'mp_related_products_title_none', __('No Related Products','mp') ) . '</h4></div>';
    			}
    
    			$output .= '</div>';
    		}
    	}
    
    	$output = apply_filters('mp_related_products', $output, $args);
    
    	//how are we sending back the data
    	if($args['echo']) {
    		echo $output;
    	}else{
    		return $output;
    	}
    }
    endif;

    Cheers,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.