{"id":8352,"date":"2019-06-06T09:16:29","date_gmt":"2019-06-06T09:16:29","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8352"},"modified":"2023-01-24T19:04:39","modified_gmt":"2023-01-24T19:04:39","slug":"jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/","title":{"rendered":"How to Use WooCommerce Product Widget"},"content":{"rendered":"\n<p>With the WooCommerce Product widget, you can display products in the easiest way using the JetElements plugin. This widget is perfect for adding custom products to your website\u2019s page by their IDs or an SKU number.<\/p>\n\n\n\n<p>Here you will learn how to showcase products on your website\u2019s page built with Elementor with the help of WooCommerce Product widget.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Copy the ID or SKU<\/strong><\/p>\n\n\n\n<p>Open your WordPress Dashboard and navigate to the <strong><em>Products<\/em><\/strong><em> &gt; <\/em><strong><em>All Products<\/em><\/strong>. Here you\u2019ll see the list of all your products. To showcase a certain product, you\u2019ll need its <strong>ID<\/strong> number. You can simply hover over the product to see its <strong>ID<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/product-id.png\" alt=\"product's ID\" class=\"wp-image-20797\"\/><\/div>\n\n\n\n<p>Also, there\u2019s an option to display products by their <strong>SKU<\/strong> number. <strong>SKU<\/strong> refers to a Stock-keeping unit, a unique identifier for each distinct product and service that can be purchased.<\/p>\n\n\n\n<p>You can use an already generated <strong>SKU<\/strong> number or set your own. To set your own <strong>SKU <\/strong>number, choose the product, and click on the &#8220;<strong>Edit<\/strong>&#8221; button. Then, navigate to the<strong> Inventory <\/strong>section and set the number in the <strong>SKU<\/strong> field. Don\u2019t forget to click on the &#8220;<strong>Update<\/strong>&#8221; button to save the changes.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/product-sku.png\" alt=\"product's SKU\" class=\"wp-image-20799\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Add the widget to the page<\/strong><\/p>\n\n\n\n<p>Afterward, open the page to which you want to add a <strong>WooCommerce Product<\/strong> widget and drag the widget to the needed section.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/product-widget.png\" alt=\"WooCommerce Product widget\" class=\"wp-image-20800\"\/><\/div>\n\n\n\n<p> In the <strong>Content Settings<\/strong> block, you need to paste the <strong>Product ID <\/strong>of the product which you want to display on the page.<\/p>\n\n\n\n<p>There\u2019s also an option to set the<strong> Product SKU<\/strong>, so you can show a product from stock on your page.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/product-settings.png\" alt=\"WooCommerce Product settings\" class=\"wp-image-20798\"\/><\/div>\n\n\n\n<p>The last step in to save the changes. Click on the &#8220;<strong>Publish<\/strong>&#8221; button and preview the result.<\/p>\n\n\n\n<p>You\u2019re done! Now you know how to add a certain product to your website using the <strong>WooCommerce Product<\/strong> widget. Hope this tutorial was useful.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains how to add WooCommerce Product widget from JetElements plugin to your website.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[512],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Add WooCommerce Product Widget | Crocoblock<\/title>\n<meta name=\"description\" content=\"See how to use WooCommerce Product widget from JetElements plugin for displaying products on by their IDs or SKU numbers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Add WooCommerce Product Widget | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"See how to use WooCommerce Product widget from JetElements plugin for displaying products on by their IDs or SKU numbers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-24T19:04:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/product-id.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/\",\"name\":\"JetElements: How to Add WooCommerce Product Widget | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-06T09:16:29+00:00\",\"dateModified\":\"2023-01-24T19:04:39+00:00\",\"description\":\"See how to use WooCommerce Product widget from JetElements plugin for displaying products on by their IDs or SKU numbers.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use WooCommerce Product Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Add WooCommerce Product Widget | Crocoblock","description":"See how to use WooCommerce Product widget from JetElements plugin for displaying products on by their IDs or SKU numbers.","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:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Add WooCommerce Product Widget | Crocoblock","og_description":"See how to use WooCommerce Product widget from JetElements plugin for displaying products on by their IDs or SKU numbers.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/","og_site_name":"Help Center","article_modified_time":"2023-01-24T19:04:39+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/product-id.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/","name":"JetElements: How to Add WooCommerce Product Widget | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-06T09:16:29+00:00","dateModified":"2023-01-24T19:04:39+00:00","description":"See how to use WooCommerce Product widget from JetElements plugin for displaying products on by their IDs or SKU numbers.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-woocommerce-product-widget-how-to-add-custom-products-to-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Use WooCommerce Product Widget"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8352"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8352"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8352"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}