{"id":126267,"date":"2025-01-21T14:05:15","date_gmt":"2025-01-21T12:05:15","guid":{"rendered":"https:\/\/elementor.com\/blog\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/"},"modified":"2025-12-18T03:03:20","modified_gmt":"2025-12-18T01:03:20","slug":"producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/","title":{"rendered":"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI"},"content":{"rendered":"\n<p>In de competitieve e-commercewereld van vandaag is het cre\u00ebren van een boeiende gebruikerservaring de sleutel tot het stimuleren van verkopen. Met Elementor AI kun je je WooCommerce-productgrids naar een hoger niveau tillen door dynamische hover-acties toe te voegen &#8211; zonder een regel code te schrijven. Deze tutorial leidt je stap voor stap door het proces van het gebruik van Elementor AI om handige icoontjes met aangepaste hover-effecten te maken, waardoor je winkel zowel functioneel als visueel aantrekkelijk wordt.<br \/><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Wat je gaat leren<\/strong><\/h2>\n\n<p>In deze tutorial laten we je zien hoe je:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Dynamische hover-acties toevoegt aan WooCommerce-productitems.<\/li>\n\n\n\n<li>Handige icoontjes maakt zoals <strong>Add to Cart<\/strong>, <strong>Quick View<\/strong>, en <strong>Share<\/strong>.<\/li>\n\n\n\n<li>Elementor AI gebruikt om tooltips, aangepaste <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-cssen-hoe-het-te-gebruiken-in-webontwerp\/\" title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"29328\">CSS<\/a> en JavaScript te genereren voor naadloze interactie.<\/li>\n\n\n\n<li>Vloeiende animaties toevoegt om de gebruikerservaring te verbeteren.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\"><strong>Stap-voor-stap tutorial<\/strong><\/h3>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 1: Je productitem instellen<\/strong><\/h5>\n\n<p>Zorg er eerst voor dat je je productitem hebt ingesteld met de <strong>Loop Grid<\/strong> widget van Elementor. Met deze widget kun je aangepaste productsjablonen ontwerpen, zodat je volledige controle hebt over de lay-out en stijl van elk product in je WooCommerce-winkel.<\/p>\n\n<p><em>Opmerking: Als je je productitem nog niet hebt gemaakt, volg dan <\/em><a href=\"https:\/\/elementor.com\/help\/loop-grid\/\"><em>Elementor&#8217;s documentatie over de Loop Grid widget<\/em><\/a><em> om het in te stellen.<\/em><\/p>\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 2: Maak een speciale container voor acties<\/strong><\/h5>\n\n<ol class=\"wp-block-list\">\n<li>Voeg in het Loop Product Item een nieuwe container toe voor je handige icoontjes.<\/li>\n\n\n\n<li>Ontwerp de container zodat deze naadloos past binnen je productlay-out.<\/li>\n\n\n\n<li>Stel de positie van de container in op &#8220;<strong>absolute<\/strong>&#8221; voor precieze plaatsing.<\/li>\n\n\n\n<li>Wijs in het tabblad Geavanceerd een klasse toe aan de container, bijvoorbeeld panel.<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/01\/cover-15-1024x538.png\" alt=\"\" class=\"wp-image-122873\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/01\/cover-15-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/01\/cover-15-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/01\/cover-15-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1200\/blog\/wp-content\/uploads\/2025\/01\/cover-15.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 3: Voeg handige icoontjes toe<\/strong><\/h5>\n\n<p>Voeg binnen de .panel container drie icoontjes toe:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Quick Add to Cart<\/strong>: Een knop waarmee gebruikers het product direct aan hun winkelwagen kunnen toevoegen.<br \/><em>Tip: Gebruik de optie Aangepast veld van Elementor om de product-ID te koppelen voor functionaliteit. Laat me in de reacties weten of je ge\u00efnteresseerd zou zijn in dit soort tutorials.<\/em><\/li>\n\n\n\n<li><strong>Quick View<\/strong>: Een icoontje dat een <a href=\"https:\/\/elementor.com\/help\/off-canvas-widget\/\">Off Canvas widget<\/a> opent met meer productdetails.<br \/><em>Opmerking: Zorg ervoor dat de Off Canvas widget vooraf is geconfigureerd voor je winkel.<\/em><\/li>\n\n\n\n<li><strong>Share<\/strong>: Een icoontje om het product te delen via platforms zoals WhatsApp.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2025\/01\/cover-16-1024x538.png\" alt=\"\" class=\"wp-image-122880\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2025\/01\/cover-16-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2025\/01\/cover-16-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2025\/01\/cover-16-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1200\/blog\/wp-content\/uploads\/2025\/01\/cover-16.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 4: Voeg tooltips toe aan icoontjes<\/strong><\/h5>\n\n<p>Gebruik Elementor AI om tooltips voor de icoontjes te genereren:<\/p>\n\n<p>1. Selecteer het eerste icoontje.<\/p>\n\n<p>2. Ga naar Aangepaste <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/nl\/wat-is-cssen-hoe-het-te-gebruiken-in-webontwerp\/\" title=\"What Is CSS? How to Use it in Web Design (2026)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"32951\">CSS<\/a> in het tabblad Geavanceerd en voer de volgende AI-prompt in:<\/p>\n\n<div class=\"textToCopyWrap\"><p class=\"textToCopy\">\nVoeg een tooltip toe aan de linkerkant van het icoontje met de tekst &#8216;Add to Cart&#8217;. De tooltip moet een zwarte achtergrond, witte tekst en een lettergrootte van 14px hebben.\n<\/p>\n <button class=\"copyButton\">Kopieer prompt<\/button>\n<\/div>\n\n<p>3. Herhaal dit voor de overige icoontjes met behulp van de <strong>Prompt History<\/strong> om tijd te besparen en pas de inhoud naar behoefte aan.<\/p>\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 5: Verberg de container standaard<\/strong><\/h5>\n\n<p>Gebruik Elementor AI om de .panel container te verbergen:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Ga naar Aangepaste CSS in het tabblad Geavanceerd en voer de volgende AI-prompt in:<\/li>\n<\/ul>\n\n<div class=\"textToCopyWrap\"><p class=\"textToCopy\">\nVerberg deze container.\n<\/p>\n <button class=\"copyButton\">Kopieer prompt<\/button>\n<\/div>\n\n<p>Dit zorgt ervoor dat de container verborgen is, tenzij de gebruiker over het productitem beweegt. Hoewel het waar is dat de door AI gegenereerde code eenvoudig en makkelijk te schrijven is, is de echte les hoe moeiteloos je AI in je workflow kunt integreren &#8211; zelfs voor taken die zo simpel zijn als deze. Het gaat niet om de technische uitdaging, maar om het besparen van waardevolle tijd. Waarom zou je de code handmatig schrijven als AI het binnen enkele seconden voor je kan regelen?<\/p>\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 6: Toon de container bij hover<\/strong><\/h5>\n\n<p>Genereer JavaScript door Custom Code te gebruiken om de container te laten verschijnen bij hover (vermijd het gebruik van de HTML-widget in een dynamisch sjabloon om conflicten te voorkomen):<\/p>\n\n<p>1. Ga naar het WP-dashboard en maak onder Elementor &gt; Custom Code een nieuwe snippet aan.<\/p>\n\n<p>2. Kies <\/p>\n\n<p>3. Klik op het AI-icoontje en typ de volgende AI-prompt:<\/p>\n\n<div class=\"textToCopyWrap\"><p class=\"textToCopy\">\nAlleen met JavaScript-code, laat een container met de class .panel verschijnen (gebruik display: flex) als je met je muis over het bijbehorende loop-item met de class .e-loop-item gaat. Zorg ervoor dat elke .panel onafhankelijk werkt. \n<\/p>\n  <button class=\"copyButton\">Kopieer prompt<\/button>\n<\/div>\n\n \/\/ Get all instances of the wrapper\n document.querySelectorAll(&#8220;.textToCopyWrap&#8221;).forEach(wrapper =&gt; {\n    \/\/ Find the copy button and text within each wrapper\n    const copyButton = wrapper.querySelector(&#8220;.copyButton&#8221;);\n    const textToCopy = wrapper.querySelector(&#8220;.textToCopy&#8221;);\n\n    \/\/ Add click event listener to the copy button\n    copyButton.addEventListener(&#8220;click&#8221;, function () {\n      \/\/ Copy the text inside the paragraph\n      navigator.clipboard.writeText(textToCopy.innerText)\n        .then(() =&gt; {\n          alert(&#8220;Text copied to clipboard!&#8221;);\n        })\n        .catch(err =&gt; {\n          console.error(&#8220;Failed to copy text: &#8220;, err);\n        });\n    });\n  });\n\n\n\n.textToCopyWrap {\n  margin-bottom: 20px;\n}\n\np.textToCopy {\n  border: 1px solid #EEE;\n  border-radius: 8px;\n  padding: 32px;\n}\n\nbutton.copyButton {\n  background-color: #000;\n  color: white;\n}\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h5 class=\"wp-block-heading\"><strong>Stap 7: Voeg vloeiende inkom-animaties toe<\/strong><\/h5>\n\n<p>Voor een gelikte touch:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Ga naar het Advanced-tabblad van de .panel container.<\/li>\n\n\n\n<li>Gebruik Elementor&#8217;s Motion Effects om een inkom-animatie toe te passen (bijv. <strong>Fade In Right<\/strong>).<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/GIF-wide_2-1.gif\" alt=\"\" class=\"wp-image-122904\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\"><strong>Eindresultaat<\/strong><\/h3>\n\n<p>Je WooCommerce-productraster is nu opgepimpt met interactieve icoontjes, custom tooltips en dynamische hover-effecten. Bezoekers kunnen nu op een toffe manier met je winkel interacteren, wat de functionaliteit en gebruikservaring een boost geeft.<\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Waarom Elementor AI gebruiken?<\/strong><\/h2>\n\n<p>Elementor AI haalt het gedoe van coderen weg, zodat jij je kunt focussen op het maken van gave, professionele websites. Met een paar simpele prompts kun je CSS, JavaScript en custom stijlen genereren of toffe teksten en afbeeldingen maken. Zo stroomlijn je je workflow en breng je je idee\u00ebn sneller tot leven dan ooit.<br \/>Dit is maar \u00e9\u00e9n voorbeeld van hoe Elementor AI je website-bouw-ervaring kan transformeren. Met z&#8217;n intu\u00eftieve tools en krachtige mogelijkheden heb je alles in huis om betere websites te bouwen, tijd te besparen en voorop te blijven lopen.<\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Conclusie<\/strong><\/h2>\n\n<p>Klaar om je WooCommerce-winkel naar een hoger niveau te tillen? Begin vandaag nog met Elementor AI en bespaar waardevolle bouwtijd. Met z&#8217;n krachtige mogelijkheden lever je in no-time verbluffende designs die je klanten zullen betoveren.<\/p>\n\n<p>Ontdek Elementor AI en maak professionele WooCommerce-designs zonder gedoe. Begin vandaag nog met je gratis proefperiode en verander je workflow compleet!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert &#8211; allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.<\/p>\n","protected":false},"author":744323,"featured_media":122867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[294,298,366],"tags":[426],"marketing_persona":[],"marketing_intent":[],"class_list":["post-126267","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-ai-nl","category-elementor-team-writes-nl","category-woocommerce-nl","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI<\/title>\n<meta name=\"description\" content=\"Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert - allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI\" \/>\n<meta property=\"og:description\" content=\"Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert - allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-21T12:05:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T01:03:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shmuel Abramoff\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shmuel Abramoff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\"},\"author\":{\"name\":\"Shmuel Abramoff\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/bf46837d228dbd35d147ce4f35f012a5\"},\"headline\":\"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI\",\"datePublished\":\"2025-01-21T12:05:15+00:00\",\"dateModified\":\"2025-12-18T01:03:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\"},\"wordCount\":982,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png\",\"keywords\":[\"Video\"],\"articleSection\":[\"Elementor AI\",\"Elementor-team schrijft\",\"WooCommerce\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\",\"name\":\"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png\",\"datePublished\":\"2025-01-21T12:05:15+00:00\",\"dateModified\":\"2025-12-18T01:03:20+00:00\",\"description\":\"Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert - allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor AI\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/category\/elementor-ai-nl\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/bf46837d228dbd35d147ce4f35f012a5\",\"name\":\"Shmuel Abramoff\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6ccda0469e9237dfaba3a9268f33608ca70d4ff41b0a65db0a90bdc4c113d847?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6ccda0469e9237dfaba3a9268f33608ca70d4ff41b0a65db0a90bdc4c113d847?s=96&d=mm&r=g\",\"caption\":\"Shmuel Abramoff\"},\"description\":\"Shmuel, Elementor's Library Lead, drives library initiatives and focuses on leveraging AI to revolutionize web creation. With extensive experience in WordPress web design and startup management, he excels at creating ideas to streamline workflows. Outside work, he finds energy and escape in weekly boxing sessions.\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/author\/user-5e9d99d0a8d3a\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI","description":"Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert - allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/","og_locale":"nl_NL","og_type":"article","og_title":"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI","og_description":"Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert - allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.","og_url":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-01-21T12:05:15+00:00","article_modified_time":"2025-12-18T01:03:20+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png","type":"image\/png"}],"author":"Shmuel Abramoff","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Shmuel Abramoff","Geschatte leestijd":"5 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/"},"author":{"name":"Shmuel Abramoff","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/bf46837d228dbd35d147ce4f35f012a5"},"headline":"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI","datePublished":"2025-01-21T12:05:15+00:00","dateModified":"2025-12-18T01:03:20+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/"},"wordCount":982,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png","keywords":["Video"],"articleSection":["Elementor AI","Elementor-team schrijft","WooCommerce"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/","url":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/","name":"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png","datePublished":"2025-01-21T12:05:15+00:00","dateModified":"2025-12-18T01:03:20+00:00","description":"Ontdek hoe Elementor AI het maken van dynamische hover-acties voor WooCommerce-productitems vereenvoudigt. Leer stap voor stap hoe je handige icoontjes toevoegt, hover-effecten aanpast en je productgrid-ontwerp verbetert - allemaal zonder te coderen! Perfect voor freelancers en WooCommerce-winkeleigenaren.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/01\/cover-14.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/producttutorial-verbeter-woocommerce-productitems-met-dynamische-hover-acties-met-behulp-van-elementor-ai\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Elementor AI","item":"https:\/\/elementor.com\/blog\/nl\/category\/elementor-ai-nl\/"},{"@type":"ListItem","position":3,"name":"Producttutorial: Verbeter WooCommerce-productitems met dynamische hover-acties met behulp van Elementor AI"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/bf46837d228dbd35d147ce4f35f012a5","name":"Shmuel Abramoff","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6ccda0469e9237dfaba3a9268f33608ca70d4ff41b0a65db0a90bdc4c113d847?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6ccda0469e9237dfaba3a9268f33608ca70d4ff41b0a65db0a90bdc4c113d847?s=96&d=mm&r=g","caption":"Shmuel Abramoff"},"description":"Shmuel, Elementor's Library Lead, drives library initiatives and focuses on leveraging AI to revolutionize web creation. With extensive experience in WordPress web design and startup management, he excels at creating ideas to streamline workflows. Outside work, he finds energy and escape in weekly boxing sessions.","url":"https:\/\/elementor.com\/blog\/nl\/author\/user-5e9d99d0a8d3a\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/744323"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=126267"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126267\/revisions"}],"predecessor-version":[{"id":149660,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/126267\/revisions\/149660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/122867"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=126267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=126267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=126267"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=126267"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=126267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}