Create Virtual Product

Creating a virtual product in your WooCommerce store enables you to sell digital items such as ebooks, guides, or any downloadable content without the need for physical shipping. This process is straightforward and utilizes the same product creation interface with specific options enabled for virtual and downloadable products.

Steps to Create a Virtual Product

Begin by navigating to the WordPress dashboard and selecting Products > Add New. Enter your product name and detailed description in the product editor area. The description supports rich text formatting, allowing you to customize the text similar to a word processor.

In the Product Data section, select Simple product but check both the Virtual and Downloadable checkboxes. These options tell WooCommerce that the product is digital and does not require shipping.

Setting the Price and Downloadable Files

After setting the price and upload files, assign a product image to represent the virtual product visually. You can also categorize the product by adding it to an appropriate category such as “ebook”. When all details are complete, publish the product.

Customer Experience with Virtual Products

Once a customer purchases a virtual product, they can immediately download it from the order confirmation page or their account orders section. WooCommerce automatically manages the download links and restricts access based on the limits you set.

Virtual products do not require shipping details during checkout, simplifying the purchase process and providing a seamless experience for digital goods.

Create Other Products

Besides virtual products, WooCommerce supports multiple product types : simple physical products, variable products with multiple options, and affiliate products that redirect customers to external sites. Understanding how to create each product type will allow you to build a versatile and professional online store.

Simple Physical Products

Simple products are tangible items that require shipping. To create one, go to Products > Add New, enter the product name and description, and ensure the product type is set to Simple product without the virtual or downloadable options checked.

Set the regular and sale prices, and provide details such as SKU, stock quantity, weight, and dimensions under the Inventory and Shipping tabs. Assign categories and tags to organize your products effectively.

Variable Products

Variable products allow customers to select options like size or color. To create a variable product :

• Choose Variable product from the product type selector.
• Add attributes such as color or size by going to Products > Attributes and creating the attribute terms with color swatches or size options.
• Back in the product editor, add existing attributes and enable the Used for variations option.
• Navigate to the Variations tab and generate variations automatically or add them manually.
• Set individual prices, images, and stock for each variation.

Variable products provide customers with a dynamic shopping experience where prices and images update based on the selected options.

Affiliate Products

Affiliate products redirect customers to external websites like Amazon. To create one :

• Select External/Affiliate product from the product data dropdown.
• Enter the affiliate URL in the Product URL field.
• Customize the button text to indicate where the link leads, e.g., “Buy from Amazon”.
• Enter product price information for display purposes.
• Upload product images and assign categories.

When users click the buy button, they are taken to the affiliate site to complete the purchase, and you earn commissions accordingly.

Additional Product Management

To enhance product management, you can :

• Use stock management to show limited quantities.
• Add upsell and cross-sell products to increase sales.
• Manage product tags and brands for better filtering.

Once products are created, they appear on your shop page, where customers can browse, filter, and add items to their cart or wishlist.

Add Coupon Codes

Coupon codes are essential for running promotions and offering discounts to customers. WooCommerce simplifies coupon creation and management, allowing you to define discount types, usage restrictions, and expiration dates.

Creating a Coupon Code

Access the Marketing > Coupons section in your WordPress dashboard, then click Add New Coupon.

Enter a unique coupon code, such as JFD20, and provide a description to clarify the promotion, e.g., “20% discount”.

Coupon Data Settings

Usage Restrictions

You can impose restrictions such as minimum or maximum spend, specific products or categories the coupon applies to, and exclusion of certain products.

Usage Limits

Define how many times the coupon can be used overall and per user, allowing control over the promotion’s reach.

Applying Coupons in Checkout

Customers can apply coupon codes on the cart or checkout page in a dedicated coupon field. Once applied, the discount is automatically calculated and reflected in the order total, including shipping and taxes if applicable.

Overview Buying Process

Understanding the customer buying journey on your WooCommerce store is crucial for optimizing conversions and user experience. Here’s a comprehensive overview of the process from browsing to order completion.

Adding Products to Cart

Customers browse products on the shop page or category pages. For simple products, they can add items directly to the cart with a single click. Variable products require selecting options before adding to the cart.

A mini cart appears on the page, showing added items with the ability to update quantities or proceed to checkout.

Wishlist Functionality

Customers can add products to a wishlist for future reference. The wishlist page allows reviewing saved items, sharing the list on social media, or adding wishlist items to the cart.

Cart Page

The cart page displays all selected items, quantities, and prices. Customers can update quantities, remove products, and apply coupon codes. Shipping costs and taxes are calculated based on the customer’s location.

Checkout Process

On the checkout page, customers provide their contact information, billing and shipping addresses, and select a payment method. WooCommerce supports multiple payment gateways like Stripe and PayPal, integrated directly into the store for seamless transactions.

The right sidebar presents an order summary including products, subtotal, shipping, taxes, discounts, and total cost. Customers can also apply coupon codes here to benefit from discounts.

Order Placement and Confirmation

Once the customer reviews all details and places the order, a thank you page confirms the purchase and provides order details including downloadable links for virtual products if applicable.

As the store owner, you receive instant notifications via email or phone about new orders, allowing you to manage and process orders promptly.

Customer Account and Order Management

Customers can log into their accounts to view past orders, download purchased virtual products, edit billing and shipping addresses, manage payment methods, and log out securely.

Get The Kitninja Template

Designing a professional and visually appealing e-commerce website can be time-consuming. Kitninja offers high-quality Elementor template kits tailored for various niches, providing a quick and affordable way to launch a stunning online store.

About Kitninja

Kitninja is a marketplace with hundreds of professionally designed Elementor templates, created by experienced designers. The templates cover a wide range of e-commerce niches and come with detailed demos showcasing mobile and tablet responsiveness.

Benefits of Using Kitninja Templates

• Professional Design : Ready-made, modern designs that enhance trust and user engagement.
• Time-Saving : Drastically reduce the time needed to build your website from scratch.
• Affordable : Templates are priced reasonably, with options to purchase single kits or all-access plans.
• Easy Import : Seamlessly import templates into your Elementor-built website.
• Ongoing Updates : Access to future template updates and new releases.

How to Access and Use Kitninja Templates

Visit kitninja.com and browse templates using keyword searches relevant to your niche, such as “wristy” for a watch store template. Preview live demos to ensure it fits your vision.

Purchase the desired template or subscribe to the all-access plan for broader usage and frequent updates. Download the template kit and import it into your WordPress site using Elementor’s template import feature.

Ideal Users of Kitninja

Kitninja templates are perfect for freelancers, agencies, and entrepreneurs seeking to build client websites or personal e-commerce stores quickly without compromising on quality.

Design The Website

After setting up WordPress, WooCommerce, and installing necessary plugins, the next crucial step is designing your website to create an engaging, professional shopping experience. Using Elementor and associated add-ons, you can craft a fully responsive, SEO-friendly, and visually stunning e-commerce store.

Homepage Creation

Create a new page named “Home” and set it as the static front page under Settings > Reading. Launch Elementor on this page to begin the design.

Working with Elementor

Elementor offers a drag-and-drop interface with a sidebar containing widgets and styling options. Add containers to structure your layout and insert elements like headings, text editors, images, and buttons inside containers.

Customize typography by selecting fonts such as ‘Jost’ or ‘Marcellus’, adjusting sizes, weights, line heights, and letter spacing to achieve the desired aesthetic. Use color pickers to apply your theme’s color palette consistently.

Building Key Sections

Banner Section

Divide the banner into two containers to create a split background using gradient colors. Use beige and black with a 90-degree angle gradient to achieve a modern look.

Add text editors for tagline and headline, style fonts, and insert a product image with rounded top corners. Position a call-to-action button that links to your shop page, styling it with hover effects and precise positioning using absolute positioning and offset controls.

Decorate with additional images like stars for depth and interest, hiding overflow to maintain clean edges.

Category Section

Create containers with background colors and padding to highlight product categories. Use headings, buttons with custom icons, and images to represent categories. Duplicate containers to build symmetrical sections with contrasting color schemes for visual balance.

Product Sections

Use shortcode widgets to display bestseller and featured products dynamically. Apply custom CSS within HTML widgets to style product cards with backgrounds, borders, and typography that match your website theme.

Include spacing sections such as testimonials imported from pre-made JSON templates for added trust and credibility.

Services Section

Design a row of service items using image boxes, combining icons, headings, and descriptions. Employ borders selectively and adjust padding and gaps for a balanced layout.

Blog Section

Add a heading and a blog posts widget to showcase recent articles. Customize layout style, post count, meta data display, and remove unnecessary icons for a clean appearance.

Contact Page

Create a contact page with a banner featuring a background image and overlay for contrast. Add a heading and breadcrumb navigation. Incorporate a Google Map widget with custom location and CSS filters to grayscale the map.

Add contact details using icon lists and social icons. Build a functional contact form with Metform, including fields for name, email, website, message, and a styled submit button. Configure email notifications for both admin and users.

Responsiveness and Mobile Optimization

Use Elementor’s built-in device preview modes to adjust layouts, font sizes, paddings, and margins for tablets, mobiles, and laptops. Techniques include flipping gradient angles, resizing images and buttons, adjusting container widths, and controlling flexbox properties like wrapping and justification.

Header and Footer Customization

Create menus for navigation under Appearance > Menus, adding links to key pages like Home, Shop, Blog, Contact, and Wishlist.

Customize header typography, colors, and layout for clarity and aesthetic consistency.

Design a footer with multiple widget columns containing your logo, company description, social media icons, navigation links, and contact information. Use global color and typography settings to maintain design harmony.

WooCommerce Pages and Widgets

Customize product catalog settings such as products per row and image hover animations. Use shortcodes for cart and checkout pages to maintain theme consistency.

Adjust sidebar widgets for product search, filters, and categories to enhance user navigation.

Apply custom CSS via Elementor’s HTML widget or the theme customizer’s Additional CSS section to refine the look of product cards, shop filters, single product pages, and blog posts.

Overall, by combining Elementor’s powerful design tools, WooCommerce’s e-commerce features, and custom CSS, you can create a free, professional, responsive, and fully functional online store without writing any code.