WooCommerce Custom Product Loop in Elementor | Design Product Template
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Let's create a Custom Product Loop Skin for WooCommerce Products in Elementor. We will cover step by step from adding product featured images, product reviews & ratings, add to cart button, product page link, and sale badge for the Custom loop.
We go a step further, and add extra custom fields via Advanced Custom Fields for WooCommerce to add a unique colour background to each product. So sit back and enjoy this complete video to create your Custom Design for WooCommerce Product page.
▶ Widget Used
Custom Loop Skin for Products - theplusaddons.com/pluslisting...
WooCommerce Product Grid Listing - theplusaddons.com/pluslisting...
▶ Get 120+ Powerful Widgets for Elementor - theplusaddons.com/pricing/
▶ Nexter Theme Builder - nexterwp.com/
🎁 USE CODE ' TH-cam10 ' TO ENJOY EXTRA 10% DISCOUNT
⏯️ Don't Forget to Subscribe to our TH-cam channel for more Tutorials on Elementor - th-cam.com/users/POSIMYTHInn...
---
Tutorial Chapters 🕐
00:00 Overview
1:28 Required Plugins for Custom Loop
2:06 Creating Custom Fields to WooCommerce Product
03:32 Adding the Products Content
04:49 Creating Product Shop Page
8:51 Listing the Product Grid
10:01 Creating Custom Product Template Design
10:42 Adding Product Background Color
11:55 Product Sale Tag
13:31 Adding Product Image
15:04 Adding to Cart Button
16:15 Adding Product Name
16:53 Adding Product Rating
17:39 Adding Product Price
18:14 Adding Product Page Link
18:56 Connecting the Custom Loop Template with Listing
20:45 End Notes.
---
Important Links 🔗
▶️ Website - theplusaddons.com/
▶️ Join our Facebook Community - / theplus4elementor
▶️ Add your favourite feature on our Roadmap - roadmap.theplusaddons.com/
▶️ Hit Like on our Facebook Page - / theplusaddonsforelementor
▶️ Need Help with our widgets, refer our Docs - docs.posimyth.com/tpae
▶️ Enjoy Premium Support- store.posimyth.com/helpdesk/
If you have any questions, feel free to say Hi👋 on our Live chat
▶️- theplusaddons.com/
#WooCommerceProductLoop #CustomProductDesign #ElementorWooCommerce - แนวปฏิบัติและการใช้ชีวิต
this looks really nice
Glad to hear that Rahul 🥰
you saved my life.
Delighted to hear Victor you loved this :D
Hello, does this allow me to distribute my products on as many Marketplaces as I want?
Hi, thank you for the tutorial.
I just had to add for the dynamic background and dynamic rating the key. But that's ok, I found it.
I still have a question about the "add to cart", though. What if I have variable products? And shoes mainly are lol
/R
Vincent Musschoot
Hello Vincent,
You can use our Single pricing widget with add to cart feature to show the products with their variations, check snap for reference - ibb.co/mB6F4H5
As an alternative, you can keep a simple button with link to 'View Product' which will redirect to the product page, where buyer can select the variation and add to cart.
Nice Video. Quick question. How to add sort or filter sidebar to such shop or archive pages?
Hello Ali,
All the TP Blocks comes from The Plus Addons for Gutenberg plugin.
Please check here - theplusblocks.com/
is this possible to do in gutenberg? if so, can you do a tutorial using kadence theme?
Very soon, we will release a video with Gutenberg using our theplusblocks.com/
Question ? how can you apply the sale badge to all products on sale ?
Hello Kelly,
You can use our Display Conditions and show the sale badge accordingly.
Check our WooCommerce conditional rules - theplusaddons.com/plus-extras/display-rules/
How can i make the dynamic tag for woocommerce add to cart show up? For me this is sadly not showing up :(
Hello Roy,
At the moment, you can only add the Product URL dynamically. In order to add the product to their cart, the user have to visit the product page.
What can I do if the colored product listing fields are of different heights? Unfortunately there is no indication of the height anywhere, do I have to limit this with CSS?
Hellop Janzurbel,
We do have equal height extension using which you can make all images of same height.
Or you can use container background widget and force the image to be cover the section area.
Your plugin causes my Elementor side bar to infinite load. I love how this looks but I can't use any of your widgets.
Hello Jake,
Please make sure max memory limit is at least set to 512 MB. If you still face this, please join us via Live chat on our website.
Which plugin need to install ?
Hello Rabia,
You require this plugin - theplusaddons.com/