15 min read
Elementor for E-Commerce: Mastering WooCommerce Integration and Template Architecture
Bridge the gap between transactional logic and visual design. This guide examines the architectural intersection of WooCommerce and Elementor, detailing how to leverage product data hooks, customize native widgets, and utilize the Pro Theme Builder to override default templates for Single Products, Archives, and Checkout flows without touching core files.
WooCommerce Basics
WooCommerce Hooks
WooCommerce provides extensive action and filter hooks throughout the shopping flow (product display, cart, checkout, orders) allowing developers to modify behavior without touching core files—essential for custom Elementor widget integration.
// Common WooCommerce hooks add_action('woocommerce_before_single_product', 'custom_before_product'); add_action('woocommerce_after_add_to_cart_button', 'add_custom_button'); add_filter('woocommerce_product_get_price', 'modify_price', 10, 2); add_action('woocommerce_checkout_before_customer_details', 'custom_checkout_field');
┌─────────────────────────────────────────────────────────────┐
│ WOOCOMMERCE HOOK FLOW │
├─────────────────────────────────────────────────────────────┤
│ SHOP PAGE SINGLE PRODUCT CART/CHECKOUT │
│ ─────────── ────────────── ────────────── │
│ before_shop_loop before_single_ before_cart │
│ ↓ product ↓ │
│ before_shop_ before_add_to_ cart_contents │
│ loop_item cart_form ↓ │
│ ↓ ↓ before_checkout_ │
│ after_shop_ after_add_to_ form │
│ loop_item cart_button ↓ │
│ ↓ ↓ checkout_order_ │
│ after_shop_loop after_single_ review │
│ product │
└─────────────────────────────────────────────────────────────┘
Product Types
WooCommerce supports four core product types: Simple (single item), Variable (with variations like size/color), Grouped (collection of related products), and External/Affiliate (links to external sites)—each requiring different handling in custom Elementor widgets.
// Check product type in widgets $product = wc_get_product($product_id); switch ($product->get_type()) { case 'simple': // Single price, single add-to-cart break; case 'variable': // Show variation dropdowns $variations = $product->get_available_variations(); break; case 'grouped': // Display child products $children = $product->get_children(); break; case 'external': // External URL button $url = $product->get_product_url(); break; }
┌─────────────────────────────────────────────────────────────┐
│ PRODUCT TYPES │
├───────────────┬─────────────────────────────────────────────┤
│ SIMPLE │ Single SKU, one price, direct purchase │
│ ┌─────┐ │ $product->get_price() │
│ │ 🎁 │ │ │
│ └─────┘ │ │
├───────────────┼─────────────────────────────────────────────┤
│ VARIABLE │ Multiple variations (size, color, etc.) │
│ ┌─────┐ │ $product->get_available_variations() │
│ │S M L│ │ │
│ └─────┘ │ │
├───────────────┼─────────────────────────────────────────────┤
│ GROUPED │ Parent product with child products │
│ ┌───┬───┐ │ $product->get_children() │
│ │ A │ B │ │ │
│ └───┴───┘ │ │
├───────────────┼─────────────────────────────────────────────┤
│ EXTERNAL │ Affiliate link to external site │
│ ┌─────┐→ │ $product->get_product_url() │
│ │ 🔗 │ │ │
│ └─────┘ │ │
└───────────────┴─────────────────────────────────────────────┘
Product Data
Product data encompasses all metadata stored for WooCommerce products including price, SKU, stock, dimensions, attributes, and custom meta—accessible via WC_Product methods or direct meta queries for Elementor widget displays.
// Accessing product data for Elementor widgets $product = wc_get_product($product_id); // Core product data $data = [ 'id' => $product->get_id(), 'name' => $product->get_name(), 'slug' => $product->get_slug(), 'sku' => $product->get_sku(), 'price' => $product->get_price(), 'regular_price' => $product->get_regular_price(), 'sale_price' => $product->get_sale_price(), 'stock_status' => $product->get_stock_status(), 'stock_qty' => $product->get_stock_quantity(), 'weight' => $product->get_weight(), 'dimensions' => $product->get_dimensions(), 'categories' => $product->get_category_ids(), 'tags' => $product->get_tag_ids(), 'image_id' => $product->get_image_id(), 'gallery_ids' => $product->get_gallery_image_ids(), ]; // Custom meta $custom = get_post_meta($product_id, '_custom_field', true);
WooCommerce Elementor Widgets
Product Grid Widget
The Product Grid widget displays products in a responsive grid layout with filtering options by category, tag, or custom query—Elementor provides built-in widgets while custom implementations extend \Elementor\Widget_Base with WC_Product_Query integration.
class Product_Grid_Widget extends \Elementor\Widget_Base { protected function render() { $settings = $this->get_settings_for_display(); $args = [ 'limit' => $settings['products_per_page'], 'columns' => $settings['columns'], 'category' => $settings['category'], 'orderby' => $settings['orderby'], 'order' => $settings['order'], ]; $products = wc_get_products($args); echo '<div class="product-grid columns-' . esc_attr($settings['columns']) . '">'; foreach ($products as $product) { ?> <div class="product-item"> <?php echo $product->get_image(); ?> <h3><?php echo esc_html($product->get_name()); ?></h3> <span class="price"><?php echo $product->get_price_html(); ?></span> </div> <?php } echo '</div>'; } }
┌─────────────────────────────────────────────────────────────┐
│ PRODUCT GRID LAYOUT │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ┌───┐ │ │ ┌───┐ │ │ ┌───┐ │ │ ┌───┐ │ │
│ │ │IMG│ │ │ │IMG│ │ │ │IMG│ │ │ │IMG│ │ │
│ │ └───┘ │ │ └───┘ │ │ └───┘ │ │ └───┘ │ │
│ │ Title │ │ Title │ │ Title │ │ Title │ │
│ │ $19.99 │ │ $29.99 │ │ $39.99 │ │ $49.99 │ │
│ │[Add Cart]│ │[Add Cart]│ │[Add Cart]│ │[Add Cart]│ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ┌───┐ │ │ ┌───┐ │ │ ┌───┐ │ │ ┌───┐ │ │
│ │ │IMG│ │ │ │IMG│ │ │ │IMG│ │ │ │IMG│ │ │
│ │ └───┘ │ │ └───┘ │ │ └───┘ │ │ └───┘ │ │
│ │ Title │ │ Title │ │ Title │ │ Title │ │
│ │ $59.99 │ │ $69.99 │ │ $79.99 │ │ $89.99 │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────────────────────────┘
Product Carousel Widget
Product Carousel displays products in a sliding/swipeable format using libraries like Swiper.js—ideal for featured products, related items, or category showcases with autoplay, navigation arrows, and pagination dots.
protected function render() { $settings = $this->get_settings_for_display(); $products = wc_get_products(['limit' => $settings['limit']]); $swiper_config = [ 'slidesPerView' => $settings['slides_to_show'], 'spaceBetween' => $settings['gap'], 'loop' => $settings['loop'] === 'yes', 'autoplay' => $settings['autoplay'] === 'yes' ? [ 'delay' => $settings['autoplay_speed'] ] : false, 'navigation' => [ 'nextEl' => '.swiper-button-next', 'prevEl' => '.swiper-button-prev', ], ]; ?> <div class="swiper product-carousel" data-config='<?php echo json_encode($swiper_config); ?>'> <div class="swiper-wrapper"> <?php foreach ($products as $product): ?> <div class="swiper-slide"> <!-- Product card --> </div> <?php endforeach; ?> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <?php }
┌─────────────────────────────────────────────────────────────┐
│ PRODUCT CAROUSEL │
├─────────────────────────────────────────────────────────────┤
│ │
│ ◄ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ► │
│ │ ┌───┐ │ │ ┌───┐ │ │ ┌───┐ │ │ ┌───┐ │ │
│ │ │ 1 │ │ │ │ 2 │ │ │ │ 3 │ │ │ │ 4 │ │ │
│ │ └───┘ │ │ └───┘ │ │ └───┘ │ │ └───┘ │ │
│ │Product 1│ │Product 2│ │Product 3│ │Product 4│ │
│ │ $19.99 │ │ $29.99 │ │ $39.99 │ │ $49.99 │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ● ○ ○ ○ ○ │
│ │
│ ←───── SWIPE DIRECTION ─────→ │
│ │
└─────────────────────────────────────────────────────────────┘
Cart Widget
The Cart widget displays mini-cart or full cart functionality showing items, quantities, subtotals, and actions—it hooks into WooCommerce cart sessions and uses AJAX for real-time updates without page refresh.
class Cart_Widget extends \Elementor\Widget_Base { protected function render() { if (WC()->cart->is_empty()) { echo '<p class="cart-empty">Your cart is empty</p>'; return; } ?> <div class="elementor-cart-widget"> <?php foreach (WC()->cart->get_cart() as $cart_key => $cart_item): $product = $cart_item['data']; ?> <div class="cart-item" data-key="<?php echo esc_attr($cart_key); ?>"> <?php echo $product->get_image('thumbnail'); ?> <span class="name"><?php echo esc_html($product->get_name()); ?></span> <span class="qty">× <?php echo $cart_item['quantity']; ?></span> <span class="total"><?php echo WC()->cart->get_product_subtotal($product, $cart_item['quantity']); ?></span> <a href="#" class="remove" data-cart-key="<?php echo $cart_key; ?>">×</a> </div> <?php endforeach; ?> <div class="cart-totals"> <span>Subtotal: <?php echo WC()->cart->get_cart_subtotal(); ?></span> </div> <a href="<?php echo wc_get_checkout_url(); ?>" class="checkout-btn">Checkout</a> </div> <?php } }
Checkout Widget
Checkout widgets customize the WooCommerce checkout experience, allowing multi-step layouts, custom field arrangements, and styled payment sections—requires careful handling of form fields and payment gateway integration.
// Custom checkout widget with multi-step support class Checkout_Widget extends \Elementor\Widget_Base { protected function render() { $settings = $this->get_settings_for_display(); if (WC()->cart->is_empty()) { return; } ?> <div class="elementor-checkout <?php echo $settings['layout']; ?>"> <?php if ($settings['multi_step'] === 'yes'): ?> <div class="checkout-steps"> <div class="step active" data-step="1">Billing</div> <div class="step" data-step="2">Shipping</div> <div class="step" data-step="3">Payment</div> </div> <?php endif; ?> <?php // Use WooCommerce checkout echo do_shortcode('[woocommerce_checkout]'); ?> </div> <?php } }
┌─────────────────────────────────────────────────────────────┐
│ MULTI-STEP CHECKOUT │
├─────────────────────────────────────────────────────────────┤
│ │
│ ●───────────────○───────────────○───────────────○ │
│ Billing Shipping Payment Review │
│ │
├─────────────────────────────────────────────────────────────┤
│ STEP 1: BILLING DETAILS │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ First Name │ │ Last Name │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ ┌───────────────────────────────────────────────┐ │
│ │ Email Address │ │
│ └───────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────┐ │
│ │ Street Address │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ Next Step → │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Account Widgets
Account widgets display user dashboard elements including orders history, downloads, addresses, and profile editing—they extend WooCommerce's my-account endpoints with custom Elementor styling and layouts.
class Account_Orders_Widget extends \Elementor\Widget_Base { protected function render() { if (!is_user_logged_in()) { echo '<p>Please <a href="' . wc_get_page_permalink('myaccount') . '">login</a></p>'; return; } $orders = wc_get_orders([ 'customer_id' => get_current_user_id(), 'limit' => $this->get_settings('limit'), ]); ?> <div class="account-orders-widget"> <table> <thead> <tr> <th>Order</th><th>Date</th><th>Status</th><th>Total</th> </tr> </thead> <tbody> <?php foreach ($orders as $order): ?> <tr> <td>#<?php echo $order->get_order_number(); ?></td> <td><?php echo $order->get_date_created()->format('M d, Y'); ?></td> <td><?php echo wc_get_order_status_name($order->get_status()); ?></td> <td><?php echo $order->get_formatted_order_total(); ?></td> </tr> <?php endforeach; ?> </tbody> </table> </div> <?php } }
WooCommerce Builder (Pro)
Single Product Template
Elementor Pro's Single Product Template allows complete customization of individual product pages using dynamic widgets (title, price, gallery, add-to-cart, tabs, reviews)—applied via display conditions to all products or specific categories.
┌─────────────────────────────────────────────────────────────┐
│ SINGLE PRODUCT TEMPLATE STRUCTURE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ BREADCRUMBS │ │
│ │ Home > Category > Product │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌───────────────────────┐ ┌───────────────────────────┐ │
│ │ │ │ {Product Title} │ │
│ │ ┌─────────────┐ │ │ ★★★★☆ (45 reviews) │ │
│ │ │ │ │ │ │ │
│ │ │ PRODUCT │ │ │ $99.99 $149.99 │ │
│ │ │ GALLERY │ │ │ ─────────────── │ │
│ │ │ │ │ │ │ │
│ │ └─────────────┘ │ │ {Short Description} │ │
│ │ ○ ○ ● ○ ○ │ │ │ │
│ │ │ │ Qty: [1] [ADD TO CART] │ │
│ └───────────────────────┘ │ │ │
│ │ SKU: ABC123 │ │
│ │ Category: Clothing │ │
│ └───────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [Description] [Additional Info] [Reviews (45)] │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ {Full product description content...} │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ RELATED PRODUCTS │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Product Archive Template
Product Archive templates control shop page, category archives, and tag archives—using dynamic widgets for products loop, filters, pagination, and sorting with display conditions targeting specific taxonomies.
┌─────────────────────────────────────────────────────────────┐
│ PRODUCT ARCHIVE TEMPLATE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ARCHIVE TITLE / DESCRIPTION │ │
│ │ {category.name} │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Showing 1-12 of 48 │ Sort: [Default ▼] │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌────────────┐ ┌─────────────────────────────────────┐ │
│ │ FILTERS │ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │
│ │ ───────── │ │ │ │ │ │ │ │ │ │ │ │
│ │ □ On Sale │ │ └───┘ └───┘ └───┘ └───┘ │ │
│ │ □ In Stock│ │ │ │
│ │ │ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │
│ │ PRICE │ │ │ │ │ │ │ │ │ │ │ │
│ │ ○──●────○ │ │ └───┘ └───┘ └───┘ └───┘ │ │
│ │ $0 $500 │ │ │ │
│ │ │ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │
│ │ CATEGORY │ │ │ │ │ │ │ │ │ │ │ │
│ │ □ Shoes │ │ └───┘ └───┘ └───┘ └───┘ │ │
│ │ □ Shirts │ │ │ │
│ └────────────┘ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ ← 1 2 3 4 5 ... 8 → │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Cart Page Template
Cart Page Template replaces the default WooCommerce cart with custom layouts featuring cart table, cross-sells, coupon forms, and totals—designed with Elementor widgets while maintaining full cart functionality.
┌─────────────────────────────────────────────────────────────┐
│ CART PAGE TEMPLATE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ SHOPPING CART │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Product │ Price │ Qty │ Subtotal │ X │ │
│ ├─────────────────────────────────────────────────────── │
│ │ [img] Blue Shirt │ $29.99 │ [2] │ $59.98 │ ✕ │ │
│ │ [img] Black Hat │ $19.99 │ [1] │ $19.99 │ ✕ │ │
│ │ [img] Sneakers │ $89.99 │ [1] │ $89.99 │ ✕ │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────┐ ┌─────────────────────────────┐ │
│ │ Coupon: [ ] │ │ CART TOTALS │ │
│ │ [APPLY COUPON] │ │ ───────────────────────── │ │
│ │ │ │ Subtotal: $169.96 │ │
│ │ [UPDATE CART] │ │ Shipping: $10.00 │ │
│ │ │ │ ───────────────────────── │ │
│ └─────────────────────┘ │ Total: $179.96 │ │
│ │ │ │
│ │ [PROCEED TO CHECKOUT] │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Checkout Page Template
Checkout Page Template provides complete control over checkout flow with customizable billing/shipping forms, order review, payment methods, and optional multi-step layouts—requires proper form handling for payment processing.
┌─────────────────────────────────────────────────────────────┐
│ CHECKOUT PAGE TEMPLATE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ BILLING DETAILS │ │ YOUR ORDER │ │
│ │ ───────────────── │ │ ─────────── │ │
│ │ First: [ ] │ │ Blue Shirt ×2 $59.98 │ │
│ │ Last: [ ] │ │ Black Hat ×1 $19.99 │ │
│ │ Email: [ ] │ │ Sneakers ×1 $89.99 │ │
│ │ Phone: [ ] │ │ ───────────────── │ │
│ │ Address: [ ] │ │ Subtotal: $169.96 │ │
│ │ City: [ ] Zip:[ ] │ │ Shipping: $10.00 │ │
│ │ │ │ Tax: $15.00 │ │
│ │ □ Ship to different │ │ ═════════════════ │ │
│ │ address │ │ TOTAL: $194.96 │ │
│ │ ───────────────── │ │ │ │
│ │ PAYMENT METHOD │ │ │ │
│ │ ○ Credit Card │ │ │ │
│ │ ○ PayPal │ │ │ │
│ │ ○ Bank Transfer │ │ │ │
│ │ ───────────────── │ │ │ │
│ │ [ PLACE ORDER ] │ │ │ │
│ └─────────────────────────┘ └─────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
My Account Template
My Account Template customizes the customer dashboard with navigation, endpoints (orders, downloads, addresses, account details), and logout—enabling branded user experiences with Elementor's design flexibility.
┌─────────────────────────────────────────────────────────────┐
│ MY ACCOUNT TEMPLATE │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Welcome back, John! │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌────────────────┐ ┌─────────────────────────────────┐ │
│ │ NAVIGATION │ │ │ │
│ │ ───────────── │ │ RECENT ORDERS │ │
│ │ ▸ Dashboard │ │ ──────────────────────────── │ │
│ │ Orders │ │ #1234 │ Mar 1 │ Complete │$99 │ │
│ │ Downloads │ │ #1233 │ Feb 28│ Shipped │$45 │ │
│ │ Addresses │ │ #1232 │ Feb 15│ Complete │$120 │ │
│ │ Account │ │ │ │
│ │ ───────── │ │ [VIEW ALL ORDERS] │ │
│ │ Logout │ │ │ │
│ │ │ │ ┌────────────┐ ┌────────────┐ │ │
│ │ │ │ │ BILLING │ │ SHIPPING │ │ │
│ │ │ │ │ ADDRESS │ │ ADDRESS │ │ │
│ │ │ │ │ John Doe │ │ John Doe │ │ │
│ │ │ │ │ 123 Main │ │ 456 Oak St │ │ │
│ │ │ │ │ [EDIT] │ │ [EDIT] │ │ │
│ │ │ │ └────────────┘ └────────────┘ │ │
│ └────────────────┘ └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘