1. Setting Up Your Store

1.1 Store Details

• Store Location: Provide details about your store’s location, including country and address. This information is crucial for tax calculations and shipping configurations.
• Currency: Select the currency your store will use. WooCommerce supports multiple currencies, allowing you to choose the one most relevant to your business.
• Product Type: Choose the types of products you plan to sell, such as physical goods, digital products, subscriptions, or memberships. This will help WooCommerce tailor its features to your needs.

2.1 Business Details

WooCommerce will ask for additional business details, such as the number of products you plan to sell and whether you are currently selling elsewhere. Providing accurate information helps WooCommerce optimize settings for your store.

2. Configuring Basic Settings

2.1 General Settings

Navigate to WooCommerce > Settings > General to configure key settings:

• Store Address: Confirm your store’s address.
• General Options: Set options such as selling locations (specific countries or worldwide) and shipping locations.
• Currency Options: Fine-tune currency settings, including currency position, thousand separator, decimal separator, and number of decimals.

2.2 Products Settings

Under WooCommerce > Settings > Products:

• General: Define shop pages, add to cart behavior, and product measurements (weight and dimensions).
• Inventory: Manage stock levels, notifications for low or out-of-stock items, and whether to enable stock management.
• Downloadable Products: Configure settings for digital products, including file download method and access restrictions.

2.3 Tax Settings

If you’re required to collect taxes, go to WooCommerce > Settings > Tax:

• Enable Taxes: Tick the checkbox to enable tax settings.
• Tax Calculations: Choose whether to include taxes in product prices.
• Tax Classes: Create different tax classes for various product types (e.g., standard, reduced rate, zero rate).
• Display Options: Decide how prices should be displayed in the shop and during checkout (inclusive or exclusive of tax).

3. Setting Up Payment Gateways

WooCommerce supports various payment gateways, allowing you to accept payments from your customers. To configure payment options:

1. Go to WooCommerce > Settings > Payments.
2. Enable Payment Methods: Choose from options like PayPal, Stripe, bank transfers, and cash on delivery. Each payment gateway will have its settings for configuration.
3. Configure Settings: Click the name of each enabled payment method to configure its specific settings, such as API keys for Stripe or PayPal account details.

4. Configuring Shipping Options

Properly setting up shipping options ensures your customers know what to expect in terms of delivery costs and times.

1. Navigate to WooCommerce > Settings > Shipping.
2. Shipping Zones: Create shipping zones based on regions you ship to (e.g., countries, states).
3. Shipping Methods: Add methods for each zone, such as flat rate, free shipping, or local pickup. Configure the settings for each method according to your needs.
4. Shipping Options: Adjust general shipping settings, like enabling shipping calculator on the cart page and hiding shipping costs until an address is entered.

5. Setting Up Notifications

Keeping your customers informed about their order status is crucial for customer satisfaction. WooCommerce provides a range of notification options:

1. Go to WooCommerce > Settings > Emails.
2. Email Notifications: Customize the content and recipients for various email notifications, such as new order emails, order canceled emails, and order completed emails.
3. Email Sender Options: Configure the sender name and email address, ensuring they reflect your store’s branding.

By following these steps, you’ll set up a strong foundation for your WooCommerce store, ensuring it runs smoothly and provides a great shopping experience for your customers.

Additional Resources

To learn more about Woocomerce, refer to the following resources:

Getting Started with Woocommerce – Help Center

1. Product Types

WooCommerce supports several product types to accommodate different kinds of merchandise. Understanding these product types helps you effectively manage your inventory and provide a better shopping experience.

1.1 Simple Product

A simple product is a single item with no variations. It has a unique SKU and price. This is the most straightforward product type, ideal for items that don’t have different sizes, colors, or other variations.

• Example: A book, a coffee mug, a single downloadable file.

1.2 Grouped Product

A grouped product is a collection of related products that can be purchased individually. This is useful for products that are often bought together.

• Example: A set of kitchen utensils sold individually but grouped together for convenience.

1.3 Variable Product

A variable product allows you to offer variations of a single product, each with different attributes, prices, and stock levels. This type is ideal for products that come in different sizes, colors, or other options.

• Example: A t-shirt available in different sizes and colors.

1.4 External/Affiliate Product

An external or affiliate product is a product you list on your site but is sold on another website. You display the product on your store, but the purchase happens externally.

• Example: A book listed on your store that links to Amazon for purchase.

1.5 Virtual Product

A virtual product is a product that doesn’t require shipping. This can include services, subscriptions, or downloadable products.

• Example: Online courses, consulting services.

1.6 Downloadable Product

A downloadable product is a type of virtual product where customers receive a downloadable file upon purchase. This is common for digital goods.

• Example: E-books, software, music files.

2. Product Categories

Product categories help you organize products into groups, making it easier for customers to browse and find what they need. Categories can have subcategories, allowing for a hierarchical organization.

2.1 Creating Categories

• Navigate to Products > Categories.
• Add New Category: Enter the category name, slug (URL-friendly version), parent category (if it’s a subcategory), description, and upload a thumbnail if desired.
• Save: Click “Add New Category” to save.

2.2 Managing Categories

• Edit: To edit a category, hover over the category name and click “Edit.” Make your changes and save.
• Delete: To delete a category, hover over the category name and click “Delete.” Note that deleting a category does not delete the products within it; they will be moved to the uncategorized category.

3. Product Attributes

Attributes provide additional product details and can be used to create product variations. They are especially useful for variable products.

3.1 Setting Up Attributes

• Navigate to Products > Attributes.
• Add New Attribute: Enter the attribute name (e.g., color, size), slug, and whether it should be used for product variations.
• Configure Terms: Once the attribute is created, click “Configure terms” to add specific values for the attribute (e.g., red, blue, green for color).

3.2 Using Attributes in Products

Attributes can be added to products in the product data section:

• Open a Product: Go to Products and select a product to edit.
• Product Data Section: In the product data section, navigate to the “Attributes” tab.
• Add Attribute: Select an attribute from the dropdown and click “Add.” Enter the values for this attribute.
• Save: Click “Save attributes.”

3.3 Creating Variable Products Using Attributes

For variable products, attributes are used to define product variations:

• Add Attributes: Follow the steps above to add attributes to the product.
• Enable Variations: In the product data section, go to the “Variations” tab and click “Add variation.”
• Configure Variations: For each variation, set specific attributes (e.g., size: small, color: red), price, stock status, and other details.
• Save: Click “Save changes.”

4. Managing Tags

Tags are another way to organize products. They are similar to categories but are generally used more freely to describe product features.

4.1 Creating and Using Tags

• Navigate to Products > Tags.
• Add New Tag: Enter the tag name, slug, and description.
• Assign Tags to Products: When editing a product, you can add tags in the “Product tags” section by typing in the tag names. Tags help improve searchability within your store.

By understanding and utilizing product types, categories, attributes, and tags, you can effectively manage and present your inventory, making it easier for customers to find and purchase the products they are looking for.

Customizing the design of your WooCommerce store is crucial for creating a unique and engaging shopping experience. Elementor, a powerful page builder, allows you to design your Single Product page and Shop page with ease.
This section will guide you through the steps to edit and customize these pages using Elementor.

1.1 Accessing the Single Product Template

1. Navigate to Templates: Go to your WordPress dashboard and navigate to Templates > Saved Templates.
   
2. Locate Your Single Product Template: Find the Single Product template you want to edit. If you haven’t created one yet, you can create a new one by going to Templates > Theme Builder and selecting Single Product.

1.2 Editing the Single Product Template

• Open with Elementor: Click on “Edit with Elementor” next to your Single Product template.
  
• Add and Customize Widgets: Use Elementor widgets to build your layout. Some useful widgets for Single Product pages include:
  
  • Product Title: Display the product’s title.
  • Product Images: Show the product’s images.
  • Product Price: Display the price.
  • Product Rating: Show the product’s rating.
  • Product Add to Cart: Add an “Add to Cart” button.
  • Product Description: Display the product’s description.
  • Product Meta: Show product metadata like SKU, categories, and tags.
    
• Design and Style: Customize the design of each widget. Use Elementor’s styling options to change fonts, colors, backgrounds, spacing, and more to match your brand’s aesthetic.
  
• Preview and Save: Once you’re satisfied with your design, preview it to ensure everything looks good. Click “Publish” to save your changes.

1.3 Adding Dynamic Content

Dynamic content ensures that the correct product details are displayed for each product. Use Elementor’s dynamic tags to pull product information:

1. Select a Widget: For example, click on the Product Title widget.
   
2. Enable Dynamic Tags: In the widget’s settings, look for a small database icon. Click on it to enable dynamic tags.
   
3. Choose Dynamic Content: Select the appropriate dynamic content option, such as “Product Title,” “Product Price,” etc.

Additional Resources

To learn more about Woocomerce, refer to the following resources:

Customize Product Page Template – Help Center

Why we need to customize WooCommerce shop page?

A shop page is essential to your online store as customers will interact with it the most. The look of your WooCommerce shop page leads to the success of your online business. How you arrange your products in a certain way, how detailed the product information is provided, or how easily buyers can find the things they are looking for surely affect the buyer experience.

Creating an attractive and user-friendly WooCommerce shop page that simplifies the buying process, and distinguishes yours from others can bring a big opportunity. These are the revenue, the conversion rates, and further, the reputation of your business.

While the basic WooCommerce shop page template is already functional and good-looking, there are still some inappropriate showcases for certain types of products. If you wish to show off each of your products in the best way, then you should need a custom WooCommerce shop page.

In this article, we will introduce to you the effortless way to customize your WooCommerce shop page using Elementor. You will know what it is, right in the following part.

Customize a Pre-design Shop Page Woo Shop Page with Elementor

Already have a pre-designed Shop Page? Here’s how to edit it with Elementor:

1. Navigate to your Pages: In the WordPress dashboard, go to Pages > All Pages from the left-hand menu.
2. Find your Shop Page: Locate the Shop page you want to edit in the list.
3. Edit with Elementor: Hover over the Shop page title and click the Edit with Elementor link that appears.

Creating a Custom WooCommerce Shop Page with Elementor

Step 1: Create a Product Archive Template

Let’s design product shop pages that can be applied to all products on the site.

• Go to “Elementor,” open “My templates,” and click on the “Add new” button.
• Choose “Product archive” as your template.
• Enter the template name and click on the “Create template” button.
  

Step 2: Insert an Elementor Template or Build One from Scratch

You need to choose a layout you want to customize your shop with Elementor. Alternatively, you can build one from scratch and design it by using special widgets in the editing panel.

We suggest you select one of the available layouts and then customize it to best suit  your site.

Step 3: Add Products Widgets to Beautify your Shop

Elementor does provide widgets solely to create a WooCommerce site. You can use these widgets to customize every single corner of your online shop.

Here is a list of Elementor widgets that you can use:

• Archive title and description
• WooCommerce Breadcrumbs
• Custom add to cart
• Archive product
• Products
• WooCommerce pages
• Menu cart
• Product categories

Step 4: Tweak the “Add to cart” Button

The “Add-to-cart” button is the most important feature of any shop page. What you need to do is make your “add-to-cart” button stand out and catch customer’s eyes.

Click on the “Custom Add to Cart” block and try adjusting to make it in line with your brand style.

Step 5: Set the Condition and Public your Shop Page

Once you’re happy with all the customizations you’ve done to your page, hit the “Publish” button.

Elementor will ask you to set the condition that determines where your template is used throughout your site.

By default, the template will affect all the product pages on your site. You can also select a specific category of products.

Click on “Save & Close” to finalize everything. By finishing this step, you’ve done the WooCommerce shop page customization with Elementor.

Additional Tips for Customization

• Global Settings: Use Elementor’s global settings to ensure consistency across your site. Set global fonts, colors, and button styles.
  
• Templates for Reuse: Save sections or complete designs as templates. This allows you to reuse elements across different pages, maintaining a consistent design language.
  
• Mobile Responsiveness: Use Elementor’s responsive editing tools to customize how your Single Product and Shop pages look on mobile and tablet devices. Ensure that the design remains user-friendly and visually appealing on all screen sizes.
  
• Testing and Optimization: Regularly test your customized pages for performance and user experience. Optimize images and scripts to ensure fast loading times and a smooth shopping experience.

Additional Resources

To learn more about Woocomerce Product Archives, refer to the following resources:

Woocommerce Product Archives – Help Center

Why customize the cart page with Elementor?

Customizing your WooCommerce cart page is a crucial part of improving your conversion rates. The cart page interface can hugely determine whether your customer will proceed to the checkout or not. This includes adding options to show cart details, increase/decrease amount, adding detailed thumbnails for your cart items, and so on.

And while there are a lot of ways to customize your cart page such as using cart plugins or programmatically, using a page builder can be one of the best ways to do so.

Accessing the Custom Cart Page

• In your WordPress dashboard, navigate to Templates > Saved Templates.
• Find the pre-design custom cart page template and hover over its title.
• Click the Edit with Elementor link that appears.
  

Or you can find it in Pages Menu

• In your WordPress dashboard, navigate to Pages > All Pages.
• Find the pre-design custom checkout page and hover over its title.
• Click the Edit with Elementor link that appears.

Editing the Cart Page

1. Open with Elementor: Click on “Edit with Elementor” to start customizing the page.
   
2. Add and Customize Widgets: Use Elementor widgets to build your layout. Some useful widgets for the Cart page include:
   • Cart: This widget displays the cart contents..
   • Cart Totals: Shows the cart total and any applicable discounts or taxes.
   • Proceed to Checkout: Adds a button that directs users to the checkout page.
     
3. Design and Style: Customize the appearance of your widgets. Adjust layout, colors, fonts, and spacing to match your brand’s aesthetic.
   
4. Preview and Save: Once you’re satisfied with your design, preview it to ensure everything looks good. Click “Update” to save your changes.

Additional Tips

• Responsive Design: Make sure to check your custom cart page on different devices and screen sizes to ensure it is fully responsive.
  
• Custom CSS: If needed, you can add custom CSS through Elementor to further refine the appearance of your cart page.
  
• Elementor Add-ons: Consider using additional Elementor add-ons that provide more widgets and features for WooCommerce.

Additional Resources

To learn more about Elementor Woocomerce Cart Widget , refer to the following resources:

Elementor Woocommerce Cart Widget – Help Center

Accessing The Custom Checkout Page

• In your WordPress dashboard, navigate to Pages > All Pages.
• Find the pre-design custom checkout page and hover over its title.
• Click the Edit with Elementor link that appears.
  

• he Elementor editor will display the pre-designed checkout page layout.
• Familiarize yourself with the existing sections and widgets. Common sections might include:
  • Billing Information Form
  • Shipping Information Form
  • Order Summary
  • Payment Methods
  • Place Order Button
    

Customize Your Checkout Page’s Style Settings

Next, you can move to the Style tab of the Checkout widget’s settings to further customize the style and design of the checkout page, including making sure it matches the rest of your store’s design.

Here are the general design options that you can configure in the different settings areas…

Sections

In the Sections settings, you can control the overall style of all the different checkout parts. 

For example, if you change the background color, it will affect the background of all the sections. You can also adjust the border and spacing as needed.

Typography

In the Typography settings, you can customize the colors and typography of most of the text on your checkout page, including titles, secondary titles, descriptions, messages, radio buttons, checkboxes, and more.

The one bit of typography that you can’t customize here is your forms, which you’ll do from the next section.

Forms

In the Forms settings, you can control everything about your checkout page’s forms and form fields, which primarily affects the billing/shipping fields and coupon form.

You can adjust the columns and rows gap for the various form fields. You can also customize the typography of labels and fields, as well as adjust spacing, borders, and backgrounds. 

Beyond that, you also get an option to style the coupon button, just like any other button on your site.

Order Summary

In Order Summary, you can control the rows, which affects the spacing in the list of items in a shopper’s cart.

You can also control the colors and typography of the different summary items. For example, you could use one typography setting for the items and a different one for the order totals.

Purchase Button

In the Purchase Button settings, you can fully customize the purchase button, including typography, colors, spacing, borders, and more.

This is probably the most important button on the checkout page, so you’ll want to make sure that it’s attention-grabbing and matches the rest of your design.

Customize

Lastly, the Customize item lets you add individual styling controls for specific parts of your checkout page. You can add them for the following areas:

• Billing Details
• Additional Information
• Shipping Address
• Order Summary
• Coupon 
• Payment

For example, you might want to make the order summary stand out from the rest of the checkout page by adding a custom border. 

You could do this by enabling the customize settings for the order summary area and configuring them according to your preferences. 

Additional Tips:

• If you encounter limitations with the pre-designed template due to the free Elementor version, consider exploring free Elementor templates designed specifically for WooCommerce checkout pages.
• Consult Elementor’s documentation for detailed information on using widgets and functionalities specific to WooCommerce.
• Ensure your custom checkout page is responsive and displays well on various devices.

Additional Resources

To learn more about Elementor Woocomerce Checkout Widget , refer to the following resources:

Elementor Woocommerce Checkout Widget – Help Center

Accessing My Account Page

• In your WordPress dashboard, navigate to Pages > All Pages.
• Find the pre-design my account page and hover over its title.
• Click the Edit with Elementor link that appears.
  

Editing the My Account Page

1. Open with Elementor: Click on “Edit with Elementor” to start customizing the page.
   
2. Add and Customize Widgets: Use Elementor widgets to build your layout. Some useful widgets for the My Account page include:
   
   • My Account: This widget displays the customer’s account dashboard.
   • Order History: Shows the customer’s past orders.
   • Account Details: Allows customers to edit their account information..
   • Addresses: Enables customers to manage their billing and shipping addresses.
     
3. Design and Style: Customize the appearance of your widgets. Adjust the layout, colors, fonts, and spacing to create an organized and user-friendly account page.

Customizing Each Section:

1. My Account:

• Layout: Elementor allows you to customize the layout of the “My Account” section. You can choose a vertical or horizontal tab view to accommodate your design preferences and available space.
• Content: While the “My Account” section typically doesn’t display detailed information, you can add elements like a welcome message or a brief overview of the customer’s account status (e.g., recent orders).
• Links: Customize the links displayed in this section. You can link them to specific functionalities within the account page or external resources relevant to customer accounts (e.g., returns policy).

2. Order History:

• Styling: Customize the appearance of the order history table using Elementor’s styling options. You can adjust fonts, colors, and spacing for improved readability.
• Order Details: Define which order details are displayed in the table. Common options include order number, date, status, total amount, and individual product names.
• Customization Options (Elementor Pro): With Elementor Pro, you can enable features like:
  • Order Pagination: Implement pagination for long order lists, allowing customers to navigate through multiple pages.
  • View Order Details: Allow customers to click on individual orders to see detailed information like product variations, shipping methods, and order notes.

3. Account Details:

• Form Customization: Edit the pre-existing form fields for editing account information. You can adjust labels, placeholder text, and required fields for a user-friendly experience.
• Password Reset: Ensure a clear and functional password reset link is available within the account details section.
• Additional Information: Consider including optional fields for customers to add details like phone numbers or company names (depending on your store’s needs).

4. Addresses:

• Separate Billing and Shipping: Maintain separate sections for managing billing and shipping addresses, allowing customers to manage both independently.
• Address Editing: Ensure the address editing form functions smoothly and includes essential fields like street address, city, state/province, zip code, and country.
• Default Address Selection: Allow customers to choose a default billing and shipping address for streamlined checkout processes.

Preview and Save: Preview your design to ensure it looks good and is easy to navigate. Click “Update” to save your changes.

Additional Tips:

• Mobile Responsiveness: Test your customized My Account page across various devices (desktop, mobile, tablet) to ensure proper formatting and functionality.
• Clear Labels and Instructions: Use clear labels and concise instructions within forms and sections to guide customers through managing their accounts.
• Consider Branding: Maintain consistency with your store’s overall design by using appropriate fonts, colors, and styles within the My Account widget.

Additional Resources

To learn more about Elementor Woocomerce My Account Widget , refer to the following resources:

Elementor Woocommerce My Account Widget – Help Center

Step-by-Step Guide to Set WooCommerce Pages in Elementor

1. Accessing Elementor Site Settings

1. Edit Any Page with Elementor:
   1. Go to your WordPress dashboard.
   1. Navigate to Pages > All Pages.
   1. Choose any page you want to edit and click on Edit with Elementor.
2. Open Site Settings:
   1. Once in the Elementor editor, click on the menu icon (three horizontal lines) at the top left corner of the Elementor panel.
   1. Click on Site Settings. This opens a panel where you can manage global site settings for your website.

2. Setting Up WooCommerce Pages

Elementor allows you to set WooCommerce pages directly from the Site Settings panel. Here’s how you can assign the necessary WooCommerce pages:

1. Navigate to WooCommerce Settings in Elementor:
   • In the Site Settings panel, click on WooCommerce.
   • Then click on WooCommerce Pages.
     
2. Assign WooCommerce Pages:
   
   • Cart Page: In the field labeled “Cart Page,” type the name of the page you’ve designated as your Cart page. Wait for less than a second, and Elementor will search and display a list of pages that match the name you’ve typed. Select the appropriate page from the list.
     
   • Checkout Page: In the field labeled “Checkout Page,” type the name of your Checkout page. Again, wait for a moment for Elementor to search and show a list of matching pages. Select the correct page from the list.
     
   • My Account Page: In the field labeled “My Account Page,” type the name of your My Account page. Wait briefly, then choose the correct page from the list that appears.
     
     
   • Terms and Conditions Page: If you have a terms and conditions page, type its name in the “Terms and Conditions Page” field. Wait for Elementor to search and show the matching pages, then select the correct one.
     
     
   • Purchase Summary Page: The Purchase Summary page displays a summary of a customer’s order after they complete a purchase. Type the name of your Purchase Summary page in the “Purchase Summary Page” field, wait for Elementor to search, and select the appropriate page from the list.
     
   • Shop Page: In the field labeled “Shop Page,” type the name of the page you want to set as your Shop page. Wait for Elementor to search and show the matching pages, then select the correct one.

3. Save Your Changes

Click update button once you have assigned all the necessary pages:

1. Save Settings:
   • Click the green Update button at the bottom of the Site Settings panel to save your changes.

Additional Tips for Customizing WooCommerce Pages

• Edit with Elementor:
  • To further customize these pages, you can edit each one directly with Elementor. Navigate to Pages > All Pages, find the page you want to customize (e.g., Cart, Checkout, My Account, Purchase Summary, Shop), and click Edit with Elementor.
    
• Use WooCommerce Widgets:
  • Utilize Elementor’s WooCommerce-specific widgets to add and customize elements on your pages. Widgets like Cart, Checkout, My Account, Order History, Purchase Summary, and Product Categories can help you build a functional and visually appealing layout.
    
• Ensure Mobile Responsiveness:
  • Switch to mobile view in the Elementor editor to ensure your pages look great on all devices. Adjust layout, fonts, and spacing as needed for mobile optimization.
    
• Test Functionality:
  • Before finalizing your changes, thoroughly test each page to ensure all elements function correctly. Check the user experience from adding products to the cart to completing the checkout process.

By following these steps, you can effectively set up and customize your WooCommerce pages using Elementor, ensuring a cohesive and user-friendly shopping experience for your customers. This setup not only enhances the visual appeal of your store but also improves its functionality, leading to higher customer satisfaction and increased sales.