WooCommerce + Elementor MCP + Angie Is INSANE

Thanks to Bluehost for sponsoring! Build an editable WooCommerce store with AI, ChatGPT and Elementor on WordPress. 👉 Bluehost good deal for websites imo: https://bluehost.sjv.io/1GL7Ym (sponsored) 👉 Work with me: support@bytegrad.com 👉 React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Web development roadmap & newsletter: https://email.bytegrad.com 👉 Discord: all my courses have a private Discord TIMESTAMPS 00:00 The editable AI store 04:33 ChatGPT setup 07:00 Building the HTML site 08:09 Improving the design 10:15 Generating product & hero images 12:00 Creating the background video 14:40 Hosting & WordPress setup 18:29 Astra, Elementor & WooCommerce 19:41 Angie & Elementor MCP 22:00 Discovering the available tools 23:59 Creating a test product with AI 25:15 Converting the design into WordPress 27:33 Products, sizes & cart 28:35 Editing in Elementor 29:51 Placing a demo order 30:31 Updating the site by chatting PROMPTS Use these in the same chat, with your own brand and design reference. Dictated prompts are lightly cleaned up. Keep your private MCP setup prompt and credentials out of public posts. 1. BUILD THE HTML SITE Build a simple responsive homepage for a sneaker store called AERFORM using HTML, CSS and JavaScript. Use colors and placeholders for now, without images or video. Open it in the Codex browser so we can look at it. 2. IMPROVE THE DESIGN I like this reference site, especially its hero section. Can you make our design feel more like it, while keeping it distinct and unique? We'll add video and images later. 3. GENERATE A PRODUCT IMAGE Generate a photorealistic studio product image of a contemporary low-top sneaker for a brand called AERFORM. Use bone-white mesh, cream overlays, a sculpted cream sole and a small acid-lime accent. Show one complete shoe in a clean three-quarter side view on a plain warm off-white background, with a soft natural shadow. Keep the entire shoe in frame. No text, no added logo, no other objects. Make it a square image. 4. CREATE THE HERO IMAGE Use that shoe image of the product we have and create a dedicated hero background image. 5. ADD THE ASSETS Thank you for the assets. Please add them to the website and generate any other images you may need. 6. CREATE THE BACKGROUND VIDEO (OPTIONAL) Turn the hero campaign image into a short, subtle looping video and add it to the hero section. Use subtle rain, gentle reflections and a slow camera move. No cuts, text, extra objects or product morphing. Keep the motion restrained, with no audio. Replace the static hero background in our local preview with the generated clip. Keep the hero image as its poster and fallback. Use muted playback, a visible pause/play control and a still image for reduced motion. Check readability and playback. Video generation uses the external Higgsfield integration shown in the recording and may cost extra. Connect it first, or keep the still image. 7. CHECK THE MCP TOOLS After installing Astra, Elementor, WooCommerce and Angie, enable Elementor MCP and connect using your own private setup prompt. Restart the app if requested, then ask: Can you list all the tools that this new MCP connection on WordPress makes available to you? 8. TEST WOOCOMMERCE ACCESS Can you add a dummy product in our WooCommerce catalog of products, just to see if the connection works? 9. BUILD THE WORDPRESS STORE Can you convert the design of this website that we built here into the WordPress instance we connected? Make sure to use Elementor. Create products in WooCommerce from the products we have on the site. Take care of navigation so the header links navigate to other pages. Set it all up in our WordPress instance. 10. FIX THE DEMO CHECKOUT Can you make sure I can check out and make a dummy order? Right now, when I put some gibberish in the checkout, it says no shipping method has been selected. Make that easier so we can at least place a dummy order, because I just want to demo this. 11. EDIT BY CHATTING Please remove the exclamation marks from the heading on the homepage and from the bottom. Also rename the second product, Pace 02, to Pace 0222. The order shown is a demo; live payments require separate gateway setup. #wordpress #woocommerce #ai #elementor #bluehost Note that these videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. ByteGrad and any of its affiliated people are not responsible for mistakes in code. This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 and KRS-number: 0001125554