Custom grid - by Rashkoff - on WordPress WooCommerce support

This topic has 34 replies, 3 voices, and was last updated 4 years, 7 months ago ago by Olga Barlow

  • Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 1, 2020 at 22:31

    Hello
    I’m working on custom grid for main categories view in global site.
    When you select only list or only grid view and have custom template there’s no different of the view. (this not change for me because I will use only list view)
    The main problem is on mobile. If you select to list 1 item per row (Products Per Row On Category Page) in mobile they are always 2 product per row.
    Also when you build the grid there’s very few option to optimize the grid for mobile. (also working with custom css)
    Will be a good solution to make the choice separate custom grid template for desktop/tablet (screens over 1000 px) and have another template for small screens like mobile.
    Also, I need to insert only the tax price separately and there’s no option for this.
    Thanks

    33 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 2, 2020 at 12:40

    Hello,

    Right now there is no possibility to use different grid templates on different devices.
    Products per row on mobile can be changed by custom CSS code. Provide URL, so we can take a closer look.
    Please describe the desired result in more detail + provide temporary wp-admin access.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 4, 2020 at 00:11

    Hello
    I’m working fir few days on custom grids and I discover some bugs and have some requests

    1.
    The main issue I have is how to make list/grid custom. When you pick a custom grid the option list/grid vanish form the front-end. In admin is enable. Also with yours two included custom grids for the theme. If I choose the default grid – list/grid mode appears correctly.
    How can I solve this?

    2.
    Second issue is with the custom taxonomy like brand
    I put in options grid with 1 column and in front not applying in brand view. Only category.
    Please check the links in private area.

    Here’s some simple ideas what can be included in theme personalize
    User can make custom grid and can assign different grid for list view and for grid view.
    Also make option for mobile and desktop grid (this can be done also with css)

    In grid constructor is missing the stock option to be display in product grid. Very useful.
    Image can be insert only static. Can’t make slider image like in normal default grid.

    In shop home page view when you put the option to view top categories the option for the columns apply also to other section to woocommerce. Should be nice to have separate view option only for the home shop page

    Thanks

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 4, 2020 at 20:39

    Hello,

    Thanks for your feedback, this is actually the only piece of constructive feedback we have received so far on these changes we have made for the custom product grid! So thank you.

    1) Your idea to allow users to choose the separate layouts for grid and list is a good idea and I’ll pass it to our developers. Probably we’ll improve it in one of the updates or maybe create our own builder instead of using the WPBakery option. This question will be discussed.

    2) Provide us with a temporary WP Dashboard and FTP access to your site to check brand page issue in more detail and fix it.

    3) “missing the stock option” – are you talking about out of stock label or you want to show for example “32 in stock” below the title or something?

    4) “Slider image” – feedback will be considered and discussed.

    5) You can manage the number of columns at the shop page in Theme Options > WooCommerce > Product catalog at the same time you can change the number of columns at the category pages at Theme Options > WooCommerce > Shop > Shop page layout > http://prntscr.com/rt2zzq

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 6, 2020 at 14:04

    Hello,

    Thanks for the reply. In the last days I dig a lot for this options. The grid/list view and all info is very important for good selling results.

    1. In the actual state I have a custom grid witch looks fine. The problem is the toggle list/grid vanish with the custom grid selection.
    Is it possible to be visible this option also with custom grid?
    then the layout can be done targeting the class’ products-list and products-grid
    Will be the best, like I wrote in my first post, to have different constructor for list and for grid. (simpler for user who don’t know well css and targeting)

    Another big problems are the buttons in WPbakery custom grid. In this moment (last version) here’s the things which are not completely functional:
    – buttons orders is not functional
    – all styling is not functions (backgrounds, padding, colors…)
    – the whist button use the same css class like the native plugin. When you have the option in control panel of YITH to put the with button in loop and your buttons are on only with cart selection, the button is echo doubled. You should use different implementation to put the wish button in custom grid.

    2. in private area

    3. “missing the stock option” – have a module in custom grid where to display the woocommerce stock info (in my site I have the option stock / not in stock without counter – this is handle in woo admin area)

    4. – ok

    5. – I think you have a bug here, but I should check deeper. Have strange layout only with some combination of options.

    Future request: Labels – will be useful the have much controls of labels and have option to make a custom labels and group the product with this labels in tag. Maybe you can use tag for custom labels, because they have also the possibility for image directly in wp core.

    To sum up: my “urgent” needs are:
    – make visible list/grid toggle when in use custom grid.
    – fix buttons module in custom grid builder.

    Thanks

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 6, 2020 at 16:26

    Hello,

    1) I have passed this request to our developers and they will try to implement such option in one of the next updates but I can’t tell you in which one because we have other scheduled features that should be implemented.
    a) buttons orders – don’t see problem with the order, we tried to change it and it works https://gyazo.com/d2e0a2597d9d86e69679686b1b85a9bb
    b) Styling – don’t see issues with our options http://prntscr.com/ru5ez6 , but your custom http://prntscr.com/ru561d causes the style issues
    c) We use WooCommerce hooks and YITH Wishlist functions to display cart and wishlist, we can’t change the classes. There is no need to enable wishlist for loop in the YITH Wishlist settings if you use the custom grid.

    2) Brands page inherits the layout of the shop page. You set 4 products per row in the WooCommerce settings that’s why you got 4 products per row at the brand page. We’ll add option to manage number of products per row for the brand page in the next theme update.

    3) Ok, added to future features list.

    5) If you found combination that causes issue – contact us and provide link to page with the problem.

    6) Use additional plugins if you need to implement advanced module for the product labels. We did not get a lot of requests about this and many of our customers used third-party plugins, so we are not sure if there is any need to develop this from scratch if the user just could use a plugin.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 14, 2020 at 18:48

    Hello,

    I want to ask and report some bugs

    Is it possible to have somehow the toggle list/grid button with custom grid template? The option will be handle with targeting in css

    Bugs:

    !! [1] After adding some static block in menu (Uber menu) and then using pagination and go forward to additional pages, the scrip overrides the gird in menu. Check the video o go to the website then check the menu, use pagination (click top menu items to have pagination), go to page 2 or more and then check the menu agian.

    [2] When you use custom grid and use “load more” button the additional grid is the default one and not the custom grid of the template

    [3] I’m using custom label plugin like you suggest – WooCommerce Advanced Product Labels. In custom grid don’t appear.

    Thanks

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 15, 2020 at 12:58

    Hello,

    We have added option to use different custom templates for the list/grid in the latest theme and plugin update (6.3.1, 2.3.1).

    1) Got it. Provide us with WP Dashboard and FTP access to the site to check the issue in more detail and fix it.

    2) Are you talking about the “Load more” button on the shop page or if you use the Products WPBakery element?

    3) Then probably only additional customization is required to add custom labels for the custom grid.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 16, 2020 at 02:58

    Hello,
    credential are all the same like before. I’ve copy/paste to private (PS the last update is missing because the post was made few hours before the update, you can update if need)

    1. OK, wait for feedback and solution
    2. Yes.
    3. I think so, please check and let me know

    new bug:
    [4] custom grid – product image not loading the slider image (only flip is ok)
    /I don’t now if this is fixed in last update/

    Thanks

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 16, 2020 at 13:19

    Hello,

    1) Fixed. Check.
    2) So when? If you use Infinite scroll at the shop page OR if you use the Products WPBakery element? Provide link to page with issue.
    3) This should be checked by the WooCommerce Advanced Product Labels plugin author if they are able to make the element for the WPBakery grid builder. As I told you before we don’t have any special labels.
    4) Fixed. Check.
    We have updated theme files and XStore core files. So, move them to your production site if everything is ok.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 17, 2020 at 13:35

    Hello,

    1 and 4 – which file are effective to copy them to the real installation? Should I copy the core plugin folder and the main theme and override?

    2 – When you use xstore product module (grid or slider). In grid mode use custom grid and “load more” option. The script render the default grid when load more products. see link in prv area.

    3. the label is visible if I choose default grid (not custom grid). Your core grid are made with WPbakery? If I see the custom label to the default grid is it possible to implement it also to custom grid? Otherwise please advise a plugin which is compatible for custom labels with theme and WPBakery.

    Thansk

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 17, 2020 at 16:23

    Hello,

    1, 2, 4 – yes, copy core plugin and main theme folders to your production site.
    3) Contact plugin author and ask what WooCommerce action do they use for their function to display the label and also this function name.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 23, 2020 at 01:08

    Hello,

    Here some feedback and bugs I notice:

    Bugs:
    1. switching to list view and then goes to new page, loads again grid mode (or default mode viceversa)

    2. plodder website has full screen white background. Is it possible to have only the transparent background cycle loader?

    3. for variable product the 3 colors form admin panel doesn’t work. (Full stock, Mediaum stock, Low stock) Now the variable products take the woocomerce colors.

    4. Related product module in Product Builder can’t change grid template and don’t take the default custom grid template for category view

    /good to have/
    5. product builder – Elements. missing font size and color options, also padding between elements (left padding is not good option, shifting also the first element in row mode)

    6. Product Builder – missing brand element to insert in product (on last update, before was there)

    /good to have/
    7. it will be useful to have a grid with 8 col (also 10). For stores which sell virtual products o pattern color products.

    /request + good to have/
    8. is it possible to have quick view from custom grid?
    9. Global custom CSS section – is it possible to be much larger? there are only 9 rows and it’s difficult to use, but is very useful option to override some css styles

    Best regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 28, 2020 at 16:45

    Hello,

    in gtmetrix I’m getting served scaled images.
    I regenerate thumbs (120×120) for all grid with this measurements

    How is possible to force the custom grid to load this custom thumbs and not the default medium from WP?

    Thanks

    Ricky

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 28, 2020 at 16:49

    Hello,

    1. Could you, please, make a gif using Gyazo gif to show the problem? Do you have this issue while using pagination on the shop page or when?

    2. Use custom CSS
    body > .et-loader {background-color: transparent;}

    3. I can’t replicate the mentioned issue on our test installation. Provide us with a link to such product on the staging site.

    4. We’ll try to implement it in the next theme update.

    5. Tell me the list of elements that you want to add the font-size and color. Every element of the single product builder has the padding/margin options http://prntscr.com/s7h6tr What other padding do you need?

    6. You can manage brand position from the Theme Options > WooCommerce > Shop > Shop elements > Brands. If works for both builder and default single product.

    7. It’s possible by additional customization. I don’t think that we add it to the theme by default because it’s a very rare grid taking into account the stores of our clients.

    8. There is Quick view button in the button set http://prntscr.com/s7h9e8 You can use it in combination with other buttons or as a single button.

    9. We took into account and try to make it higher.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    April 28, 2020 at 17:55

    Hello Olga,

    1. This problem persist only when in use a cache plugin. When is on grid mode and switch to list mode (or viceversa) and going to new URL the site switch to grid mode (which is the default mode). This is a cache problem and for the moment I have no idea how to solve it.
    I think the query ?view_mode=grid or ?view_mode=list should be always loading in URL, because the cache plugin load only the default url /

    2. ok I’ll try

    3. I fix this in custom function

    4. ok. will wait…

    5. check private notes

    6. I see. It’s a little bit limited. Will be much better to be in product builder. If some cases tha brand with logo is useful right after the product title for example.

    7. ok

    8. ok. I didn’t see it, sorry.

    9. will be included in some of the next updates??

    10. please check this:
    in gtmetrix I’m getting served scaled images.
    I regenerate thumbs (120×120) for all grid with this measurements
    How is possible to force the custom grid to load this custom thumbs and not the default medium from WP?

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 29, 2020 at 17:10

    Hello,

    1) If you have a problem with cache plugin only then maybe try to add these links to the cache plugin exclusion. Could you, provide me link to page where I’ll be able to check the problem.

    5) Ok. I passed your request to developers.
    6) Ok. We took into account this.
    9) Yes, next update will include improvements for the custom CSS area
    10) Product image element loads image size that you set in Theme Options > WooCommerce > Product Images > product thumbnails.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 2, 2020 at 21:13

    Hello Olga,

    1. I’ll prepare staging copy and will back to you
    10. This is correct. But if there are different gird style in different pages, for example from 3 to 6 columns, the thumbnail dimension are different. For 6 columns will be around 120-150 px which is different from product thumbnails general. Is it possible to force the custom grid to use custom thumbnails?

    11. [important] I’m using WP Rocket and trying to serve cash also to logged-in users (customers). Please see the firs issue in private area. The user name remain after login out or if the cache is already build after login label don’t change. Can you tell me what to exclude (js file?) form wp rocket?
    Also, do you have guild what to exclude generally from cache to avoid problems.
    It’s import to cache all the categories and products anyway.

    Thanks

    Please contact administrator
    for this information.
    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 5, 2020 at 00:53

    Hello,

    can you let me now also

    12. I have a strange glitch. Images of grid are always load after the other elements are loaded. The images load last. Just see this link or any other category

    thanks

    Please contact administrator
    for this information.
    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 6, 2020 at 15:14

    Hi,
    do you have some news on my posts?
    R

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 6, 2020 at 22:19

    Hello,

    Sorry for the delay in answering. We have so many requests during these days.
    10. We use the default WooCommerce functions to display product images and it does not have custom size option by default.
    11. I have passed the issue to our developers and I’m working with our team to resolve the issue. I’ll inform you once we get any good news.
    12. It’s because of the lazy loading. Go to Theme Options > Speed Optimization > Images loading type > Disable if you want to disable it. But it will affect page loading time. Also you may try LQIP type. Maybe it will be a better solution for you than disable it at all.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 10, 2020 at 13:28

    Hello,

    10. Serve scaled images is a big issue for SEO.
    https://gtmetrix.com/serve-scaled-images.html
    When use custom grid for default category view usually the columns of the store are always the same after the layout is made (from 4 to 6 most frequetrly)
    In custom grid builder, image module should have the option to chose the name of a custom resize thumb image. In this case the grid will serve the thumb the user rebuild with the accurate measurement to avoid scaled images.
    Do you think you can include this?

    11. ok.

    12. I’ll try and let you know.

    Regards,

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 12, 2020 at 11:43

    Hello,

    10. Ok, we’ll try to add this option in the next theme update.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 14, 2020 at 17:27

    Hello Olga

    10. Do you now when will be out the fix for serve scaled images?

    Also I found new bug.

    13. Accordion, tab or similar not working in mobile menu:
    If you add in mobile menu panel a static block trough HTML block and in the static block there are modules like Accordion, Tabs or similar, and Enable object cache for Static Blocks form Personalize panel, the result is all module loose CSS and are always open aka not working. If object cache for Static Blocks is off then is normal, but the site is much slower.

    best

    Ricky

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 15, 2020 at 14:11

    Hello,

    10. The task to add the image size for the WPBakery products element and also for the grid builder element is in the tasks list https://www.8theme.com/roadmap/ – Product Shortcode enhancement. We are working to include this option in the next update.

    13. Unfortunately, it’s related not just to the theme but to the WPBakery plugin and we can’t make the styles of the WPBakery elements work with the object cache.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 20, 2020 at 19:21

    Hello,

    10. I can’t see the register custom images in grid builder
    My register formats:
    https://tinyurl.com/ybmmwydr
    https://tinyurl.com/yb9c2tp8

    What I see:
    https://tinyurl.com/ycmrg4tz

    Please advise
    Thanks
    Ricky

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 21, 2020 at 12:38

    Hello,

    I have e new issue
    14. Product image zoom option open the image in new tab instant zoom inside the browser.
    This problem persist only when cache is active. I’m using WP Rocket.
    I suppose should exclude some js file form been cache or minify if the zoom option is handle like this. Can you tell me which one?
    Thanks
    R

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 21, 2020 at 13:13

    Hello,

    We have sent you file to your registration email. Please, replace it on your site to add the custom size for the products grid.

    Regards

    Avatar: Ricky_Rashkoff
    Rashkoff
    Participant
    May 21, 2020 at 13:53

    Hello,
    10.
    I replaced the file but this not solve the problem. I see only the same thumbs like before:
    https://tinyurl.com/ycmrg4tz

    14.
    Please advise for the zoom problem

    Thanks

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 22, 2020 at 08:49

    Hello,

    10) Sorry. There should be the option to choose the custom size http://prntscr.com/slkem9
    I have re-sent the file. Try that.

    14) Need FTP and Dashboard access to the site to check the issue in more detail.

    Regards

  • 1 2
    Viewing 30 results - 1 through 30 (of 34 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.