Tagged: columns, Product Grid, woocommerce
-
AuthorPosts
-
November 21, 2014 at 8:56 pm #355549
Hello,
Is there any way to set the number of columns to 1 on the WooCommerce Product Slider that is now included in Enfold 3.0? I would like to display it in a 1/4 width column on the right of my homepage, but the 2 column minimum is too cramped.
Thanks,
GregNovember 22, 2014 at 7:17 pm #355970Hi nesaw!
Open up /enfold/config-templatebuilder/avia-shortcodes/productslider.php and change lines 63 – 67 from this.
"subtype" => array( __('2 Columns', 'avia_framework' )=>'2', __('3 Columns', 'avia_framework' )=>'3', __('4 Columns', 'avia_framework' )=>'4', __('5 Columns', 'avia_framework' )=>'5', )),
To this.
"subtype" => array( __('1 Columns', 'avia_framework' )=>'1', __('2 Columns', 'avia_framework' )=>'2', __('3 Columns', 'avia_framework' )=>'3', __('4 Columns', 'avia_framework' )=>'4', __('5 Columns', 'avia_framework' )=>'5', )),
And then add this to your custom CSS.
.av_one_fourth .template-shop div .products .product { width: 100%; }
Best regards,
ElliottMay 8, 2016 at 10:29 am #628838Ich habe die obige Lösung mit dem Produkt raster ebenfalls gemacht, und es funktioniert. Wie kann ich das ins Enfold Child Template speichern?
May 10, 2016 at 10:04 am #629774Hi,
I’m sorry but you cannot override this template in a child theme. It’s possible but the following solution is not update-proof: http://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/
Best regards,
IsmaelJuly 2, 2016 at 7:31 pm #656135Can I make a request for this change to be rolled into the base as it can’t be put in a child theme?
Thanks,
Ian
July 2, 2016 at 8:15 pm #656141Hi!
You can always do any type of request and Kriesi takes them in consideration:
Thanks a lot for using enfold!
Best regards,
BasilisJuly 3, 2016 at 1:01 am #656177Thanks, done.
July 4, 2016 at 2:47 pm #656596May 9, 2017 at 10:19 am #790109I have this same question. Is there any workaround?
May 10, 2017 at 7:37 am #790880Hi,
I’m sorry but a workaround will require a certain script that we can’t provide here. Please hire a freelance developer or follow the suggestion above.
Best regards,
IsmaeldMarch 27, 2018 at 10:45 pm #933912I’d like to hook into this very old thread:
I also want to show the product grid with 1 column only. While I can manage this via CSS, it is painful to do for all responsive sizes.
This code (provided by Woocommerce) should actually take care of it, however, as soon as I add it to functions.php, the websites crashes with HTTP ERROR 500:
// Change number or products per row to 1 add_filter('loop_shop_columns', 'loop_columns'); if (!function_exists('loop_columns')) { function loop_columns() { return 1; // 1 products per row }
Is this because the way how Enfold deals with Woocommerce? Is there a way to change this code to make it “Enfold-compatible”?
At the moment I use the solution as described above, but it is of course not optimal…
Thanks!
KlausMarch 28, 2018 at 12:48 pm #934235Hi,
While I can manage this via CSS, it is painful to do for all responsive sizes.
I don’t think you’ll be needing a lot of css modifications after setting it to single column. It won’t require a lot of adjustment on mobile view. The filter above breaks because a curly brace is missing.
// Change number or products per row to 1 add_filter('loop_shop_columns', 'loop_columns'); if (!function_exists('loop_columns')) { function loop_columns() { return 1; // 1 products per row } }
This filter will only affect the default woocommerce loop or column settings.
Best regards,
IsmaelMarch 28, 2018 at 1:39 pm #934277Thanks a lot Ismael! Embarrassing to oversee a brace, but I copied this 1:1 from Github, where it is also missing. Well… ;)
Strange is, that at 767px width suddenly 2 columns are shown again, at 479px back to one column, although I added this filter now, AND the Enfold solution described above.
But I do not want to bother you with this. I need the descriptions on the right instead of below, anyhow, so I need to do via CSS. Looks already pretty ok anyway, only for very small smartphone screens I need to try to get the view centered, instead of left aligned. But this is my part to do…
Best regards,
KlausMarch 28, 2018 at 2:00 pm #934283Hi,
No problem. Please open a new thread if in case you need help. Thank you for using Enfold. :)
Best regards,
IsmaelAugust 3, 2019 at 1:25 pm #1124356I have try to set the number of columns to 1 on the WooCommerce Product Slide with >
"subtype" => array( __('1 Columns', 'avia_framework' )=>'1', __('2 Columns', 'avia_framework' )=>'2', __('3 Columns', 'avia_framework' )=>'3', __('4 Columns', 'avia_framework' )=>'4', __('5 Columns', 'avia_framework' )=>'5', )),
but that breaks my website!
I need to set the number of columns to 1 or show the smaller product like the Otto.de site.(on mobile)
August 4, 2019 at 3:47 pm #1124538Hi mjavidnikoo,
Could you please attach a mockup of what you’re trying to achieve?
Can you show us what you’ve got so far?
Best regards,
VictoriaDecember 10, 2019 at 1:03 am #1164250Victoria,
Not sure if the above fix works. Can you confirm the correct approach to configuring only 1 column in a Product Slider? I simply need the “All Access” product to occupy the whole 1/2 section. Link below
December 10, 2019 at 5:58 pm #1164533Hi willjepson,
https://cl.ly/28fcaf91198e Here is what I am seeing. What do you need it to look like?
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:1024x){ #top .avia-content-slider-inner .slide-entry-wrap.products { min-height: 750px; } .shop_columns_2 .products .product { width: 100%; } }
If you need further assistance please let us know.
Best regards,
VictoriaDecember 10, 2019 at 10:28 pm #1164646That woked perfectly. The product now occupies the whole 1/2 column. Thank you.
December 10, 2019 at 11:06 pm #1164660Hey willjepson,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan ShannonDecember 11, 2019 at 5:58 pm #1164907Team,
I spoke too soon. This only works on an Edge browser. .It does not work on Internet Explorer, Firefox, and Chrome.
December 11, 2019 at 6:48 pm #1164945Hi willjepson,
Could you please clear the cache, check again and get back to us.
Best regards,
VictoriaDecember 11, 2019 at 6:59 pm #1164952I cleared cache yesterday and tried on 2 other computers/networks.
December 12, 2019 at 9:35 pm #1165343Hi,
And everything is working as should?
Best regards,
BasilisDecember 13, 2019 at 4:27 pm #1165576This only works on an Edge browser. .It does not work on Internet Explorer, Firefox, and Chrome.
December 18, 2019 at 3:50 am #1167079Hi,
Sorry for the delay. We can’t access the browser inspector or the context menu in your site. Did you block or disable it? Please enable it back so that we can inspect the elements.
Best regards,
IsmaelDecember 18, 2019 at 5:14 am #1167087I disabled WP Content Protect. It is now ready for inspect element.
December 20, 2019 at 7:33 am #1168050Hi,
Thank you for following up.
This css code should adjust the width of the product item in that particular page.
.page-id-3560 .shop_columns_2 .products .product { width: 100% !important; }
Please don’t forget to toggle the Performance > File Compression settings after adding the code.
Best regards,
IsmaelJanuary 28, 2020 at 7:13 pm #1179144How can I center the 1 column so that 1 product shows in the middle of the page on desktop?
January 29, 2020 at 12:14 pm #1179372Hi,
@tiffanytnttobol: Please create a new thread/ticket and provide the necessary details in the private field so that we can check the elements, and make sure that the site contains the latest version of the theme, v4.5.7.Best regards,
Ismael -
AuthorPosts
- The topic ‘WooCommerce Product Slider – Set Number of Columns to 1?’ is closed to new replies.