Elementor Product Card Design | WordPress Elementor Pro Tutorial | Elementor Tips and Tricks

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ต.ค. 2024

ความคิดเห็น • 164

  • @jimfahaddigital
    @jimfahaddigital  ปีที่แล้ว +3

    🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

  • @mijankhan4158
    @mijankhan4158 2 ปีที่แล้ว +2

    I found Jimi Fahad last month and saw her all videos. He is a real genius and creative person. Many many thanks Fahad for giving this type of unique videos.

  • @olanrewajuoluwadunmininu5644
    @olanrewajuoluwadunmininu5644 2 ปีที่แล้ว +4

    Thank you for the tutorial, Jim Fahad. Keep setting the pace. Bravo.

  • @muhammadsaadmansoor7777
    @muhammadsaadmansoor7777 ปีที่แล้ว

    wow. you always have the best most vivid and attractive unique designs, i find it difficult to imagine that it was even possible.

  • @mayankjha2399
    @mayankjha2399 2 ปีที่แล้ว +2

    You are amazing, I am biggest fan of you're... Love from India🇮🇳🇮🇳 ❤❤❤❤❤

  • @SarafUddin000
    @SarafUddin000 2 ปีที่แล้ว +3

    Can i use this cardview as default product card for woocommerce theme like Electro?

  • @hakanovic5878
    @hakanovic5878 2 ปีที่แล้ว

    a good example of perfection in coding. Best regards from germany sempai.

    • @francoseling496
      @francoseling496 2 ปีที่แล้ว

      Germany? What city are you from?

    • @hakanovic5878
      @hakanovic5878 2 ปีที่แล้ว

      @@francoseling496 Mainz and you?

  • @zaifhossain8509
    @zaifhossain8509 2 ปีที่แล้ว +8

    Amazing video brother, but I wanna know this kind of card mainly we use as WooCommerce product, by default product card displays as the theme codes. Can you make a tutorial on how can we change default theme product design and add custom design like yours? Probably it's a development type of problem. If you can, please try

    • @jimfahaddigital
      @jimfahaddigital  2 ปีที่แล้ว +6

      I got you! I'll definitely give it a try! No worries! 🙌

    • @ishfaqseher
      @ishfaqseher 2 ปีที่แล้ว

      same question bro.thank for adding this question...

    • @PozisLabMinePhoner
      @PozisLabMinePhoner 2 ปีที่แล้ว

      Help me to do this

    • @nijia1161
      @nijia1161 2 ปีที่แล้ว

      I have the same need,pls

    • @jdtrading7385
      @jdtrading7385 2 ปีที่แล้ว +1

      @@jimfahaddigital would be awesome to see tutorial for woocommerce products design!!!

  • @Marina-wv2zy
    @Marina-wv2zy 2 ปีที่แล้ว +1

    Jim, thanks a lot! Very cool design and animation! I have implemented this effect on the "PROMOTIONS" page. In the button, I wrote "CHOOSE" so that it would lead to the store on the card of this product. It turned out super cool! And special thanks for explaining the code!

    • @raepakistan4095
      @raepakistan4095 ปีที่แล้ว +1

      Hi @Marina if you have used this then pls let me know if I apply it will it be applied to all the product cards automatically

  • @YasirShabbir
    @YasirShabbir 2 ปีที่แล้ว +1

    Bro please make a full video on how to make it dynamic I mean like a Elementor product widget please if possible

  • @massimilianoriccio3298
    @massimilianoriccio3298 2 ปีที่แล้ว +3

    Hi, very well done tutorial, congratulations.
    I just have one question: the buttons all have a dead link # ... when clicked it returns to the top of the page and it's not very nice.
    Since it is not connected to woocommerce but only descriptive, can we not use the buttons? alternatives!

  • @denys1485
    @denys1485 ปีที่แล้ว

    Very beautiful! Thank you for sharing you knowledge ❤️

  • @thechiman
    @thechiman 2 ปีที่แล้ว

    I knew you would come through Jim. Thanks for this

  • @Internationalprojectsco
    @Internationalprojectsco 2 ปีที่แล้ว

    Thanks for the tutorial, had a great time

  • @pensandodireito8204
    @pensandodireito8204 2 ปีที่แล้ว

    Fantastic! Thank you for CSS code explanation.

  • @latingoku1
    @latingoku1 2 ปีที่แล้ว

    Wow! what an amazing tutorial. I always learn something good and useful from you. Thank you.

  • @OnlyPrinceJha
    @OnlyPrinceJha 2 ปีที่แล้ว

    Make a tutorial on, how to choose colour and font of a website.
    By the way your tutorials are amazing

  • @DineshDKA
    @DineshDKA 2 ปีที่แล้ว

    Amazing vid! Fahad wonderful design effect 💯🔥

  • @shubhamagawane7813
    @shubhamagawane7813 2 ปีที่แล้ว +1

    please make a big tutorial on css please

  • @mc1slongamer586
    @mc1slongamer586 2 ปีที่แล้ว

    Thanks Jim. You, as always, are on top)

  • @DaxPegels
    @DaxPegels 2 ปีที่แล้ว

    I was just looking for something like this

  • @TRTDigital
    @TRTDigital 2 ปีที่แล้ว +1

    Can you work on dynamic woo commerce products
    Thanks

  • @kristapskk3409
    @kristapskk3409 2 ปีที่แล้ว +10

    You are the god of website designing)) Thanks Jim

  • @yesurajan8873
    @yesurajan8873 2 ปีที่แล้ว

    Nice work bro
    I'll use so many times of your codes it's really useful to us

  • @frankstone
    @frankstone 2 ปีที่แล้ว

    Very creative Jim. Thanks for sharing!

  • @MOINYUSUF_
    @MOINYUSUF_ 2 ปีที่แล้ว

    Thmubs up for your legend Intro!

  • @Faiza-Aiza
    @Faiza-Aiza ปีที่แล้ว

    Fahad it's very Amazing Tutorial 💯

  • @firozfaizan
    @firozfaizan 2 ปีที่แล้ว

    Awesome work Jim. You rock bro👍👍

  • @prokassim
    @prokassim 2 ปีที่แล้ว

    Amazing as always, thank you for all these tutorials and css codes !

  • @thetapics
    @thetapics 2 ปีที่แล้ว +3

    hey great tutorial but how can you make the product data dynamic? or used as an product archive template?

    • @leefields2023
      @leefields2023 2 ปีที่แล้ว

      That's the problem to solve. The most important thing..I guess how to do it too.

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 2 ปีที่แล้ว

    Fantastic tutorial, thank you so much Jim!

  • @FranciscoGuerreropeternorth
    @FranciscoGuerreropeternorth 2 ปีที่แล้ว

    This is amazing! Regards from Spain.

  • @ethanhunt629
    @ethanhunt629 2 ปีที่แล้ว

    WordPress King
    Fahad 😍😍😍

  • @gaganjotsingh2579
    @gaganjotsingh2579 2 ปีที่แล้ว +2

    Hi Jim video is awesome. but I have few questions, how to make there buttons working “for example:- select size, select colour”, and directly add to cart from “buy now” button

    • @jimfahaddigital
      @jimfahaddigital  2 ปีที่แล้ว +4

      I'll try to create another tutorial for that. No worries! 🙌

    • @valentinasalazarhernandez5289
      @valentinasalazarhernandez5289 ปีที่แล้ว

      @@jimfahaddigital Have you created the tutorial yet? Please, I need it🙏🏻❤Thanks

  • @JhangeerSolangiM
    @JhangeerSolangiM 26 วันที่ผ่านมา

    Your css good but little missing
    here is correct code
    .selector {
    height: 400px;
    display: flex;
    }
    /* Show/Hide CSS */
    .selector .hide-first {
    display: none;
    }
    .selector:hover .hide-first {
    display: block;
    }
    /* Image Transform */
    .selector img {
    transition: ease .5s;
    }

  • @huzaifaharoonofficial
    @huzaifaharoonofficial 2 ปีที่แล้ว

    Thank You so much man . This is so cool..

  • @sadiagul980
    @sadiagul980 2 ปีที่แล้ว

    You are great bro

  • @visualmodo
    @visualmodo 2 ปีที่แล้ว

    Excellent video!

  • @YasirShabbir
    @YasirShabbir 2 ปีที่แล้ว

    It's really amazing 😍 thank you so much bro 😘

  • @masajhn
    @masajhn 2 ปีที่แล้ว

    Sir. you are fantastic ...

  • @gamedguys372
    @gamedguys372 2 ปีที่แล้ว

    super dude.plase we wanna tutorial like this

  • @zibinni
    @zibinni 2 ปีที่แล้ว +2

    Вау! Это потрясающе!!! Мне срочно нужно учить Английский язык, чтобы учиться у вас!

    • @jimfahaddigital
      @jimfahaddigital  2 ปีที่แล้ว

      Это значит многое! Большое спасибо! Я желаю вам всего наилучшего!

    • @mafiaekd
      @mafiaekd 2 ปีที่แล้ว +2

      Бро поставь браузер от яндекса, у них перевод и озвучка с английского на лету.

    • @zibinni
      @zibinni 2 ปีที่แล้ว +1

      @@mafiaekd спасибо за совет, а видео как переводит субтитрами?

    • @mafiaekd
      @mafiaekd 2 ปีที่แล้ว

      @@zibinni голосом) очень даже хорошо, запускай ютуб и наслаждаться

    • @zibinni
      @zibinni 2 ปีที่แล้ว

      @@mafiaekd спасибо!!!! Это круто )))

  • @worthmind
    @worthmind 2 ปีที่แล้ว

    Please make a video on about your website services system, how you did like fiverr services?

  • @ZHARCO
    @ZHARCO 6 หลายเดือนก่อน

    Thank you

  • @ilievgeorgi2217
    @ilievgeorgi2217 2 ปีที่แล้ว

    ...this guy .... love u !!

  • @hudsonhenrique9706
    @hudsonhenrique9706 2 ปีที่แล้ว

    Tks a lot ... very helpfull

  • @siddhant2002
    @siddhant2002 2 ปีที่แล้ว

    Plz also make video on upwork

  • @sudarshangain9430
    @sudarshangain9430 2 ปีที่แล้ว

    THANK YOU SIR...

  • @wajid9922
    @wajid9922 2 ปีที่แล้ว

    Full heavy Clean Design Sir ❤❤❤✌✌✌❤❤❤

  • @dichvuseo
    @dichvuseo 2 ปีที่แล้ว

    Wonderful! Thank you!!!

  • @williamreiudarbe7612
    @williamreiudarbe7612 2 ปีที่แล้ว

    Nice tutorial as always

  • @UnlimitedElements
    @UnlimitedElements 2 ปีที่แล้ว

    One day you will work with us :)

  • @guillermoorihuel665
    @guillermoorihuel665 2 ปีที่แล้ว

    HEy good tutorial, any news on how to get the products to be dynamic and work as user expects? please give any insight would be cool to make it work once we got here, I'm looking around but not finding answer. Thank you

  • @rvick3914
    @rvick3914 2 ปีที่แล้ว

    Bro very Impressive tutorial

  • @TRTDigital
    @TRTDigital 2 ปีที่แล้ว

    Great tutorial
    Can you work on dynamic woo commerce products
    Thanks

  • @Manuwadi007
    @Manuwadi007 ปีที่แล้ว

    Same thing you can do within 5 minutes in Gutemberg

  • @mohamedyoussef341
    @mohamedyoussef341 2 ปีที่แล้ว

    You are amazing 💯👑🔥

  • @Seu-Ze
    @Seu-Ze 2 ปีที่แล้ว

    Valeu. Zé do Brazil

  • @CADDY1986k
    @CADDY1986k 2 ปีที่แล้ว

    I like this tutorial so much. Its clear and easy o follow. I have a question. How the buy now button work? I mean you custom your cart also ir connect it to woocommerce and how if yes?

  • @VendendoSemSegredos
    @VendendoSemSegredos 2 ปีที่แล้ว

    Congratulations for the tutorial! how to link variations options in woocommerce?

  • @lotsofgame
    @lotsofgame 2 ปีที่แล้ว

    really this is very cool brother

  • @andreas-stricker
    @andreas-stricker 2 ปีที่แล้ว

    looks nice, but can you show how to make it work with woocommerce to order the selected product?

  • @dropsteria1339
    @dropsteria1339 2 ปีที่แล้ว

    hello sir can you please make a tutorial on how to make every product in the shop page look like this design or any elementor template ?

  • @pcyberictservices4578
    @pcyberictservices4578 2 ปีที่แล้ว

    Bro this tutorial is excellent.
    I design this following ur tutorials but I don't know how to use it as default product cart page for all wocommerce product. Pls help

  • @maw-id
    @maw-id 2 ปีที่แล้ว

    Can you make tutorial for Digital Marketing Agency Landingpage? I have school homework to make this. Thanks if you make tutorial. Regards, from indonesia❤️

  • @danielblade2614
    @danielblade2614 2 ปีที่แล้ว

    Amazing

  • @IkkaDoes
    @IkkaDoes 3 หลายเดือนก่อน

    hi, please tell me how can I add my own design as a default card for all my products?

  • @zakariaboulouarde4591
    @zakariaboulouarde4591 2 ปีที่แล้ว

    Thaaaank you very much

  • @suchismitachakraborty9956
    @suchismitachakraborty9956 2 ปีที่แล้ว

    you are awesome :)

  • @emercore1
    @emercore1 2 ปีที่แล้ว

    Saludos desde chile máster 🇨🇱

  • @bySterling
    @bySterling 2 ปีที่แล้ว

    You gotta $ell your awesome creations Jim!$

  • @ishfaqseher
    @ishfaqseher 2 ปีที่แล้ว

    thank you so much for this amazing video but i have a question.how can i link buy now button with woocommerce add.when someone click on buy now button then automatic add in add to basket and check out?? waiting for you're positive response.
    💗thank you sir

  • @Chesk-rh4vw
    @Chesk-rh4vw 2 ปีที่แล้ว

    very good, thanx

  • @satyabratadash4480
    @satyabratadash4480 ปีที่แล้ว

    ok for the design but suggest me how to use it in woocommerce

  • @joachimleonardsengga6869
    @joachimleonardsengga6869 2 ปีที่แล้ว

    ..awesome👏

  • @mohamadahsan9773
    @mohamadahsan9773 2 ปีที่แล้ว

    Hi Fahad, great video.
    I have an issue to see the css effects i have click on it, only happens on phone , any recommendation, thanks for ur videos.

  • @jhonhuingo2007
    @jhonhuingo2007 2 ปีที่แล้ว

    very good video of Elementor Product Card Design but how can I do it in the form of a carousel if there are more than 3 card product design, if you could do it in a tutorial, thanks

  • @andywelgen5892
    @andywelgen5892 2 ปีที่แล้ว

    Ty a lot

  • @muhammadwalidnasir50
    @muhammadwalidnasir50 ปีที่แล้ว

    the issue with these custom designs is that what if the product run out of stock?

  • @suzashorts7250
    @suzashorts7250 2 ปีที่แล้ว

    Hi, can you make a tutorial on how to add reviews like on your website?

  • @thinkpositiveway
    @thinkpositiveway 2 ปีที่แล้ว

    jossssss vai!

  • @sabrinajaynnah
    @sabrinajaynnah 2 ปีที่แล้ว

    How does this video effect using Woocommerce product widget with products coming from aliexpress to Dropshipping?

  • @nacho-moran
    @nacho-moran 2 ปีที่แล้ว

    Thanks for the tutorial, very useful, how you connect this to the actual product?

  • @fousseynisagara1813
    @fousseynisagara1813 2 ปีที่แล้ว

    Hello, the tutor is great, thank you. How to link the products to the cards? thank you

  • @UmmasVoice
    @UmmasVoice 2 ปีที่แล้ว

    Fahad. vai i really like your portlio website personally beacouse thare is a functions and design exact fiver gig did you create a video on it??? if your site is in wordpress thanks

    • @jimfahaddigital
      @jimfahaddigital  2 ปีที่แล้ว +1

      Not yet! It's actually custom-coded! But I'll try to make an Elementor version of it! 🙌

  • @amalprabath7983
    @amalprabath7983 2 ปีที่แล้ว

    Great video 😍

  • @mayankjha2399
    @mayankjha2399 2 ปีที่แล้ว

    Sir, can you please make video on elementor Lottie.... Please i need help

  • @ibrahimrakib9480
    @ibrahimrakib9480 2 ปีที่แล้ว

    Love u bro...

  • @SeoAitsaleh
    @SeoAitsaleh 11 หลายเดือนก่อน

    Brother, how can I connect the button 'buy naw 'with checkout

  • @printadozstore1028
    @printadozstore1028 2 ปีที่แล้ว

    Nice

  • @alexlanderos
    @alexlanderos 2 ปีที่แล้ว

    You're the best 👌🏻

  • @nodiranimojumder5942
    @nodiranimojumder5942 2 ปีที่แล้ว

    Real good job! 😊

  • @UmmasVoice
    @UmmasVoice 2 ปีที่แล้ว

    It was amaizing

  • @dacostaaditi
    @dacostaaditi ปีที่แล้ว

    so if we need to do this for 100 product is it done like this , you did not mention what to do on buy now

  • @Manuwadi007
    @Manuwadi007 ปีที่แล้ว

    How can we do this at woocommerce products?

  • @andywelgen5892
    @andywelgen5892 2 ปีที่แล้ว

    So niceeee

  • @Jamsandekar
    @Jamsandekar 2 ปีที่แล้ว

    Can we do it for woocomerece product??

  • @alarsito
    @alarsito 2 ปีที่แล้ว

    Hello, amazing tutorials. It is possible to change background and text at the same time as a card by making hover. Thanks!

  • @kalashbansal2979
    @kalashbansal2979 2 ปีที่แล้ว +1

    I have a query.(Not related to this video but I wanted to know it as my cleint need this 😭)
    Is it possible to create a webpage which is only accessible when a person enters his information in a form (let's say name and email id).
    The main thing is we need to collect email ids of people who comes to that page before allowing them to enter the page.
    Instead of giving choice it is compulsory to enter the information.
    If it is possible then kindly let me know.
    (Note - I am open for any paid plugin. I already have crocoblock)

    • @jimfahaddigital
      @jimfahaddigital  2 ปีที่แล้ว +2

      First of all, the best method to collect leads is by providing something downloadable(eBook/PDF) in exchange for their email. Most of the email automation tools have this option. Similar to the downloadable things, you can also provide them a URL(Landing Page) as an incentive. I use convertkit - I have this option prnt.sc/1yn5753 .
      You can of course do that on the website - but that requires custom coding! In my opinion, Email automation tools are best to do the job easily! Thank you!!

  • @Jamsandekar
    @Jamsandekar 2 ปีที่แล้ว +2

    Bt this is not connected to woocomerece??
    Add to cart

    • @jimfahaddigital
      @jimfahaddigital  2 ปีที่แล้ว +2

      No! You can tweak it on your way! My goal was to make the Card Design Effect. 😇

    • @ishfaqseher
      @ishfaqseher 2 ปีที่แล้ว

      @@jimfahaddigital but if this button is not working then how it's work?? 😞😞