[Feature Req] WooCommerce Bootstrap Grid #313
Comments
|
Definitely not best practice. Would probably best suited as a plugin.
|
|
What is best practice for handling woocommerce product grid in bootstrap theme? I must admit I am a bit confused what approach to take here to style products and make properly mobile responsive. I am new to the woocommerce css but know bootstrap well so my first thought is to make the grid bootstrap. How do you do it? |
|
@GuerrillaCoder The way I would go about it is to modify the WooCommerce template files. They have areas for their grid that can be edited. It depends on how much you'd like it to be Bootstrapified. If it's just the product listings it's pretty simple, but there are multiple ways of doing it. Bootstrap WooCommerce product listingsWooCommerce has a built-in grid system, which has been improved lately. This will be a very brief guide on how to make the product listings work with the Bootstrap grid instead. If you want to dig further it will be beneficial, as you can then start removing the WooCommerce styles from WordPress and use the styles already included in Bootstrap. If you choose to go further, it will mean reworking the single-product layout, and then you'll have all your billing and user templates as well. Nearly all of the work will be achieved by editing the templates provided by WooCommerce. There are some examples you can find by digging through repo's on Github, as people have already worked on this same goal. Most are outdated though. 1. Add
|
|
@ZacharyElkins would you be so kind to commit that info to the documentation project? Thanks in advance! |
|
@Thomas-A-Reinert A whole lot more can be said about replacing Woo styles with Bootstrap. Is that something we really want to add though? At that point we could be replacing it and including it in Understrap, which may be less than ideal for some users. Including it in Understrap would also add more upkeep and troubleshooting/documentation. Removing WooCommerce styling and replacing it with Bootstrap is something that the developers should learn if they want their site to launch well, in the case where they are using Bootstrap styling instead. I don’t mind either way, just asking the question. My vote would be for having it in the docs, as you suggested, if it were one or the other. |
|
Yo @ZacharyElkins. Thats not an easy one.
Sidenote: This may not be the smartest solution and I may think over it tomorrow as like on the past fridays, i´ll try to keep up ;) |
|
@Thomas-A-Reinert I've read through that a few times. Not sure if that is a clear yes, maybe, or no? I think the largest issue, beyond upkeep, will be that WooCommerce has its own stylesheets. I don't remember if they directly interfere when changing it to a Bootstrap grid or not. If they do, we will have to get rid of some of the Woo classes to avoid that issue, or directly include a function which removes the Woo styling by default. This can be done because WooCommerce has a separate stylesheet for their grid. The documentation will also have to include information on how to change the grid, or possibly adding the option into customizer, again with supporting documentation. All decisions which I don't feel comfortable making myself, as it affects a lot of people. |
|
I think the alternate shortcode method might be easiest. Then you can have a choice of using defualt grid if there is compatibility issue or bootstrap grid if you want one easy to style. Then we have to make a custom walker that has filters to allow control of the columns at different break points. Someone out there already did one but it didn't have the filters I wanted. I started writing my own back when I first made this post but it was taking a while so I just built my own loop to get the project finished. https://wordpress.org/plugins/woocommerce-twitterbootstrap/ I went over the code in detail at the time but it was a year ago so I can't really remember anything other than deciding it would be better to do it differently. I'm stuck on a demanding Magento template re-design atm but I have a Woocommerce project in my queue so if no one has done anything by time I finish I'll have another crack at doing some solution that is flexible. We could possibly make it an admin setting for default templates to use the standard grid or bootstrap grid. |
|
@GuerrillaCoder Interesting. The issue with shortcodes to generate the loop is that pagination doesn’t work out of the box. In fact getting pagination to work with shortcode loops (for Woo) is a pain. WC templates have a spot for the columns to go in, then it would just be a matter of pulling in the desired col-X-X through PHP, preferably from the customizer. We could also have the option to switch from WC grid to BS grid as well. All relatively easy to get going, not including testing and any issues that may arise. Seems a lot easier than working with an alternate shortcode, and will be easier for the user as well. Unless I’m misunderstanding what you mean. |
|
I havent looked at the code for a year so I'm just going on memory. When I
get time I'll go back over the code. I just remember coming to conclusion
that to be able to control the columns per breakpoint via standard
woocommerce filters I needed to make a tree walker but I could have been
wrong then and my memory could be wrong now lol.
I think the issue with enforcing a different grid is that a lot of plugins
edit the grid so all hooks and filters need to be kept in tact. When I am
not so slammed I will dig into the code again so I can be more specific.
…On 7 June 2018 at 04:49, ZacharyElkins ***@***.***> wrote:
@GuerrillaCoder <https://github.com/GuerrillaCoder> Interesting. The
issue with shortcodes to generate the loop is that pagination doesn’t work
out of the box. In fact getting pagination to work with shortcode loops
(for Woo) is a pain.
WC templates have a spot for the columns to go in, then it would just be a
matter of pulling in the desired col-X-X through PHP, preferably from the
customizer. We could also have the option to switch from WC grid to BS grid
as well.
Seems a lot easier than working with an alternate shortcode, and will be
easier for the user as well. Unless I’m misunderstanding what you mean.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#313 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AK6gq7mEe5QlToU_uEb4bdANGHuJiSVhks5t6KK8gaJpZM4NanNa>
.
|
The thing is that it not half as flexible as the BS grid. The BS grid is pretty ideal for a products page. For instance have 4 columns on a superwide screen, 3 on a laptop, 2 on a portrait tablet and 1 on a mobile. You can't do this with WC, and it is not designed to do that. WC wants you to select a number of columns from the customizer, and that's it. 1. Add
|
|
Assume this has been fixed by now. In case it hasn´t, please reopen this topic as I´m closing it due to the time there hasn´t been any update to it. |
I am making a WooCommerce theme using Understrap and one thing that struck me is that WooCommerce use their own grid that doesn't give any control over how columns are displayed on different viewports. Their shortcodes have a single
columnparam and then the rest is worked out by the CSS and often isn't right for where the grid is displaying to make it nice on all screens.I have been thinking about the best way to handle this and thought I might be able to make a PR out of what I come up with so thought it prudent to ask advice here first (hope that is OK),
I saw another project that overwrites all of the WooCommerce shortcodes with alternate methods that produce a bootstrap grid. I wasn't sure if this was a good approach to take so I played safe and made a copy of
class-wc-shortcodes.phpand renamed the class & shotcodes. Then I added additional fields to each method for the number of columns on each viewport and made my ownproduct_loopthat outputs a bootstrap 4 grid.I'm not sure if this is a good approach because if a user of my theme uses woocommerce normal shortcode it will output the default grid still. Overwriting all the shortcodes seems more consistent but I am wondering if that will cause compatibility issues or be harder to maintain?
Seeing as understrap is a bootstrap theme I think having option to display woocommerce products in a bootstrap grid is inline with the project. Is this something you would like to add? What are your thoughts on how best to do it?
The text was updated successfully, but these errors were encountered: