KathleenAspenns

Looking for help with WooCommerce product display

11 posts in this topic

Has anyone created a Woocommerce store with Pagelines? I'm having trouble with the grid display and am not quite sure where to turn. I tried Shoplines but it changes the appearance of my individual products (and I have that part just the way I want already). I can't find any settings in Woo to get the grid to display in a responsive manner - it just shows 2 wide no matter the screen. There do seem to be a number of plugins on Code Canyon that create grid views of products, but I'm hoping someone has some insight as to whether they will play well with PL. Thanks in advance. Example page https://floraofasia.com/product-category/flower-essence/single-flower-essence/


Share this post


Link to post
Share on other sites

No Aires, this has not been resolved - I also put in a "contact support" message on Monday morning and have gotten no reply at all.

I do appreciate you checking.


Share this post


Link to post
Share on other sites

I have tried adding the shortcode and installing the product archive customizer plugin per the WC docs you link above. Neither fixes the problem. The plugin can, if set to 5 columns, create ugly breaks and show 2 in one row, then 3 jammed together. Otherwise, no other setting makes any change. (and of course widening or narrowing the screen does nothing also)

What I am asking is, as the simpler plugins I have tried (above and also Products per Page plugin) did not work - is there a plugin that has been used successfully with PL5?

 


Share this post


Link to post
Share on other sites

By any chance are you using a child theme or have you added some custom code to your functions.php file?

Share this post


Link to post
Share on other sites

Thanks for asking Keith, but I had my programmer (who helps me with the tricky bits!) take a look at the code and nothing out of place there. I am using a child he made for me - really the only parts that have been altered are in the individual product view.

I haven't yet gotten the courage to add the code to the files and see if that works. I think more likely is I'll try the Essential Grid plugin and cross my fingers that it works. It is just so weird to not be able to fix this problem. And I have looked to see if there is an "invisible" sidebar that is taking up space. Sigh.

Edited by KathleenAspenns (see edit history)

Share this post


Link to post
Share on other sites

I added the plugin Essential Grid and it is working well for me.


Share this post


Link to post
Share on other sites

Hi Kathleen

I was working on this myself over the past few days and have it sorted on a localhost. The solution is multi stepped and does require some trial and error to get it right. What I have is a three column layout on all displays except smaller screens, have one column in these cases. 

First you need to add some filters to the functions.php file of your child theme (only attempt this if you are using a child theme

/**
* Changes the number of thumbnails per row in product galleries
*/

 // Change number or products per row to 3
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 3; // 3 products per row
	}
}
// Display 15 products per page. Goes in functions.php
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 15;' ), 20 );

You can change the 3 rows per column what ever you want. 

Next you need some CSS to size the columns. I had to keep testing different widths and margins until I found something that worked best. 

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: 32% !important;
  margin: .6%;
}

@media (max-width:860px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: 99% !important;
    margin: 0.5%
  }
}

The @media controls the size the product appears on a device with a max-width of 860px (you can change this also)

Hope this helps if you still want to achieve it. 

 

Share this post


Link to post
Share on other sites

Thanks Keith,

I appreciate your solution - looks like that would work well. I've got the grids up and running, so my problem has been solved. But good to know for future....

Thanks for your input!


Share this post


Link to post
Share on other sites

No problem. 

I knew you had gone with essential grid and got it sorted that way but though I'd share my solution for others who might be looking into this in future. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now