---
title: "Create Custom Elementor Shop Page with Google AntiGravity"
source_url: https://youtu.be/qDWhB9J4dUw
captured_at: 2026-04-13
author: "WPDev"
contributor: "ชิดชนก"
platform: youtube
---
# Create Custom Elementor Shop Page with Google AntiGravity

youtube video by **WPDev**, 10m13s, uploaded 2026-03-08. URL: https://youtu.be/qDWhB9J4dUw
Tags: elementor woocommerce shop page, elementor woocommerce tutorial, build woocommerce shop page elementor, elementor free woocommerce shop page, woocommerce shop page elementor free, elementor product grid tutorial, woocommerce ajax filters elementor, create woocommerce shop page wordpress, elementor ecommerce tutorial, woocommerce filters elementor free, wordpress woocommerce shop design, google ant

## Shared in LINE Note+
- 2026-04-13 15:29 by ชิดชนก
- 2026-04-13 18:11 by ชิดชนก

## Description
In this video, I’ll show you how to build a WooCommerce shop page with Elementor Free using Google AntiGravity. We’ll generate a custom plugin and Elementor layout with AJAX filters, a responsive product grid, and a modern design, then install it in WordPress, fix common issues, and refine the styling. By the end, you’ll have a stable, responsive shop page you can reuse on your own site. All prompts, templates, plugin files, and CSS are linked below.

⭐ Get 50% OFF for BlogVault: 

Prompt & Code: 

Plugin & Template: 

00:00 Build a WooCommerce shop page with Elementor Free
01:07 Generate the shop plugin with Google AntiGravity
02:40 Install the plugin and Elementor layout in WordPress
05:27 Fix filter and layout issues after installation
06:50 Add Elementor style controls for customization
08:21 Final design polish and make the shop stable

#Elementor #WooCommerce #WordPressTutorial #ElementorTutorial #WooCommerceShop