Designing WooCommerce Product Grid | JetWooBuilder, JetGridBuilder
HTML-код
- Опубликовано: 1 июл 2024
- Ever wondered how to design Elementor #WooCommerce product grid with the help of JetWooBuilder and JetGridBuilder plugins? In this video, you will learn how to build various product grids and apply a WooCommerce product list layout. We will show you how to use the Products Loop widget to combine both the WooCommerce product grid and product list view on one page. Finally, you will know how to add a WooCommerce wishlist and compare buttons using JetCompare&Wishlist plugin.
#jetwoobuilder #elementorproductgrid
Proceed with the video to learn more about:
👉Building and styling Elementor archive page with the help of Elementor WooCommerce widgets
👉Creating and styling WooCommerce product list
👉Showcasing products via Products Loop widget that feature WordPress grid layout and list layout at once
👉Styling WooCommerce product grid page
👉Setting the Elementor product page template to the required page
This video is the second one in the series dedicated to the JetWooBuilder plugin by Crocoblock. Stay tuned and you will know even more about effective Crocoblock Elementor Woocommerce plugin use.
► TIMESTAMPS
00:00 Introduction
00:45 Creating an Elementor shop page
01:31 Applying JetWooBuilder widgets
02:33 Showcasing the products with the Products Loop widget
03:02 Creating and styling Archive templates
06:22 Setting the templates to a specific page
07:08 Applying the JetGridBuilder widget
--------------
☕ Enjoyed the video? Buy Julia a coffee:
► www.buymeacoffee.com/JuliaMcHale
---------------
Previous video from JetWooBuilder series
►Creating Elementor Product Page bit.ly/36QKjF1
--------------
Discover JetWooBuilder on our website
► bit.ly/2VylPde
--------------
Explore features of Zolden - Dynamic WooCommerce Template
► bit.ly/33HeRXZ
--------------
Check out tutorials in our Knowledge Base
► JetWooBuilder bit.ly/3okrCiU
► JetGridBuilder bit.ly/36ByQsN
---------------
Explore JetCompare&Wishlist plugin’s features
► bit.ly/3ooL6TG
---------------
Join us here:
► FB Community: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► Pinterest: / crocoblock
#JetGridBuilder #elementorgrid #woocommerceplugin 
Наука
This is Love! You've made our lives so easy and enriching. Keep up the good work.
Thank you for your kind words!
thanks! we're doing our best!🙌
Awesome!
Thank you Joola!
Cool
Thank you :)
You are awesome , please as always .. do a tutorial on badges for sale and badges for the menu like ( New , hot , etc ) pleaseEeEeEs
:) We got you!
working on it already🙌
you are the best ever
@@mohmedl-oubeid9976 here is a new tutorial on how to run sales promotion! product badges included!
ruclips.net/video/CW2UwVuHBsE/видео.html
@@Crocoblock Hello! It seems that I do not have wishlist button and grid builder. How can I fix it?
Each video I watch I like Crocoblock a little more hahah
Happy that our videos are helpful :)
Great tutorial ! By far the best woobuilder. Only issue I found was that when create archive item template and when using that in product loop it wont show up.
Hi! Please, contact our support on this issue crocoblock.com/help-center/ :)
I see the issue has been over 4 month, and still not fixed. I contacted live chat support about the same issue. But 4 month are past now and still not working.
Post grid builder
Are you guys considering to add Variation Swatches and Infinite Scroll to Jet Woobuilder? It would be great to have these feautures straight into the plugin itself...
Please kindly submit a feature request on github.com/Crocoblock/suggestions and our Dev team will check if they could be added in plugins.
How do you hide or change cart icon in products grid element?
02:33 Showcasing the products with the Products Loop widget - самый лучший способ я считаю
Nice choice! 😉
Great tutorial video, thank you for that. Two things I'm trying to figure out before I buy, can I adjust where & how the Sale and Out of Stock messages show up on the archive product images?
Can I make an archive widget only show In Stock products, or only show Out of Stock products?
Hello, Jake! If you build your Product layout in the Archive template, you can place the Stock Status widget to any place in the editor prntscr.com/11sm9ec, and then this layout will be applied to all the products showed with Products Loop widget. The template can be applied only once. Unfortunately, there's no way to divide the templates depending on the stock status.
If you use the Products Grid widget, this option is enabled within the widget: prntscr.com/11smcsn, and it can be styled up in the widget's settings: prntscr.com/11sm5xd.
@@Crocoblock Thanks for the reply!
@@Crocoblock Which mean if using the product grid, how about the SOLD badge? I did have the Sales badge, but when i set the product is out of stock, it does not have the sold badge
Right at the moment, this option isn't available, but you can set the availability for the single product joxi.ru/YmEbvBDCB6KjW2 joxi.ru/1A5MVBpCzE3ZNA
Coloquen la opcion de poder personalizar el product grid o que se pueda usar el product loop en cualquier pagina
how can i make the add to card button and price at the same height even if the title is larger then the other ?
is their possibility for pagination with product loop ?
very good update, i verify if you fix section bug, if yes, your solution top 1 in elementor addons for woocommerce
Hi! Could you please tell, what exactly do you mean?
@@Crocoblock earlier I set the width of the section to 1280 px and after saving, when I opened the product page, the width was narrower, I opened the ticket, but we with support did not manage to solve the problem, but later I found solutions by checking the box to stretch the section, and then the product page was loaded with a smaller width and then it stretched, and it looked like a glitch and I had to abandon the template by switching to a solution from elementor ... but your team does things that are ahead of the competition and if you still solve the problem with a variable product in other plugins, you will be just perfect (by the way I have a lifetime license, I’m not complaining, I support you, I made the decision to buy it after you improved the plugin with shopping cart pages, checkout pages), your package can become an ideal replacement for a woocommerce
@@Atractiondj Thank you for the detailed clarification! Could you be so kind to provide me a ticket number? I searched by your name, but couldn't find it.
what is the recommend size of an image for thumbnail ?
I followed everything you shared about Products Loop but the products didn't appear at all? The design look different a bit - I do see "Archive Item Template" - what does this mean?
Hello! Please kindly submit a ticket at support.crocoblock.com/support/tickets and our Support team will gladly help you out.
This is amazing! However, I have all the settings correct like in the video, but when i click from main to secondary it does not load the archive. and at that point when i click from seconday to main, the main archive is also gone? What am I doing wrong haha.
Also is it possible to have a query just for a certain category of items?
Hi!
1. Please, submit a ticket support.crocoblock.com describe your issue in detail and provide your Dashboard credentials (link to a website, login, and password) and link to the page with an issue. Our tech support will investigate the issue from the backend and help.
2. Could you please describe in more detail what you would like to achieve or provide me with an example?
@@Crocoblock In "product grid" and "product list" theres an option to choose Query. I would normally choose Category and then the specific Category. However, in product loop i cant seem to find this Query field?
@@mauritzdewiljes1685 If you enable the layout switcher in the Product Loop, then there will be an opportunity to choose templates for each layout. In these templates, you can add Products Grid or List and query them joxi.ru/Dr8DVBEHJl06Er . Please, check the following tutorial bit.ly/2XX9Lqx .
What if I don't want to use one of your ten preset loops? Client has very specific requirements and these presets don't cover it.
Great tutorial! I know how to set the number of products per row, but how can I increase the total number of products? of even disable pagination? I wear glasses but can't find it.
Hi! Thank you for your feedback 🙂 You can set the number of products in the Products Grid settings prnt.sc/1y6j9ya . Also, the number of products can be set in Customizer (Appearance > Customize prnt.sc/1y6js6e) prnt.sc/1y6jgla. Could you please specify what pagination do you want to disable? Probably, you've selected the pagination in the Customizer prnt.sc/1y6jp0o . Please, check. It would be great if you could provide me with some screenshots 😉
Post grid builder not working for costum/loop design. Please fix issue.
Is it work in Astra Theme?Because I didn't find like Product thumbnail widget and some other widget in Astra pro theme.
Hello! Crocoblock plugins are compatible with Astra theme. Could you please contact our support team regarding this issue? support.crocoblock.com/support/home/ We need to check your settings to give you a solution.
Wishlist not seen in widegets for product grid(archive) & widget enabling option on product grid. I am using ti wishlist plugin
Hi! Could you please describe the issue in more detail and provide me with some screenshots?
How can I set a query of products in the product loop widget - like the query in the query in the product grid widget, e.g. like only products from a special category? Thx!
Hi! You can enable the layout switcher in the Product Loop. After that, there will be an opportunity to choose templates for each layout. In these templates, you can add Products Grid or List and query them joxi.ru/Dr8DVBEHJl06Er . Please, check the following tutorial bit.ly/2XX9Lqx .
Hello, I inserted dynamic comtent like product term image, product term and they are not show in the grid view. How can I fix it?
Hi! Please, contact our support crocoblock.com/help-center/
They'll check and help 😉
I couldn't find the post grid builder in the setting, and the woo build "Products Grid" can not display my Archive template.
Hi! Could you please describe the issue in more detail and provide me with some screenshots?
Great tutorial guys! Is there a way to add rating count in the products grid? Right now only stars are displayed, while I would like to have both stars and number of ratings, like this: *****(4)
Hi! Unfortunately, there's no such opportunity. Please, feel free to submit a feature request to Git repository github.com/CrocoBlock/suggestions and our team will explore if it's possible to implement.
You can accomplish what you are needing using the "inner section" with 2 columns. The first column adds the "rating" widget. The second column adds a "heading" then uses the dynamic tags > WooCommerce > Product Rating.
Here's a screenshot of a similar example I'm currently working on, although I didn't go side by side like you want the basic idea to remain the same. I'm doing what you are trying to do with the product specs at the bottom.
Hope this helps!
prnt.sc/18wcaq4
On the Shop page, it asks me to select the archive item template(before switcher). I have created archive item templates while when I click on drop-down It is not appearing. What is the solution?
Hi! You need to type in the name of your template in the Select template field prnt.sc/1m7nmqv
This video is missing how to setup on mobile devices, which is more important then on computers these days. I've product loop and can't make it work on mobiles, like to show only 2 instead of 5 product per row, or pagination should show up at different product count on mobiles, and so on. Any suggestions?
Hi! Thank you for your feedback!
Please, contact our support on this issue - crocoblock.com/help-center/
They'll help 🙂
When I try to use the Products Loop. It only shows the customization for one of the archive templates either List or Grid, but it is not showing me both. One of them keeps the theme's customization. Am I missing something here? Does anyone know? Thanx in advance.
Products Loop inherits the styles from the Archive template. As for setting the number of Products, go to Appearance> Customize> WooCommerce> Product Catalog prntscr.com/13mhou9
I dont have "Product Loop" widget in the last version :S only have "Product List" widget
Hello! Have you tried searching it this way: prntscr.com/wcv39o?
Does kava n crocoblock have off-canvas filter on mobile?
Please kindlky download a free addon called Elementor Responsive here: crocoblock.com/freemium/tools/
Hello may i ask about
product loop, i have install jetwoobuilder but i just have product grid but i dont have product loop, i made template archive items but i dont know how i can display my custom template..
Hello! Make sure please the widget is enabled in JetWooBuilder settings: prnt.sc/QT6fRNxn2Tzp
Then create a shop template with JetWoobuilder and find a Products Loop widget in the list: prnt.sc/SBPPzrF6zmve . Make sure please you put the widget on the correct template. It's available for Shop template only. The widget is hidden if you edit a static page in Elementor or any other type of a template.
@@Crocoblock so i have a case, i have custom my archive card, and i want to display the that templated to main page. But i dont know how. :(
Products Loop cannot be placed on the home page. Use Product Grid, Product list, and Listing grid widgets. Also, could you please contact our support team and we will give you recommendations for your case? crocoblock.com/help-center/
Hello. Do you have a tutorial for wishlist and compare?
Hi! Sure :) Please, check these tutorials - crocoblock.com/knowledge-base/article-category/jetcomparewishlist/
It is not possible to show a product attribute on the shop page.
When I install the plugin i only have access to 3 widgets.. I've search and tried everything.. your plugin is not working for me and i can't figure out why.
Ahhh its because you have to 'Purchase' which isn't mentioned at all through out any of your videos.
@@brenDawg1991 Hi! Let me explain: these four widgets are global widgets as you can see here prnt.sc/1gjfylb
And you can use them in every part of your site.
Other widgets are available only on the corresponding template page.
Single widgets - on a single template.
Archive widgets - on the archive template.
Category widgets - on category template.
Widgets for the shop - on shop template. You can check all widgets and where to use them on our website crocoblock.com/plugins/jetwoobuilder/ .
The thumbnails do not appear on the live page for me.
Hi! Please, contact our support on this issue - crocoblock.com/help-center/
nice
how i can display discount number ? like (-25%)
thank you
Hi! You can use WooCommerce Sale Products widget prnt.sc/1jdm5ko . Don't forget to add the sale price for products prnt.sc/1jdn0h8
После пагинации виджет Wishlist Button крашится, и вместо кнопки показывается Css код:) актуальные версии плагинов)
Добрый день! Пожалуйста, создайте тикет и предоставьте доступ к сайту support.crocoblock.com
Наш тех агент посмотрим и поможет 😉
Which version of wordpress does it supports?
Hi! It supports the latest version.
@@Crocoblock thank you!
I Got Server 500 error only on product Archive publish.how can i solve ?
Hi! Please, submit a ticket support.crocoblock.com describe your issue in detail and provide your Dashboard credentials (link to a website, login, and password) and link to the page with an issue. Our tech support will investigate the issue from the backend and help.
how to control number s of product to display in product loop?
It's controlled from the Customizer (prntscr.com/124tbdu)
@@Crocoblock yes, i finnaly find out, but Single template SETTING from jetwoo builder will overide customizer, make me confused at beginning
@@Crocoblock And what about mobile?
@@moncholo_ Hi! You need to switch to the mobile view prnt.sc/1nh4ash
How to apply filters to products loop?
To apply filters fo Products Loop widget, select WooCommerce Archive (by JetWooBuilder) as a provider: prnt.sc/squD_mOZ25GQ
Very good but.... does not work with all themes :(
We guarantee full compatibility with Kava, OceanWP, Astra, GeneralPress, Hello Theme.
07:08 Applying the JetGridBuilder widget
There is no such widget in the list of widgets!
---
Такого виджета в списке виджетов нет!
Добрый день! Виджеты доступны в плагине JetGridBuilder crocoblock.com/plugins/jetgridbuilder/
JetSmartFilter properly doesn't work on WordPress 5.6
Hello! It was already fixed in version 2.0.6
@@Crocoblockyeah, I got it yesterday..... Thank you so much
@@rakibulislam9874 warm welcome!
How about responsiveness ?
Hi! Could you please describe the issue in more detail?
Just bought Crockblock. How did you get the sunglasses at 2:09 change from Sale to "Percentage Off" at 2:46? I've been looking everywhere. =) @crocoblock