Designing WooCommerce Product Grid | JetWooBuilder, JetGridBuilder
Рет қаралды 60,639
Күн бұрын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
@jasmeetsingh88 3 жыл бұрын
This is Love! You've made our lives so easy and enriching. Keep up the good work.
@Crocoblock 3 жыл бұрын
Thank you for your kind words!
@juliacroco8592 3 жыл бұрын
thanks! we're doing our best!🙌
@John-kx8ef 3 жыл бұрын
Thank you Joola!
@serusok 3 жыл бұрын
Awesome!
@SerKrut_ 2 жыл бұрын
02:33 Showcasing the products with the Products Loop widget - самый лучший способ я считаю
@Crocoblock 2 жыл бұрын
Nice choice! 😉
@cristianvaldez2635 3 жыл бұрын
Cool
@Crocoblock 3 жыл бұрын
Thank you :)
@mohmedl-oubeid9976 3 жыл бұрын
You are awesome , please as always .. do a tutorial on badges for sale and badges for the menu like ( New , hot , etc ) pleaseEeEeEs
@Crocoblock 3 жыл бұрын
:) We got you!
@juliacroco8592 3 жыл бұрын
working on it already🙌
@mohmedl-oubeid9976 3 жыл бұрын
you are the best ever
@juliacroco8592 3 жыл бұрын
@@mohmedl-oubeid9976 here is a new tutorial on how to run sales promotion! product badges included! kzfaq.info/get/bejne/eb1iiNqH2q6mo3k.html
@vaniluchy8947 3 жыл бұрын
@@Crocoblock Hello! It seems that I do not have wishlist button and grid builder. How can I fix it?
@LucasAlmeida-fx6eb 3 жыл бұрын
Each video I watch I like Crocoblock a little more hahah
@Crocoblock 3 жыл бұрын
Happy that our videos are helpful :)
@jorgeamenda3442 2 жыл бұрын
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.
@Crocoblock 2 жыл бұрын
Hi! Please, contact our support on this issue crocoblock.com/help-center/ :)
@Art-01 2 жыл бұрын
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
@QUICKGIST 2 жыл бұрын
How do you hide or change cart icon in products grid element?
@Atractiondj 3 жыл бұрын
very good update, i verify if you fix section bug, if yes, your solution top 1 in elementor addons for woocommerce
@Crocoblock 3 жыл бұрын
Hi! Could you please tell, what exactly do you mean?
@Atractiondj 3 жыл бұрын
@@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
@Crocoblock 3 жыл бұрын
@@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.
@gsboss81fr 3 жыл бұрын
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...
@Crocoblock 3 жыл бұрын
Please kindly submit a feature request on github.com/Crocoblock/suggestions and our Dev team will check if they could be added in plugins.
@Jenkans 3 жыл бұрын
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?
@Crocoblock 3 жыл бұрын
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.
@Jenkans 3 жыл бұрын
@@Crocoblock Thanks for the reply!
@dikhen7118 2 жыл бұрын
@@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
@Crocoblock 2 жыл бұрын
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
@felixlozada5260 Жыл бұрын
Coloquen la opcion de poder personalizar el product grid o que se pueda usar el product loop en cualquier pagina
@seektheworld2015 3 жыл бұрын
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?
@Crocoblock 3 жыл бұрын
Hello! Please kindly submit a ticket at support.crocoblock.com/support/tickets and our Support team will gladly help you out.
@virtualqube 2 жыл бұрын
is their possibility for pagination with product loop ?
@jelleloosman7275 Жыл бұрын
It is not possible to show a product attribute on the shop page.
@robbob2861 Жыл бұрын
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?
@Crocoblock Жыл бұрын
Hi! Thank you for your feedback! Please, contact our support on this issue - crocoblock.com/help-center/ They'll help 🙂
@ORIAMALUL Жыл бұрын
how can i make the add to card button and price at the same height even if the title is larger then the other ?
@TheHjtvideos 2 жыл бұрын
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.
@Crocoblock 2 жыл бұрын
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 😉
@plaguedocphd 2 жыл бұрын
The thumbnails do not appear on the live page for me.
@Crocoblock 2 жыл бұрын
Hi! Please, contact our support on this issue - crocoblock.com/help-center/
@user-sq1ju8ii4h 2 жыл бұрын
what is the recommend size of an image for thumbnail ?
@coderchief 9 ай бұрын
Is it work in Astra Theme?Because I didn't find like Product thumbnail widget and some other widget in Astra pro theme.
@Crocoblock 9 ай бұрын
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.
@JanRiedel 2 жыл бұрын
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!
@Crocoblock 2 жыл бұрын
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 .
@anabelc.47 3 жыл бұрын
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.
@Crocoblock 3 жыл бұрын
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
@mauritzdewiljes1685 2 жыл бұрын
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?
@Crocoblock 2 жыл бұрын
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?
@mauritzdewiljes1685 2 жыл бұрын
@@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?
@Crocoblock 2 жыл бұрын
@@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 .
@sinaan2181 2 жыл бұрын
Wishlist not seen in widegets for product grid(archive) & widget enabling option on product grid. I am using ti wishlist plugin
@Crocoblock 2 жыл бұрын
Hi! Could you please describe the issue in more detail and provide me with some screenshots?
@ddh263 3 жыл бұрын
Does kava n crocoblock have off-canvas filter on mobile?
@Crocoblock 3 жыл бұрын
Please kindlky download a free addon called Elementor Responsive here: crocoblock.com/freemium/tools/
@itclub8224 2 жыл бұрын
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?
@Crocoblock 2 жыл бұрын
Hi! You need to type in the name of your template in the Select template field prnt.sc/1m7nmqv
@danielsalamonhorvath7995 2 жыл бұрын
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?
@Crocoblock 2 жыл бұрын
Hi! Please, contact our support crocoblock.com/help-center/ They'll check and help 😉
@neillbryanriveralivia-expe9977 3 жыл бұрын
I dont have "Product Loop" widget in the last version :S only have "Product List" widget
@Crocoblock 3 жыл бұрын
Hello! Have you tried searching it this way: prntscr.com/wcv39o?
@leeluci648 2 жыл бұрын
I couldn't find the post grid builder in the setting, and the woo build "Products Grid" can not display my Archive template.
@Crocoblock 2 жыл бұрын
Hi! Could you please describe the issue in more detail and provide me with some screenshots?
@citypropertyvn Жыл бұрын
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..
@Crocoblock Жыл бұрын
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.
@citypropertyvn Жыл бұрын
@@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. :(
@Crocoblock Жыл бұрын
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/
@Art-01 2 жыл бұрын
Post grid builder not working for costum/loop design. Please fix issue.
@clintt5266 Жыл бұрын
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.
@lucaacerbis6264 3 жыл бұрын
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)
@Crocoblock 3 жыл бұрын
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.
@blown2particles 3 жыл бұрын
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
@DenisRautu 3 жыл бұрын
Hello. Do you have a tutorial for wishlist and compare?
@Crocoblock 3 жыл бұрын
Hi! Sure :) Please, check these tutorials - crocoblock.com/knowledge-base/article-category/jetcomparewishlist/
@brenDawg1991 3 жыл бұрын
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.
@brenDawg1991 3 жыл бұрын
Ahhh its because you have to 'Purchase' which isn't mentioned at all through out any of your videos.
@Crocoblock 3 жыл бұрын
@@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/ .
@user-nx8xi6bc2n 2 жыл бұрын
После пагинации виджет Wishlist Button крашится, и вместо кнопки показывается Css код:) актуальные версии плагинов)
@Crocoblock 2 жыл бұрын
Добрый день! Пожалуйста, создайте тикет и предоставьте доступ к сайту support.crocoblock.com Наш тех агент посмотрим и поможет 😉
@peterpetrov7809 4 ай бұрын
How to apply filters to products loop?
@Crocoblock 4 ай бұрын
To apply filters fo Products Loop widget, select WooCommerce Archive (by JetWooBuilder) as a provider: prnt.sc/squD_mOZ25GQ
@aminvalipoor2061 2 жыл бұрын
nice how i can display discount number ? like (-25%) thank you
@Crocoblock 2 жыл бұрын
Hi! You can use WooCommerce Sale Products widget prnt.sc/1jdm5ko . Don't forget to add the sale price for products prnt.sc/1jdn0h8
@soheilycreations6078 2 жыл бұрын
I Got Server 500 error only on product Archive publish.how can i solve ?
@Crocoblock 2 жыл бұрын
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.
@eagerrider7728 2 жыл бұрын
Which version of wordpress does it supports?
@Crocoblock 2 жыл бұрын
Hi! It supports the latest version.
@eagerrider7728 2 жыл бұрын
@@Crocoblock thank you!
@leksetengah 3 жыл бұрын
how to control number s of product to display in product loop?
@Crocoblock 3 жыл бұрын
It's controlled from the Customizer (prntscr.com/124tbdu)
@leksetengah 3 жыл бұрын
@@Crocoblock yes, i finnaly find out, but Single template SETTING from jetwoo builder will overide customizer, make me confused at beginning
@moncholo_ 2 жыл бұрын
@@Crocoblock And what about mobile?
@Crocoblock 2 жыл бұрын
@@moncholo_ Hi! You need to switch to the mobile view prnt.sc/1nh4ash
@mcj777mail 2 жыл бұрын
07:08 Applying the JetGridBuilder widget There is no such widget in the list of widgets! --- Такого виджета в списке виджетов нет!
@Crocoblock 2 жыл бұрын
Добрый день! Виджеты доступны в плагине JetGridBuilder crocoblock.com/plugins/jetgridbuilder/
@nodiranimojumder5942 2 жыл бұрын
How about responsiveness ?
@Crocoblock 2 жыл бұрын
Hi! Could you please describe the issue in more detail?
@PMorais 3 жыл бұрын
Very good but.... does not work with all themes :(
@Crocoblock 3 жыл бұрын
We guarantee full compatibility with Kava, OceanWP, Astra, GeneralPress, Hello Theme.
@rakibulislam9874 3 жыл бұрын
JetSmartFilter properly doesn't work on WordPress 5.6
@Crocoblock 3 жыл бұрын
Hello! It was already fixed in version 2.0.6
@rakibulislam9874 3 жыл бұрын
@@Crocoblockyeah, I got it yesterday..... Thank you so much
@Crocoblock 3 жыл бұрын
@@rakibulislam9874 warm welcome!
@trend3659 Жыл бұрын
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
Immersed
Рет қаралды 103 МЛН
Crocoblock
Рет қаралды 98 М.
WPCrafter.com WordPress For Non-Techies
Рет қаралды 52 М.
Buy Smart┃Магазин ноутбуков
Рет қаралды 457 М.
MaviGadget
Рет қаралды 11 МЛН
One More German
Рет қаралды 558 М.
Sameer Gaming
Рет қаралды 10 МЛН