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

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 164

  • @jimfahaddigital
    @jimfahaddigital  2 года назад +3

    🔥Download Exclusive Elementor Templates: kitpapa.com 🔥

  • @mijankhan4158
    @mijankhan4158 3 года назад +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.

  • @mayankjha2399
    @mayankjha2399 3 года назад +2

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

  • @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.

  • @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!

  • @hakanovic5878
    @hakanovic5878 3 года назад

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

  • @SarafUddin000
    @SarafUddin000 3 года назад +3

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

  • @zaifhossain8509
    @zaifhossain8509 3 года назад +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  3 года назад +6

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

    • @ishfaqseher
      @ishfaqseher 3 года назад

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

    • @PozisLabMinePhoner
      @PozisLabMinePhoner 3 года назад

      Help me to do this

    • @nijia1161
      @nijia1161 3 года назад

      I have the same need,pls

    • @jdtrading7385
      @jdtrading7385 2 года назад +1

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

  • @zibinni
    @zibinni 3 года назад +2

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

    • @jimfahaddigital
      @jimfahaddigital  3 года назад

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

    • @mafiaekd
      @mafiaekd 3 года назад +2

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

    • @zibinni
      @zibinni 3 года назад +1

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

    • @mafiaekd
      @mafiaekd 3 года назад

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

    • @zibinni
      @zibinni 3 года назад

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

  • @ethanhunt629
    @ethanhunt629 3 года назад

    WordPress King
    Fahad 😍😍😍

  • @Marina-wv2zy
    @Marina-wv2zy 3 года назад +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 2 года назад +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

  • @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.

  • @gaganjotsingh2579
    @gaganjotsingh2579 3 года назад +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  3 года назад +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

  • @visualmodo
    @visualmodo 3 года назад

    Excellent video!

  • @MOINYUSUF_
    @MOINYUSUF_ 2 года назад

    Thmubs up for your legend Intro!

  • @denys1485
    @denys1485 Год назад

    Very beautiful! Thank you for sharing you knowledge ❤️

  • @olanrewajuoluwadunmininu5644
    @olanrewajuoluwadunmininu5644 3 года назад +4

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

  • @DineshDKA
    @DineshDKA 3 года назад

    Amazing vid! Fahad wonderful design effect 💯🔥

  • @mc1slongamer586
    @mc1slongamer586 3 года назад

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

  • @pensandodireito8204
    @pensandodireito8204 2 года назад

    Fantastic! Thank you for CSS code explanation.

  • @Faiza-Aiza
    @Faiza-Aiza Год назад

    Fahad it's very Amazing Tutorial 💯

  • @TRTDigital
    @TRTDigital 3 года назад +1

    Can you work on dynamic woo commerce products
    Thanks

  • @ilievgeorgi2217
    @ilievgeorgi2217 3 года назад

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

  • @Businesscateory
    @Businesscateory 2 года назад

    Thanks for the tutorial, had a great time

  • @firozfaizan
    @firozfaizan 3 года назад

    Awesome work Jim. You rock bro👍👍

  • @latingoku1
    @latingoku1 2 года назад

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

  • @thechiman
    @thechiman 3 года назад

    I knew you would come through Jim. Thanks for this

  • @yesurajan8873
    @yesurajan8873 2 года назад

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

  • @frankstone
    @frankstone 3 года назад

    Very creative Jim. Thanks for sharing!

  • @prokassim
    @prokassim 3 года назад

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

  • @FranciscoGuerreropeternorth
    @FranciscoGuerreropeternorth 3 года назад

    This is amazing! Regards from Spain.

  • @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

  • @YasirShabbir
    @YasirShabbir 3 года назад +1

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

  • @OnlyPrinceJha
    @OnlyPrinceJha 3 года назад

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

  • @ishfaqseher
    @ishfaqseher 3 года назад

    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

  • @CADDY1986k
    @CADDY1986k 3 года назад

    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?

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 3 года назад

    Fantastic tutorial, thank you so much Jim!

  • @sabrinajaynnah
    @sabrinajaynnah 2 года назад

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

  • @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.

  • @DaxPegels
    @DaxPegels 3 года назад

    I was just looking for something like this

  • @IkkaDoes
    @IkkaDoes 5 месяцев назад

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

  • @JhangeerSolangiM
    @JhangeerSolangiM 2 месяца назад

    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;
    }

  • @YasirShabbir
    @YasirShabbir 3 года назад

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

  • @wajid9922
    @wajid9922 3 года назад

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

  • @gamedguys372
    @gamedguys372 3 года назад

    super dude.plase we wanna tutorial like this

  • @masajhn
    @masajhn 2 года назад

    Sir. you are fantastic ...

  • @huzaifaharoonofficial
    @huzaifaharoonofficial 3 года назад

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

  • @hudsonhenrique9706
    @hudsonhenrique9706 2 года назад

    Tks a lot ... very helpfull

  • @sudarshangain9430
    @sudarshangain9430 3 года назад

    THANK YOU SIR...

  • @nacho-moran
    @nacho-moran 2 года назад

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

  • @williamreiudarbe7612
    @williamreiudarbe7612 2 года назад

    Nice tutorial as always

  • @sumanroy_lofi
    @sumanroy_lofi Год назад

    what to do if the positioning tab is not showing in advance in elementor pro. is there any setting relating to showing the positioning

  • @sadiagul980
    @sadiagul980 3 года назад

    You are great bro

  • @emercore1
    @emercore1 3 года назад

    Saludos desde chile máster 🇨🇱

  • @Chesk-rh4vw
    @Chesk-rh4vw 3 года назад

    very good, thanx

  • @lotsofgame
    @lotsofgame 3 года назад

    really this is very cool brother

  • @shubhamagawane7813
    @shubhamagawane7813 3 года назад +1

    please make a big tutorial on css please

  • @pcyberictservices4578
    @pcyberictservices4578 3 года назад

    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

  • @fousseynisagara1813
    @fousseynisagara1813 2 года назад

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

  • @amalprabath7983
    @amalprabath7983 3 года назад

    Great video 😍

  • @dichvuseo
    @dichvuseo 3 года назад

    Wonderful! Thank you!!!

  • @jhonhuingo2007
    @jhonhuingo2007 3 года назад

    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

  • @andreas-stricker
    @andreas-stricker 2 года назад

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

  • @EpicIndia3
    @EpicIndia3 Год назад

    How can we do this at woocommerce products?

  • @rvick3914
    @rvick3914 3 года назад

    Bro very Impressive tutorial

  • @TRTDigital
    @TRTDigital 3 года назад

    Great tutorial
    Can you work on dynamic woo commerce products
    Thanks

  • @UmmasVoice
    @UmmasVoice 3 года назад

    It was amaizing

  • @SeoAitsaleh
    @SeoAitsaleh Год назад

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

  • @kalashbansal2979
    @kalashbansal2979 3 года назад +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  3 года назад +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!!

  • @mohamedyoussef341
    @mohamedyoussef341 3 года назад

    You are amazing 💯👑🔥

  • @satyabratadash4480
    @satyabratadash4480 Год назад

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

  • @nlrocket1613
    @nlrocket1613 2 года назад

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

  • @suzashorts7250
    @suzashorts7250 3 года назад

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

  • @UmmasVoice
    @UmmasVoice 3 года назад

    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  3 года назад +1

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

  • @kristapskk3409
    @kristapskk3409 3 года назад +10

    You are the god of website designing)) Thanks Jim

  • @danielblade2614
    @danielblade2614 3 года назад

    Amazing

  • @suchismitachakraborty9956
    @suchismitachakraborty9956 3 года назад

    you are awesome :)

  • @worthmind
    @worthmind 2 года назад

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

  • @joachimleonardsengga6869
    @joachimleonardsengga6869 2 года назад

    ..awesome👏

  • @AlaminHossain-ph9by
    @AlaminHossain-ph9by 3 года назад

    Hi bro,👍
    Have you published your e-book yet❓ Freelancing Formula
    And one more things, "Where are you getting your regular client"❓
    Have a nice time bro❤️

    • @jimfahaddigital
      @jimfahaddigital  3 года назад

      Update it very soon!

    • @AlaminHossain-ph9by
      @AlaminHossain-ph9by 3 года назад

      @@jimfahaddigital Waiting for the book 🙂
      One more thing,
      Which social platform should I follow or grow for getting freelance client ❓❓❓

  • @ZHARCO
    @ZHARCO 8 месяцев назад

    Thank you

  • @Jamsandekar
    @Jamsandekar 3 года назад

    Can we do it for woocomerece product??

  • @UnlimitedElements
    @UnlimitedElements 2 года назад

    One day you will work with us :)

  • @alarsefilm
    @alarsefilm 3 года назад

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

  • @nodiranimojumder5942
    @nodiranimojumder5942 3 года назад

    Real good job! 😊

  • @taohidajad6527
    @taohidajad6527 2 года назад

    Hello Brother I can't find any images in your site can u help me to get images

  • @alexlanderos
    @alexlanderos 3 года назад

    You're the best 👌🏻

  • @mariano-cucinotta
    @mariano-cucinotta 3 года назад

    You always have great ideas. Excuse me for asking this question is it possible on the hover to change the image?

    • @jimfahaddigital
      @jimfahaddigital  3 года назад

      I've made a tutorial about that. Checkout my *Squid Game Elementor Hover Effect* Tutorial. Thanks a lot!! 🙌

  • @mayankjha2399
    @mayankjha2399 3 года назад

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

  • @olichowdhury7688
    @olichowdhury7688 2 года назад

    crazyyyyy💥💥

  • @MurzynskieMigdalki
    @MurzynskieMigdalki Год назад

    How can I connect it so that colors and sizes are displayed as variants and not just as buttons?

  • @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 ?

  • @andywelgen5892
    @andywelgen5892 3 года назад

    So niceeee

  • @EpicIndia3
    @EpicIndia3 Год назад

    Same thing you can do within 5 minutes in Gutemberg

  • @sherlwinc
    @sherlwinc 3 года назад

    Brutal 🔥🔥

  • @zakariaboulouarde4591
    @zakariaboulouarde4591 3 года назад

    Thaaaank you very much

  • @cristobalbolados4727
    @cristobalbolados4727 2 года назад

    ¡contenido muy bueno!

  • @Seu-Ze
    @Seu-Ze 2 года назад

    Valeu. Zé do Brazil

  • @artizan007
    @artizan007 2 года назад

    Hi
    This is very cool.
    Have you got any tuts for adding a small image/images instead of text next to a radio element in Elementor forms. Ta
    Please let me know. Thanks

  • @andywelgen5892
    @andywelgen5892 3 года назад

    Ty a lot