OpenCart Community

Posted: **Wed Feb 11, 2015 7:02 pm**

Is it possible to have 3 items per line?

Posted: **Thu Feb 12, 2015 11:05 am**

You can use my Custom JavaScript extension and add code below to it:

<script>
$(function () {
	$('.col-lg-3.col-md-3.col-sm-6.col-xs-12').removeClass('col-lg-3 col-md-3').addClass('col-lg-4 col-md-4');
});
</script>

Posted: **Thu Feb 19, 2015 11:48 am**

its shows 3 products per row...
but 4th product goes on 2nd line ..
and 5th product starts from 3rd line ...

like

1 2 3
4
5 6 7
8
9 10 11

Posted: **Fri Feb 20, 2015 5:22 pm**

Could you provide your site url, so I can take a look at the problem closer?

Posted: **Sat Feb 21, 2015 3:42 am**

I've just developed a short script which you could use in your template.

First: mark your product div with some class in my case this is "myClass". Here is the code:

Code: Select all

<script type="text/javascript">
	$(document).ready(
		function() {
			$('.myClass').each( 
				function(index) {
					var divclass = 'col-lg-12 col-md-12'; 
					if (!(this.closest('#column-right')) && !(this.closest('#column-left'))) { // if we are in content area check the layout
						cols = $('#column-right, #column-left').length; // how many columns we have
						// 2 columns - left, right and content - smallest content area - 2 boxes on row
						if (cols==2) 
							divclass = 'col-lg-6 col-md-6 col-sm-12 col-xs-12';
								
						// 1 column - left or right and content - 3 boxes on row	
						if (cols==1) 	
							divclass = 'col-lg-4 col-md-4 col-sm-8 col-xs-12';	
							
						// only content - largest content area - 4 boxes on row
						if (cols==0) 
							divclass = 'col-lg-3 col-md-3 col-sm-2 col-xs-12';	
					}
					$(this).addClass(divclass);
				}
			)
		}
	);
</script>

Posted: **Sat Feb 21, 2015 11:20 pm**

Hopefully I'm not hijacking this thread but would this be something I can use in the default template or is there an easier way to fit in more than 3 products per row on the default template?

I've opened up the "/catalog/view/theme/default/stylesheet/stylesheet.css"

I thought it was somewhere here
#column-left + #content .product-layout .col-md-3 {
width: 23%;

But changing that % does nothing at least not on my site...

Any help would be appreciated.

palex wrote:I've just developed a short script which you could use in your template.

First: mark your product div with some class in my case this is "myClass". Here is the code:

Code: Select all

<script type="text/javascript">
 $(document).ready(
 function() {
 $('.myClass').each( 
 function(index) {
 var divclass = 'col-lg-12 col-md-12'; 
 if (!(this.closest('#column-right')) && !(this.closest('#column-left'))) { // if we are in content area check the layout
 cols = $('#column-right, #column-left').length; // how many columns we have
 // 2 columns - left, right and content - smallest content area - 2 boxes on row
 if (cols==2) 
 divclass = 'col-lg-6 col-md-6 col-sm-12 col-xs-12';
 
 // 1 column - left or right and content - 3 boxes on row 
 if (cols==1) 
 divclass = 'col-lg-4 col-md-4 col-sm-8 col-xs-12'; 
 
 // only content - largest content area - 4 boxes on row
 if (cols==0) 
 divclass = 'col-lg-3 col-md-3 col-sm-2 col-xs-12'; 
 }
 $(this).addClass(divclass);
 }
 )
 }
 );
</script>

OpenCart Community

How do I display 3 products per row ?

How do I display 3 products per row ?

Re: How do I display 3 products per row ?

Re: How do I display 3 products per row ?

Re: How do I display 3 products per row ?

Re: How do I display 3 products per row ?

Re: How do I display 3 products per row ?