5 points
Community rank #7996
dl.overly
NewbieJust Getting Started
MemberLikes (0)
Using the Marketpress plugin on my theme. The products category page put everything in a list. I want it to be a gallery grid of thumbnails. I've cruised through many questions and answers for this in here and have not seen the solution.
There was one that said to create a new theme in the marketpress-includes/themes folder. So, I copied the classic, renamed it and am trying to edit it to do this. But I'm not a code master. In that theme where is the section about the product list page and how do I change it to make that page load in a grid format instead of the list format?
Some answers say to use the gridmarket theme. Well, that would mean to completely edit that theme to look like the theme I already have. Too much work.
Is it possible to just add code to my changed classic theme in the marketpress plugin to make the product pages open in a grid format without all the product text info? If so, what code would do that?
And I'm curious, why wasn't the plugin made so that the product pages would be in a grid to start with? Isn't that what most people want?
Thank you so much for your assistance! Other than this grid issue, this looks to be the most fantastic e-commerce plugin out there.
5 pointsCommunity rank #7996NewbieJust Getting Started
Member
(joined March 2012)
Likes (0)
I'd love to use that short code [mp_product_grid]. But how do I get it on the products page. It's not a page that I can open in the wp editor. It appears to be a page that gets generated. Say I have category of items called shoes. The page that is generated is store/products/category/shoes.
I want that shoes page to be a grid of thumbnails. So where do I put that short code to make that happen? Do I insert it somewhere in the theme code, what do I do with it?
On my "store" page, I'm creating a category gallery by just inserting thumbnail images to represent the various categories of products and assigning them links to go to those generated, phantom pages like the "shoes" example.
I hope what I'm describing is making sense. I keep reading how great that plug in with short code is, but it's not clear to me at all how to use on the page I want.
5 pointsCommunity rank #7996NewbieJust Getting Started
Member
(joined March 2012)
Likes (0)
Hi Kimberly,
That seems to be my problem. I can't find the text editor for that page. I don't know how to make this clearer. Marketpress seems to create the url for these pages: url/store/products/category/shoes/specific-shoe. In that url the only pages that I can open in the editor is Store (found in the Pages section) and the final single item, such as specific-shoe (found on the Products page), where it goes after I create it.
All the pages in between in that url (products/category/shoes) are phantom, or generated by some code, and don't exist in the Pages section. I want to put the code in the page, for example, shoes, that contains the various items in that category, but it's one of the phantom pages. How can I open a page in the editor when it's not concrete and I can't find it. I only see them on the website as I click through the product and I see the link in the url for the page, I can't find those three pages in the backend of the website.
You say go to the text editor (do you mean appearance > editor), not the Pages/Posts editor? If so, which page would be the shoes page?
page template, content, content-attachment, content-gallery, content-page, content-single, etc.
I'm so not trying to be difficult. I'm getting frustrated. Where are the physical pages for everything in that link so I can add that short code to the shoes page?
4331 pointsCommunity rank #15Supreme DeityWPMU DEV StaffLifetime member
Code Monkey
(joined June 2011)
Likes (0)
Hi Dee,
Here is what I would do, create a page and call it say shoes, (create page via the add new page in the wordpress menu).
Make sure your products you want to display on the shoe page are in the correct category.
Then click on the edit page for the page you just created, and add [mp_grid_product paginate="true" page="1" per_page="10" order_by="price" order="DESC" category="shoes"]
This is what I would do, you don't have to have all that other stuff, you could just do
[mp_grid_product category="shoes"]
Let me know how that works for you, if it would help, I can attach some screenshots :)
5 pointsCommunity rank #7996NewbieJust Getting Started
Member
(joined March 2012)
Likes (0)
Hi,
No, no grid. Came out looking just like the other page. I'm playing with the code method suggested by the ThePath. It involves adding another plug in, which doesn't thrill me. But we'll see what happens.
Also on that thread, scroll down about halfway, as there is an update which fixes some issue with some themes, I'm not sure if the first one is the same.
Hi Dee, you wouldnt actually need to add another plugin when you use this method for products as you can link into the featured image.
I havent used Marketpress for a while but Im sure last time I did I created a custom product template. If you do this you can add the shortcode either in the default WP text editor or you can add it directly into the code by using the do_shortcode function
4 pointsCommunity rank #8921NewbieJust Getting Started
Member
(joined March 2012)
Likes (0)
This has all been soo helpful for me, as I have a similar thing I'm trying to do. The grid plugin is working great!
I just have one question: how do I use that shortcode to display a grid of my categories? And sub-categories? I'm assuming it's just a matter of adding a little piece to that shortcode?
This what I would do, create a styled table and lay your get the link to the categoires then you can display them in your self styled grid table, if that makes sense?
I just deactivate the grid plugin and stole a little of ccs out of frame market and put it for "product list view" in my theme style sheet and voila! Everything is in grid view.
You have to play a little bit with the css to get it good for your theme.
I put some min-height in it to prevent that the add to cart buttons are jumping and with the width to manage the amount of products on a row.
Oh nevermind...I see that you just have to set the excerpts to "off." Since you're into beading, you may enjoy my wife's website. She designs beaded jewelry: http://www.EmilyKatherine.com
Just to give some feedback.
The whole world is now working with grid view, look at all kind of tablets, smartphones and even the new windows will be in gridview!
Really, list view is out :)
So, don't be old fashion and put effort in it that the next update of marketpress has gridview by default??
72 pointsCommunity rank #758El PresidenteJust Getting Started
Member
(joined January 2011)
Likes (0)
I've read through this.. but it never says where to paste the code.. I have all my products loaded ...all pages are already created....where would I paste this to turn it into a grid now?
72 pointsCommunity rank #758El PresidenteJust Getting Started
Member
(joined January 2011)
Likes (0)
"should" your code work for all themes? I'm using genesis theme with scribble child theme.. I know you can't say for sure, but it should, right? In other words it's not specific for a certain theme?
I tested on several themes, and sometimes you have to adjust a little bit the css. It is just css for the product list of Maket Press and it will do nothing with the code of a theme.
Go to Google ,search for firebug and install it.
On your site right click on something what you want to change. In this case the grid view.
In the window in the bottom, scroll till you see something what you just putted in your style sheet. On the right side you see the css for that element and the place where it is stored.
Now start to play with the settings, you only change it on the screen not in the program. When you refresh the browser, everything is normal again and if you like your settings, go to your style sheet and change it.
No rocket science ... just woman logic :)
And off course all those men here will have other solutions and then I'm learning again. :)
72 pointsCommunity rank #758El PresidenteJust Getting Started
Member
(joined January 2011)
Likes (0)
funny, I have this and have looked.. but not for the css section.. I didnt know that it changed on the screen so that you could "preview" the change.. thats super cool!
21657 pointsCommunity rank #0Supreme DeityWPMU DEV StaffLifetime member
Support Kangaroo
(joined March 2011)
Likes (0)
Greetings,
It appears this particular topic is now resolved/closed, if you need any further assistance please let us know.
If it wasn't resolved, or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the 'Mark as Not Resolved (re-open)' box below the post area (or else we'll miss it!)
Responses (48)
Code Monkey (joined June 2011) Likes (0)
Hey there,
Download the Marketpress Grid layout shortcode from here http://premium.wpmudev.org/forums/topic/3-free-add-ons-for-marketpress
It's works perfectly, if you need help setting it up let me know :)
Thanks!
EDIT: Just upload and activate like a normal plugin, then use this shortcode on a page
[mp_product_grid]Ach Crivvens (joined August 2011) Likes (0)
Hey Dee, thanks for being a WPMU Member and for the post!
You can also gridify your categories by employing the techniques discussed on this thread: http://premium.wpmudev.org/forums/topic/category-images
Hope you get it sorted, if not let us know!
Im going to mark this as resolved for now as coding monkey has given you an excellent solution. If you get stuck though just reopen the thread.
Member (joined March 2012) Likes (0)
I'd love to use that short code [mp_product_grid]. But how do I get it on the products page. It's not a page that I can open in the wp editor. It appears to be a page that gets generated. Say I have category of items called shoes. The page that is generated is store/products/category/shoes.
I want that shoes page to be a grid of thumbnails. So where do I put that short code to make that happen? Do I insert it somewhere in the theme code, what do I do with it?
On my "store" page, I'm creating a category gallery by just inserting thumbnail images to represent the various categories of products and assigning them links to go to those generated, phantom pages like the "shoes" example.
I hope what I'm describing is making sense. I keep reading how great that plug in with short code is, but it's not clear to me at all how to use on the page I want.
Thanks for your continued help and patience!
Dee
People Person (joined February 2012) Likes (0)
Dee,
You've got some great helpers here, good suggestions :)
You just need to place the product code in the text editor portion of any page. It will automatically generate the grid.
Best,
Kimberly
Member (joined March 2012) Likes (0)
Hi Kimberly,
That seems to be my problem. I can't find the text editor for that page. I don't know how to make this clearer. Marketpress seems to create the url for these pages: url/store/products/category/shoes/specific-shoe. In that url the only pages that I can open in the editor is Store (found in the Pages section) and the final single item, such as specific-shoe (found on the Products page), where it goes after I create it.
All the pages in between in that url (products/category/shoes) are phantom, or generated by some code, and don't exist in the Pages section. I want to put the code in the page, for example, shoes, that contains the various items in that category, but it's one of the phantom pages. How can I open a page in the editor when it's not concrete and I can't find it. I only see them on the website as I click through the product and I see the link in the url for the page, I can't find those three pages in the backend of the website.
You say go to the text editor (do you mean appearance > editor), not the Pages/Posts editor? If so, which page would be the shoes page?
page template, content, content-attachment, content-gallery, content-page, content-single, etc.
I'm so not trying to be difficult. I'm getting frustrated. Where are the physical pages for everything in that link so I can add that short code to the shoes page?
Thanks!
Dee
Code Monkey (joined June 2011) Likes (0)
Hi Dee,
Here is what I would do, create a page and call it say shoes, (create page via the add new page in the wordpress menu).
Make sure your products you want to display on the shoe page are in the correct category.
Then click on the edit page for the page you just created, and add
[mp_grid_product paginate="true" page="1" per_page="10" order_by="price" order="DESC" category="shoes"]This is what I would do, you don't have to have all that other stuff, you could just do
[mp_grid_product category="shoes"]Let me know how that works for you, if it would help, I can attach some screenshots :)
Thanks!
Member (joined March 2012) Likes (0)
Hi,
No, no grid. Came out looking just like the other page. I'm playing with the code method suggested by the ThePath. It involves adding another plug in, which doesn't thrill me. But we'll see what happens.
Thanks,
Dee
Code Monkey (joined June 2011) Likes (0)
Hi Dee,
Give me a few minutes and I'll test it out, on one of my live sites for you :)
Kind Regards
Coding-Monkey
Code Monkey (joined June 2011) Likes (0)
Hi Dee,
Please see this http://www.no1retroshop.co.uk/test-page/ (please note this page will be removed tomorrow at some point).
This is the code I used for the shortcode.
[mp_product_grid paginate="true" page="1" per_page="10" category="shoes"]Copy and paste that code (as long as your category is called shoes, and try it and let me know.
Just to confirm you did download the product grid from this url http://premium.wpmudev.org/forums/topic/3-free-add-ons-for-marketpress ? And upload and activate?
Also on that thread, scroll down about halfway, as there is an update which fixes some issue with some themes, I'm not sure if the first one is the same.
Let me know how that goes for you.
Thanks.
Kind Regards
Code-Monkey
Ach Crivvens (joined August 2011) Likes (0)
Hi Dee, you wouldnt actually need to add another plugin when you use this method for products as you can link into the featured image.
I havent used Marketpress for a while but Im sure last time I did I created a custom product template. If you do this you can add the shortcode either in the default WP text editor or you can add it directly into the code by using the do_shortcode function
http://codex.wordpress.org/Function_Reference/do_shortcode
Yeh just galncing over your other posts, you wont get an exact page for each product i.e. url/store/products/category/shoes/specific-shoe
Its just an overall product template.
Weird that code monkeys suggestion isnt working...it should.
I will see if you have made any progress on this tomorrow.
Code Monkey (joined June 2011) Likes (0)
Hi Dee,
Just checking in, to see how it's going?
Thanks!
Kind Regards
Coding-Monkey
Member (joined March 2012) Likes (0)
This has all been soo helpful for me, as I have a similar thing I'm trying to do. The grid plugin is working great!
I just have one question: how do I use that shortcode to display a grid of my categories? And sub-categories? I'm assuming it's just a matter of adding a little piece to that shortcode?
Member (joined October 2007) Likes (0)
how about adding the [mp_product_grid] short code into the Marketpress plugin itself thus eliminating the Marketpress Grid Short code plugin?
Code Monkey (joined June 2011) Likes (0)
@Jessilicious
That isn't over easy to do, you could do by using the techniques discussed in this thread which @ThePath linked to further up the page,
here's that link http://premium.wpmudev.org/forums/topic/category-images
This what I would do, create a styled table and lay your get the link to the categoires then you can display them in your self styled grid table, if that makes sense?
Let me know how that works for you :)
Thanks!
Kind Regards
Coding-Monkey
Member (joined March 2012) Likes (0)
@Coding-Monkey
Gotcha! I'll give that a shot. Thanks for the suggestion! :)
Code Monkey (joined June 2011) Likes (0)
@Jessilicious
Let me know if you need any help, Just re-read my last post and I had quite a few grammer and spelling errors, mabye I should stop typing so quick :-)
Kind Regards
Coding-Monkey
Member (joined April 2012) Likes (0)
Even after installing the grid plugin and putting [mp_product_grid] on the page, it still comes up as a list. Any suggestions?
Member (joined April 2012) Likes (0)
Reopening topic because it doesn't seem to solve the issue.
Member (joined June 2012) Likes (0)
Hi Jag004
I just deactivate the grid plugin and stole a little of ccs out of frame market and put it for "product list view" in my theme style sheet and voila! Everything is in grid view.
Just take a look at my site: http://ellad2.com
When you like it I will give you the css
Ella
Member (joined April 2012) Likes (0)
Hi Ella,
Thanks for your reply. I (Jake Greenberg) just "liked" your facebook page. Can you please send the css?
Thank you!
Member (joined June 2012) Likes (0)
Hi Jag004
You have to play a little bit with the css to get it good for your theme.
I put some min-height in it to prevent that the add to cart buttons are jumping and with the width to manage the amount of products on a row.
Hope it will work for you
Ella
#content #mp_product_list .product{
border:3px solid #E7E6E4;
float:left;
overflow:hidden;
min-height:255px;
margin-bottom:10px;
margin-right: 1px;
margin-left: 15px;
margin-top:0px;
padding:1px;
width:115px;
}
#content .div.mp_product_meta{
clear:both;
background:none;
padding:0;
margin-right:0;
margin-top:0;
}
#content h3.mp_product_name {
padding-bottom:5px;
margin: 0;
min-height:57px;
margin-left:5px;
margin-top:3px;
font-size: 13px;
}
#content .input.mp_button_addcart{
margin:0 0px 10px;
}
#
content span.mp_product_price{
font-size:14px;
Member (joined June 2012) Likes (0)
sorry, put it at the bottom of your style.css
ella
Member (joined April 2012) Likes (0)
Thank you! How did you get the descriptions to only show on the individual product page and not on the grid?
Member (joined April 2012) Likes (0)
Oh nevermind...I see that you just have to set the excerpts to "off." Since you're into beading, you may enjoy my wife's website. She designs beaded jewelry: http://www.EmilyKatherine.com
Member (joined June 2012) Likes (0)
Wow! beauties!
I just joined the contest battle of the beadsmith http://www.facebook.com/groups/274053372682035/
Just tell it to your wife :)
Who could tell that I find here something about beading...
Ella
People Person (joined February 2012) Likes (0)
Wow! Glad you guys worked this one out, we didn't see you on this old ticket! :)
Just glad you're all sorted!
Member (joined June 2012) Likes (0)
Hi Kimberly,
Just to give some feedback.
The whole world is now working with grid view, look at all kind of tablets, smartphones and even the new windows will be in gridview!
Really, list view is out :)
So, don't be old fashion and put effort in it that the next update of marketpress has gridview by default??
Good luck with that.
Ella
Member (joined June 2012) Likes (1)Liked by: 
Hi all,
This is even better:
With ftp download: wp-content/plugins/marketpress/marketpress-includes/themes/icons.css
Open icons.css with notepad ++ ( when you don't have it... it is really a great editor. I can even work with it)
Put at the end of the file this css
#content #mp_product_list .product{
border:3px solid #E7E6E4;
float:left;
overflow:hidden;
min-height:255px;
margin-bottom:10px;
margin-right: 1px;
margin-left: 15px;
margin-top:0px;
padding:1px;
width:115px;
}
#content .div.mp_product_meta{
clear:both;
background:none;
padding:0;
margin-right:0;
margin-top:0;
}
#content h3.mp_product_name {
padding-bottom:5px;
margin: 0;
min-height:57px;
margin-left:5px;
margin-top:3px;
font-size: 13px;
}
#content .input.mp_button_addcart{
margin:0 0px 10px;
}
#content span.mp_product_price{
font-size:14px;
}
Save it as grid.css and upload it back to wp-content/plugins/marketpress/marketpress-includes/themes/
When you look in your store settings->presentation you can choose for gridview.
switch off excerpts and voila. categories are now also in grid view.
Works great with the standard Wordpress theme
Ella
Member (joined August 2010) Likes (0)
Thanks Ella its exactly what I came to the forum looking for today. Am loving grid view!
:-)
Member (joined January 2011) Likes (0)
I've read through this.. but it never says where to paste the code.. I have all my products loaded ...all pages are already created....where would I paste this to turn it into a grid now?
http://www.scentswarmers.com/buy/scentsy/products/plugin-warmers
Member (joined January 2011) Likes (0)
reopening....
Member (joined June 2012) Likes (0)
Hi,
Put the code in your style.css of your theme.
When you go with ftp to your site:
wp-content/themes/ "active theme'/ style.css Open the style sheet and put on the end of the style sheet. save it and put it back in your theme folder.
When you don't use ftp or something then you can do it like on the picture..
Good luck :)
Ella
People Person (joined February 2012) Likes (0)
Thanks @Ella!
And for reference, our childtheme called "gridmarket" ships with the Framemarket theme :)
It's grid goodness :)
@tristajensen please let us know how you make out!
Member (joined January 2011) Likes (0)
so the code you have above, add it to the style.css of my theme? and I wont use the shortcode?
Member (joined June 2012) Likes (1)Liked by: 
Correct!
All your product and categoriy listing will be in grid view, there is one "but"... the side bar widget for categories will also be in gridview.
And when you use a shortcode ..... also in grid. :)
Ella
Member (joined January 2011) Likes (0)
"should" your code work for all themes? I'm using genesis theme with scribble child theme.. I know you can't say for sure, but it should, right? In other words it's not specific for a certain theme?
Member (joined June 2012) Likes (0)
I tested on several themes, and sometimes you have to adjust a little bit the css. It is just css for the product list of Maket Press and it will do nothing with the code of a theme.
Ella.
Member (joined January 2011) Likes (0)
http://www.scentswarmers.com/buy/scentsy/products/plugin-warmers
where is the section to make only 3 in a row?
Member (joined June 2012) Likes (0)
just turn it on. then I will take a look
Ella
Member (joined January 2011) Likes (0)
it's on: http://www.scentswarmers.com/buy/scentsy/products/plugin-warmers
Member (joined June 2012) Likes (0)
On line 2081 from your style.css put the widht on 180
border: 3px solid #E7E6E4;
float: left;
overflow: hidden;
margin-bottom: 10px;
margin-right: 1px;
margin-left: 15px;
margin-top: 0px;
padding: 1px;
width: 180px;
Member (joined January 2011) Likes (0)
oh, I want to reach through this screen and hug your neck!!!! thank you soooo much! Looks awesome !!!! :)
Member (joined June 2012) Likes (0)
Dear,
Just learn to play with css, totally not difficult.
what browser are you using?
Member (joined January 2011) Likes (0)
I have chrome and firefox both up ... I work for Fox IT, but not familiar with code... I'm trying though.
Member (joined June 2012) Likes (0)
Firefox is great.
Go to Google ,search for firebug and install it.
On your site right click on something what you want to change. In this case the grid view.
In the window in the bottom, scroll till you see something what you just putted in your style sheet. On the right side you see the css for that element and the place where it is stored.
Now start to play with the settings, you only change it on the screen not in the program. When you refresh the browser, everything is normal again and if you like your settings, go to your style sheet and change it.
No rocket science ... just woman logic :)
And off course all those men here will have other solutions and then I'm learning again. :)
Ella
Member (joined January 2011) Likes (0)
funny, I have this and have looked.. but not for the css section.. I didnt know that it changed on the screen so that you could "preview" the change.. thats super cool!
thank you again for all your help!
Support Kangaroo (joined March 2011) Likes (0)
Greetings,
It appears this particular topic is now resolved/closed, if you need any further assistance please let us know.
If it wasn't resolved, or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the 'Mark as Not Resolved (re-open)' box below the post area (or else we'll miss it!)
Cheers, Joe :-)
Member (joined August 2012) Likes (0)
Ella your the best!
Become a member