Did You Know?

Knowledge Base
Updated on May 26, 2025

Getting Started

Before building your site, better take a look at this section.

Articles

Woomen Theme Overview

Woomen Theme Essentials: System Requirements & WordPress Configuration

You need to have a WordPress installation on your website to use our theme.

NOTE: if you want to install dummy content from our demo site, we highly recommend installing it on a fresh WordPress website without any data.

WordPress installation

General steps to install WordPress CMS to your site

  1. Download the latest WordPress version from https://wordpress.org/download/
  2. Upload the zip file to your website root folder and unzip
  3. Create a database (using your hosting panel)
  4. Set up WordPress. Detailed instructions

Here is the list of useful links to install WordPress CMS

Sometimes you may get some errors while installing our theme, importing content, or activating plugins like white screen or PHP errors. They may be caused by low PHP configurations limits. In this case, you need to increase some values. You can do this on your own or contact your hosting provider with the following requirements:

  1. memory_limit 512M
  2. post_max_size 128M
  3. upload_max_filesize 64M
  4. max_execution_time 300
  5. max_input_vars 10000

Theme Installation and Setup

You can control the theme’s functionality and customize theme’s content from. Here you will find all relevant settings to customize the theme.

Articles

How to Install the Woomen Theme

How to Install and Activate Your WordPress Theme

 

Follow these steps to upload, install, and activate your theme using the WordPress admin dashboard.

1.      Log in to your WordPress Dashboard.

2.      Navigate to Appearance > Themes.

3.      Click on the Add New button, then select Upload Theme.

4.      Choose the theme .zip file from
your computer.

5.      Click Install Now to begin the installation.

 

6.      Once the installation is complete, click Activate to enable the
theme on your site.

 

 

 
How to Install a WordPress Theme via FTP

Installing a WordPress theme via FTP or cPanel File Manager is a useful method when facing file upload limitations or dashboard-related issues.

Installing via FTP (e.g: FileZilla)

Prerequisites:

  • FTP client (such as FileZilla)

  • FTP credentials (host, username, password, port)

  • Theme .zip file downloaded to your computer

Steps:

 

  1. Extract the Theme File

    • Unzip the downloaded .zip theme file on your computer.

    • You will get a folder (e.g., Woomen) containing the theme files.

  2. Connect to Your Website via FTP

    • Launch FileZilla (or any FTP client).

    • Enter your FTP details and connect to the server.

  3. Navigate to the Themes Directory

    • Open the folder path:
      public_html/wp-content/themes/

  4. Upload the Theme

    • Upload the extracted theme folder into the themes directory

  5. Activate the Theme

    • Log in to your WordPress dashboard.

    • Go to Appearance > Themes

    • Locate your theme and click Activate.

 

 

Activating Required Plugins for Woomen

Included Tools and Plugins

Woomen comes integrated with several essential plugins and tools to enhance the theme’s capabilities. Below is a breakdown of the plugins used and how to install them.

Required & Recommended Plugins for Woomen

Here are the main plugins used with the Woomen theme:

1. Elementor

Elementor is a powerful drag-and-drop page builder that allows users to design complex layouts visually. It eliminates the need for coding and supports a wide range of widgets, design features, and integrations through additional add-ons.

2. CubeWP Framework

CubeWP Framework is a dynamic content framework for WordPress designed to streamline the development process by up to 90%. It supports advanced dynamic content structures and is ideal for developers and content-heavy websites.
Learn more

3. CubeWP Forms

CubeWP Forms is a extension for the CubeWP Framework that lets you easily build simple to very advanced forms including contact forms, lead forms, feedback forms, appointment request forms, and newsletter subscription forms (MailChimp integration) for your website using a drag-and-drop form builder and manage all the leads from WordPress backend.

4. CubeWP Addon Woocommerce

CubeWP WooCommerce Addon is a CubeWP extension that enables you to create post type submission forms, such as “Submit a Product” or “Submit a Post.”

5. Woomen-Addon

The Woomen Addon is the core companion plugin developed specifically for the Woomen theme. It is required for the theme to function fully and unlocks essential features that enhance the flexibility and customization options of your website.

One of the primary features of the Woomen Addon is its ability to allow users to create and customize Post Card Styles. These styles are pre-designed layouts used to display content (such as blog posts, products, or custom post types) in a visually appealing “card” format.

6. Woocommerce

WooCommerce empowers you to build, sell, and grow on your terms. Our WordPress-powered platform offers fully customizable ecommerce, for less

7. Woo Merchant

Woo Merchant is a modular and feature-rich WooCommerce enhancement plugin designed to optimize the performance, functionality, and user experience of your online store. It offers a collection of over 15+ free modules that you can enable or disable based on your store’s specific needs.

The main goal of the Woo Merchant plugin is to help store owners:

  • Increase conversion rates

  • Improve user engagement

  • Enhance the overall shopping experience

  • Reduce cart abandonment

  • Add advanced eCommerce functionalities without relying on multiple separate plugins

8. Nextwp-Sites

NextWP Sites is a powerful demo importer plugin integrated with the Woomen Theme to help users quickly and easily set up their website by importing ready-made demo content.

The primary purpose of NextWP Sites is to allow users to import pre-built demo websites with just a few clicks. These demo sites are professionally designed and come with all the necessary pages, templates, images, and settings. This helps you get started faster by providing a fully designed website that you can customize to suit your needs.

9. Value Pack Addons

This plugin extends Elementor’s core functionality by adding extra widgets, design elements, and layout options. It provides greater flexibility when designing custom sections and enhances the overall design process.

 

Plugin Installation Guide

After completing the theme installation, you will see a prompt notification indicating that required plugins need to be installed. Simply follow the prompt and select the option to install the plugins. All the necessary plugins are pre-packaged with the theme, so they will be installed automatically in one click.

How to Properly Import Demo Content in the Woomen Theme

Importing Demo Content Using NextWP

NextWP is a WordPress plugin designed to help you set up your website quickly and efficiently. One of its key features is the Demo Import functionality, which allows you to import fully designed demo content with just a few clicks. This gives you an instant preview of the site’s layout, structure, and design, making it easier to understand how the theme works and how to customize it to your needs.

Note: After activating the theme, you will be automatically redirected to the demo importer
screen. Click “Get Started” to begin the process.

How to run Setup Wizard to import the demo:

Alternatively, you can access the importer manually by following these steps:

1.      Go to your WordPress Dashboard > Woomen.

2.      In the importer interface, follow these steps:

o    Step 1: Install all required plugins when prompted.

o    Step 2: Select the demo you wish to import from the available options.

o    Step 3: Click to proceed with the demo import. This process may take several minutes depending on your server speed—please be patient.

Once the import is complete, your site will be populated with the selected demo content.

Overview Of Theme Builder

What is the CubeWP Theme Builder?

The CubeWP Theme Builder is a dynamic design tool that allows you to create and manage custom templates for various sections of your website—without needing to write code. It’s deeply integrated with CubeWP’s core functionality, making it ideal for building advanced, data-driven websites.


You may locate it from WordPress dashboard> CubeWp> Theme Builder.

What Can You Build with CubeWP Theme Builder?

Using the CubeWP Theme Builder, you can create templates for:

  • Header – Design unique header layouts for different pages .

  • Footer – Customize your site’s footer with flexible layout options.

  • Single – Build detailed single post page layouts.

  • Archive – Customize how your category, tag, or listing archives look.

  • Hooks – Add content into predefined locations throughout your theme (before/after content, inside loops, etc.).

  • Shop – If integrated with WooCommerce, you can design product, cart, or shop templates.

  • Mega Menu – Build advanced navigation menus with columns, images, or post grids.

  • 404 Page – Design a fully custom “Page Not Found” experience.

The CubeWP Theme Builder gives you complete design freedom and works seamlessly with dynamic content fields, making it ideal for directory sites, listing platforms, and other advanced use cases.

Articles

What is a Theme Builder and How It Helps in the Woomen Theme

What is the CubeWP Theme Builder?

The CubeWP Theme Builder is a dynamic design tool that allows you to create and manage custom templates for various sections of your website—without needing to write code. It’s deeply integrated with CubeWP’s core functionality, making it ideal for building advanced, data-driven websites.


You may locate it from WordPress dashboard> CubeWp> Theme Builder.

What Can You Build with CubeWP Theme Builder?

Using the CubeWP Theme Builder, you can create templates for:

  • Header – Design unique header layouts for different pages .

  • Footer – Customize your site’s footer with flexible layout options.

  • Single – Build detailed single post page layouts.

  • Archive – Customize how your category, tag, or listing archives look.

  • Hooks – Add content into predefined locations throughout your theme (before/after content, inside loops, etc.).

  • Shop – If integrated with WooCommerce, you can design product, cart, or shop templates.

  • Mega Menu – Build advanced navigation menus with columns, images, or post grids.

  • 404 Page – Design a fully custom “Page Not Found” experience.

The CubeWP Theme Builder gives you complete design freedom and works seamlessly with dynamic content fields, making it ideal for directory sites, listing platforms, and other advanced use cases.

Header & Footer

Understanding Header and Footer in an Elementor-Friendly Environment

In the Woomen Theme, the header and footer are not just static sections—they are fully Elementor-friendly, giving you complete creative freedom. This means you can design, customize, and style these areas visually without touching a single line of code.

Your header is the first impression, guiding users to the most important parts of your site, while the footer acts as a strong finishing touch, providing quick links, contact information, and essential details. With Elementor integration, you can make these sections dynamic, responsive, and brand-focused, ensuring a consistent and professional look across all pages.

 

Why This Matters?
  • Drag & Drop Design – No coding required.
  • WooCommerce Integration – Add cart, wishlist, and search seamlessly.
  • Responsive & Customizable – Perfect layouts for desktop, tablet, and mobile.
  • Unlimited Styling – Fonts, colors, icons, menus, and more under your control.
Explore Our Step-by-Step Guides

To help you get the most out of header and footer customization, we’ve prepared these detailed resources, Please read out the below articles:

Articles

How to Create a Mega Menu Using the Woomen Theme Builder

How to Set Up a Mega Menu

To create and configure a mega menu using CubeWP Theme Builder, follow these steps:

1.      Go to your WordPress Dashboard > CubeWP > Theme Builder.

2.      Click on Add New Template. A popup window will appear with configuration options.

3.      In the popup:

o    Template Type: Select Mega Menu.

o    Template Name: Enter a name for your mega menu.

o    Display On: Choose whether you want the mega menu to appear across the entire site or only on specific pages.

4.      Click Save and Edit.

You will be redirected to the Elementor editor, where you can design your mega menu using multiple columns, widgets, icons, images, and any other content. This flexible layout allows for advanced, user-friendly navigation structures.

How to Build and Add the Mega Menu to the Header

To add your newly created mega menu to the header or a specific page:

1.      Watch this tutorial video to learn how to design a mega menu in Elementor:
(Embed or link your video here)

2.      Open the header or the page where you want to display the mega menu using Elementor.

3.      Add the “CubeWP Mega Menu” widget.

4.      Select the mega menu you created from the dropdown options.

This allows you to insert your custom mega menu anywhere within your layout — including headers, footers, or specific pages.

How to Add a Wishlist Page and Display It on the Storefront

In a WooCommerce store using the Woomen theme, a Wishlist is a feature that allows customers to save products they like for later
purchase, without adding them to the cart immediately. It’s similar to a
“favorites” or “saved items” list on other e-commerce
platforms.

 First, navigate to WordPress
Dashboard > Pages > Add New. Create a new page and name it “Wishlist” (or any preferred
name). After creating the page, edit it using Elementor and insert the Saved products element into the page.


If you want to place a Wishlist link in the header or any other section of your
site, follow these steps:

1.     Edit the RequiredSection

o    Go to your WordPress dashboard.

o    Open the page or template you want to edit using Elementor (e.g., the header template).

2.     Add an Icon or Text Element

o    In Elementor, drag and drop an Icon or Text widget to the desired location (such as the header).

3.     Assign the Wishlist Link

o    Select the element you just added.

o    In the Link field, click the Dynamic Tags icon.

o    From the options, choose Custom URL.

o    Enter the URL of your wishlist page (e.g., /wishlist or the full page URL).

4.     Update the Changes

o    Click Update in Elementor to save your changes.

How to Create and Manage Navigation Menus in the Woomen Theme

A navigation menu in WordPress (and in your Woomen theme) is the set of links (Home, Shop, Blog, Contact, etc.) usually shown in the header, footer, or sidebar of a website. It helps users navigate your site easily.

 

What is a Navigation Menu?

  • A collection of links to important pages, posts, categories, or custom URLs.

  • Usually appears in the header (main menu), but can also be placed in the footer or sidebar.

  • Supports dropdowns / submenus for organizing content hierarchically.

How to Create a Navigation Menu in Woomen Theme

  1. Log in to WordPress Admin
    Go to yourdomain.com/wp-admin

  2. Go to Menu Settings

    • In the left sidebar → Navigate to Appearance > Menus.

  3. Create a New Menu

    • Click Create a new menu.

    • Give it a name (e.g., Main Menu, Footer Menu).

    • Click Create Menu.

  4. Add Items to Menu

    • On the left side, you’ll see options: Pages, Posts, Custom Links, Categories.

    • Select the pages (like Home, Shop, Blog, Contact) and click Add to Menu.

    • Arrange items by dragging & dropping.

    • You can nest items under another to create a dropdown menu.

  5. Assign Menu to Location

    • Scroll down to Menu Settings > Display Location.

    • Woomen theme usually has locations like Primary Menu, Top Menu, Footer Menu.

    • Check the location where you want this menu to appear (e.g., Primary Menu for header).

  6. Save Menu

    • Click Save Menu. 

How to Set Up Customer Sign In / Login Functionality

What is Login Functionality?

Login functionality is a core component of most modern websites, applications, and digital platforms. It serves as a secure access point for users, ensuring that only authorized individuals can access certain resources, features, or information. In simple terms, login functionality is the process through which a user authenticates themselves to gain access to a system.

Adding a Login Element to the Header in Elementor

  1. Edit the Header Template

    • Go to your WordPress Dashboard > Templates > Theme Builder > Header (or wherever your header template is located).

    • Click Edit with Elementor.

  2. Add the Login Element

    • In the Elementor editor, locate the section where you want the Login option to appear.

    • Drag and drop a Login widget (Valuepack addon).

Enable User Registration for Signup Form in WordPress

Before creating or displaying a signup form, make sure user registration is enabled in your WordPress settings:

  1. Go to WordPress Dashboard
    Navigate to Settings > General.

  2. Enable Registration
    Under the Membership section, check the box labeled:
    “Anyone can register”.

  3. Set Default Role (Optional)
    From the dropdown labeled New User Default Role, select the appropriate role for new users (usually Subscriber or Customer for WooCommerce sites).

  4. Save Changes
    Click Save Changes to apply your settings.

Kindly watch the video below for the complete procedure

How to Upload and Display a Logo in the Header of the Woomen Theme in WordPress

The Woomen Theme provides two easy methods to display your logo in the website header. You can either use the Site Logo (dynamic option) or upload a Custom Logo directly in your header.


Option 1: Using the Site Logo (Dynamic Method)

  1. Go to your WordPress Dashboard.

  2. Navigate to:
    CubeWP > Settings > General

  3. Upload your logos for:

    • Homepage Logo

    • Inner Pages Logo

  4. Now edit your header with Elementor:

    • Drag and drop the Image widget into your header section.

    • Click on the Dynamic Tags option.

    • Choose Site Logo.

 This method ensures that your uploaded logos are automatically applied wherever the site logo is used.


Option 2: Using a Custom Logo (Manual Method)

  1. Edit your header with Elementor.

  2. Drag and drop the Image widget into your header section.

  3. Upload your desired logo image directly from the media library.

This method is useful if you want a different logo than the site-wide logo.

To learn how to display the logo in the header, please watch the video below for the complete procedure

How to Build and Customize the Website Header Using Elementor

How to Set Up a Custom Header

To create and configure a custom header using CubeWP Theme Builder, follow these steps:

  1. Navigate to your WordPress Dashboard > CubeWP > Theme Builder.
  2. Click on Add New Template. A popup will appear prompting you to configure the template settings.
  3. In the popup:
    • Template Type: Select Header.
    • Template Name: Enter a name for your header template.
    • Display On: Choose where you want this header to appear — either across the entire site or on specific pages. (You can create multiple header templates to display different headers on different pages.)
  4. Click Save and Edit.
You will be redirected to the Elementor editor. Here, you can design your custom header layout using sections, widgets, and any content elements of your choice. The design is fully flexible, allowing you to create unique headers tailored to your site’s needs.

Steps to Add a Popup Menu to the Header in the Woomen Theme

A Pop Menu is an interactive menu that appears dynamically when a user clicks on a designated menu element in your website header. It allows you to showcase multiple organized lists, images, or categories in a stylish popup format.

In this guide, we’ll walk through the process of creating, designing, and assigning a Pop Menu using Elementor with the Woomen Theme.

Step 1: Create a New Pop Menu Template

  1. Go to your WordPress Dashboard.

  2. Navigate to WP Theme Builder.

  3. Click Add New Template.

  4. From the available template options, select Pop Up.

  5. Name it (e.g., Pop Menu).

  6. Enable Pop Menu functionality and make sure it’s displayed across the entire site for consistency.

  7. Save your changes—you’ll be redirected to Elementor.

Step 2: Design the Pop Menu in Elementor

Once inside Elementor:

  • Add a Container and set it to Full Width.

  • Insert a Tabs Element to create menu sections (e.g., Shoes, Jeans, Shirts, Trousers).

  • Adjust settings to:

    • Position tabs (top, side, or bottom).

    • Align them (e.g., center).

    • Customize width, spacing, and line titles.

Styling Options:

  • Set background colors (normal, hover, and active states).

  • Customize title colors for each state.

  • Adjust typography (font size, style, line height, spacing).

Step 3: Add Content Inside Tabs

For each tab, you can add different elements:

  • Images: Showcase product visuals (e.g., add a shoe image in the Shoes tab).

  • Lists: Display item features or categories (e.g., Italian handmade shoes, Quality leather).

  • Headings: Label each section (e.g., “Quality”).

  • Containers: Organize layouts horizontally or vertically using flex settings.

This flexibility lets you build a visually engaging, fully functional pop menu.

Step 4: Add Close Button

To ensure good UX, add a Close Button:

  1. Insert an Icon Widget (e.g., window close icon).

  2. Adjust size, color, and margin.

  3. Position it at the top (left or right as preferred).

Step 5: Assign the Pop Menu to the Header

  1. Edit your Header with Elementor.

  2. Select the designated Menu Button where the pop menu should open.

  3. Go to the Advanced Tab → Add CSS ID.

Now, go back to your Pop Menu template:

  • Open Post Settings → Pop-up Options.

  • Choose Trigger Method (e.g., On Click).

  • Select Position (e.g., Top Left).

  • Copy the generated Pop-up Trigger ID.

  • Replace the existing CSS ID in your header with this new ID (make sure to remove the # symbol).

  • Save & Publish.

Step 6: Test the Pop Menu

  • Refresh the Front-End Page.

  • Click the menu button → Your newly created Pop Menu should now appear.

  • Check that images, lists, and headings display properly.

  • Verify the Close Button works.

How to Add and Position a Search Bar in the Website Header

How to Add and Position a Search Bar in the Website Header (Using Elementor and VP ValuePack Addon)

Adding a search bar to your website header improves navigation and user experience. Follow these steps to insert and customize a Product Search Bar using the VP ValuePack Addon:

Step 1: Edit Header with Elementor

  1. Navigate to your WordPress Dashboard.

  2. Go to Templates > Theme Builder > Header (or select your header template).

  3. Click Edit with Elementor.

Step 2: Add the Product Search Element

  1. In the Elementor editor, open the Elements Panel.

  2. Locate the Product Search (VP ValuePack) widget.

  3. Drag and drop the widget into the desired section of your header (e.g., next to the logo or menu).

Step 3: Choose a Search Bar Style

  1. After placing the element, click on it to open Widget Settings in the left panel.

  2. Under Style Options, you will find 5 available styles for the search bar.

  3. Select the style that best matches your website design.

Step 4: Customize and Position

  • Use Elementor’s padding, margin, and alignment controls to position the search bar correctly.

  • Adjust font, color, and spacing as needed to match your branding.

Step 5: Save and Apply

  1. Once you are satisfied with the design, click Update.

  2. Refresh your site to see the search bar live in the header.

Page Customization

Articles

Complete Overview of the Woomen Theme Homepage Design

Home Page Structure & Key Elements

The Home Page is built using Elementor, combining:

  • Default Elementor widgets

  • CubeWP elements

  • Value Pack Addons

Below is the breakdown of essential components on the homepage:

1. Banner Slider
2. Instagram Feeds
3. Product Variations

How to Design and Add a Banner Using elementor in Woomen Theme

 How to Create a Banner Slider:

A Banner Slider is an engaging and interactive element used to display a series of promotional images, product highlights, or key announcements in a rotating slideshow format on your website’s homepage. This feature is implemented using the Value Pack Addons plugin—an essential tool that enhances the functionality of your WordPress site without requiring any advanced coding skills.

The Value Pack Addons plugin offers a collection of powerful widgets and elements, among which the Banner Slider is one of the most widely used. It enables you to effectively promote featured products, seasonal campaigns, or special offers, making your homepage more dynamic and visually appealing.


Key Features of the Banner Slider:

  • Display multiple slides with images or banners in a smooth sliding or rotating sequence.
  • Customize slide content by adding text overlays, clickable links, and product visuals.
  • Configure settings such as slide duration, transition effects, and navigation controls for better user interaction.
  • Drive user engagement by highlighting important sections of your site, increasing visibility and click-through rates.

Benefits:

Incorporating a Banner Slider on your homepage helps you:

  • Capture visitor attention immediately upon arrival.
  • Promote time-sensitive deals or new product launches.
  • Enhance the overall aesthetic and usability of your website.

This feature is a valuable addition for any site looking to improve user experience while showcasing important content in a professional and attractive manner.

.

Here is the video to learn how to make the slider:

 

Please watch the video below to learn the complete procedure.

How to Add and Manage Product Variations in the Woomen Theme

WooCommerce Product Types: Simple Product vs Variable Product

WooCommerce offers different product types to suit a wide range of selling
needs. Two of the most commonly used types are Simple Products
and Variable Products.

What is a Simple Product?

A Simple Product is a standalone item with no variations. It comes with a single price, SKU, and inventory.

Examples:

·         A book

·         A USB cable

·         A digital download file

 How to Create a Simple Product:

1.      Go to your WordPress Dashboard > Products > Add New

2.      Enter the Product Title and Description

3.      Scroll to the Product Data section and choose Simple Product

4.      Add:

o    Price

o    SKU (optional)

o    Inventory and stock status

o    Product Image and Gallery

5.      Click Publish

 

What is a Variable (Variational) Product?

A Variable Product allows you to sell a single product with multiple options or variations, such as different sizes, colors, or materials. Each variation can have its own SKU, price, and stock status.

Examples:

·         A t-shirt in multiple sizes and colors

·         A phone case in different materials

·         Shoes in different sizes

How to Create a Variable Product:

1.      Go to Products > Add New

2.      Enter the Product Title and Description

3.      In the Product Data dropdown, select Variable Product

 

Step-by-Step to Add Variations:

Step 1: Create Attributes

1.      Go to the Attributes tab inside the Product Data box

2.      Click Add (e.g., Size, Color)

3.      Add attribute values separated by | (e.g., Small | Medium | Large)

4.      Check “Used for Variations” and click Save Attributes

 

Step 2: Create Variations

1.      Navigate to the Variations tab

2.      Click “Add Variation” or select “Create variations from all attributes”

3.      Set:

o    Price

o    SKU

o    Stock status

o    Image for each variation

4.      Save Changes

5.      Finally, click Publish



How to Display Variable Products in the Woomen Theme

How to Show Products with Variations (e.g. Size, Color) on Your Website

Elementor makes it easy to showcase variable products on your pages using the Product Variations widget. This feature allows you to visually highlight specific WooCommerce variable products with customizable styles and layouts.

 Step 1: Add the Variable Product Widget

1.      Open your page in Elementor Editor.

2.      In the left sidebar, search for the widget named “Product Variations”.

3.      Drag and drop the Product Variations widget onto your page.

4.      In the widget settings, you’ll see an option to Add Product IDs.

This is where you enter the ID(s) of the variable product(s) you want to display.

 

Step 2: How to Find a Product ID

You can find a product’s ID in two ways:

 

Method 1: From the Product Edit Page

1.      Go to your WordPress Dashboard > Products.

2.      Click Edit under the product you wish to use.

3.      In the browser’s address bar, look for the post parameter in the URL:

In this example, 14331 is the Product ID.



 Method 2: From the Product List

1.      Go to WordPress Dashboard > Products.

2.      Hover your mouse over the desired product.

3.      Below the product title, you’ll see the Product ID displayed as:



 Final Notes:

·         Make sure the product you enter is a Variable Product.
·         Only enter the numeric Product ID, separated by commas if showing multiple.

How to Display Instagram Feed on Your WooCommerce Store

How to Connect and Display Instagram Posts on Your Site

This guide explains how to display Instagram posts (feeds) on your website using an access token and Elementor. By following these steps, you’ll be able to showcase either your full Instagram feed or posts by a specific hashtag.

Step 1: Generate Your Instagram Access Token

To connect your Instagram account with your website, you’ll first need to
create an Access Token. This token authorizes your site to
fetch your Instagram content.

Follow one of the tutorials below to generate your token:

       
1- Official Facebook Developer Guide

     
2- Bricks Builder Instagram Access Token Guide

Once the token is generated, keep it safe — you’ll need it in the next step.

 

Step 1: Configure Instagram Feed Settings

Please go to your WordPress dashboard> CubeWp> Settings> Insta Feeds>Enter the Instagram access token here.


Step 2: Embed Instagram Feed on Your Website

Now that you have your access token, it’s time to embed the feed on your desired page.

1.      Open your WordPress Dashboard

2.      Navigate to Pages and select the page you want to edit (e.g., Home Page)

3.      Click Edit with Elementor

4.      From the Elementor sidebar, drag the “Instagram Feed” widget onto your page

Kindly watch the video below for the complete procedure​

How to add and showcase brands on any page using the Woomen theme.

In WooCommerce, Brands are a default taxonomy that allows you to categorize products by their brand name. With the Woomen theme and Elementor, you can not only create and assign brands but also display them beautifully in a slider format on any page of your store.

This guide will walk you through:

  • Adding a new brand

  • Associating products with a brand

  • Displaying brand logos in a slider with Elementor

Step 1: Adding a New Brand

  1. In your WordPress Dashboard, go to Products > Brands.

  2. You will see existing brands listed here.

  3. To add a new brand:

    • Enter the brand name (e.g., Louis Vuitton).

    • Set a slug (e.g., LV).

    • Click Add New Brand.

  4. Your brand will be added successfully, but initially, it will not show any products.

Step 2: Associating Products with a Brand

You can either create a new product under a brand or assign an existing product to a brand.

Option A: Adding a New Product

  1. Go to Products > Add New.

  2. Enter product details such as name (e.g., Jeans), description, attributes, and shipping details.

  3. Upload a product image and gallery images.

  4. Select the appropriate category (e.g., Denim Jeans).

  5. In the Brands taxonomy section, select the newly created brand (e.g., Louis Vuitton).

  6. Publish the product.

Now, if you refresh the brand page, your new product will appear under that brand.


Option B: Assigning an Existing Product

  1. Go to Products > All Products.

  2. Edit any product you want to assign to a brand.

  3. Scroll to the Brands taxonomy section.

  4. Select the brand (e.g., LV).

  5. Update the product.

The product will now appear on the brand’s page.


Step 3: Adding a Brand Slider in Elementor

If you want to showcase your brands as a slider on a page, follow these steps:

  1. Open the page with Elementor.

  2. Add a container where you want to display the slider.

  3. To create spacing, use the Spacer widget above or below the container.

  4. Set the container to Full Width.

  5. Inside it, add another container (also full width).

  6. Drag and drop the Image widget for each brand logo.

    • Upload your brand logo image.

    • Duplicate the widget to add multiple brand logos.

  7. Select the main logo container, go to layout settings, and set Display: Flex to align logos in a single row.

Step 4: Enabling Slider Functionality

  1. Go to the Advanced Settings of the container that holds the images.

  2. Enable the Slider option.

  3. Choose how many logos to display per slide (e.g., 3).

  4. Save your changes and refresh the page.

Your logos will now appear in a working slider.


Step 5: Linking Logos to Brand Pages

  1. In Elementor, select a logo image.

  2. In the sidebar settings, go to Link > Custom URL.

  3. Copy the brand page URL from your WordPress dashboard (Products > Brands > View) and paste it into the link field.

  4. Repeat this for each logo.

  5. Save changes and refresh the page.


Now, when visitors click on a brand logo, they will be redirected to the brand’s page showing all products under that brand.

Watch the video below to see the complete process

Product Comparison Feature in WooCommerce (Woomen Theme)

Introduction

The Product Comparison feature in WooCommerce allows customers to compare two or more products side by side. This helps users analyze features, prices, reviews, and other important details, making decision-making easier and faster.

In the Woomen Theme, this feature can be added to multiple sections of your store, such as:

  • Homepage

  • Shop Page

  • Product Detail Page

Benefits of Product Comparison

  • Saves time by allowing quick evaluations

  • Enhances user experience by simplifying choices

  • Boosts conversions by helping customers make confident purchase decisions

Adding the Product Comparison Feature

Step 1: Edit Product Page with Elementor

  1. Go to your WordPress Dashboard.

  2. Navigate to Pages > Product Detail Page.

  3. Click Edit with Elementor.

  4. Once the page loads, scroll to the section where you want to add the feature.

Step 2: Insert Comparison Widget

  1. Add a new Container and set it to Full Width (or Boxed view if preferred).

  2. Search for Product Comparison in Elementor widgets.

  3. Drag and drop the Product Comparison widget into your container.

Step 3: Select Products for Comparison

  1. By default, the widget will load the product currently being viewed.

  2. To add another product:

    • Go to WordPress Dashboard > Products.

    • Hover over a product to see its Product ID.

    • Copy the ID and paste it into the widget settings.

Example: Add ID 1180 to compare two products.

Step 4: Customize the Feature

  • Image Comparison Option – Switch to “Image Comparison” if you want to compare images instead of products.

  • Titles & Labels – Edit product or image titles for clarity.

  • Styling Options:

    • Change text colors & typography

    • Adjust container height

    • Switch between Full Width or Boxed View

    • Replace or customize comparison icons (e.g., use arrows)

Watch the video below to see the complete process

How to Customize the Archive/Shop Page in the Woomen Theme

CubeWP Default Archive Page Overview

The default archive page in CubeWP is built to showcase a list of products or posts, equipped with essential browsing and filtering tools. By default, it features product images, search filters, sorting options, and a product grid. All these components can be easily managed from the WordPress admin panel.

Here’s the list of elements added on the shop page:

  • Static Images and Links

  • Filters Panel

  • Sorting Filter

  • Archive posts display

  • Additional Settings

  • Posts Per Page

Kindly watch the video below for the complete procedure

How to Configure the Shop Page

In WooCommerce, the Shop Page serves as your online storefront. It showcases all your products in a catalog-style layout, allowing visitors to browse, filter, and sort items easily.

By default, WooCommerce automatically creates a Shop page during installation.

With the Woomen Theme, the Shop Page is further enhanced with advanced layout options, filters, banners, and customization features for a more engaging shopping experience.

How to Configure the Shop Page

  1. Go to your WordPress Dashboard.

  2. Navigate to CubeWP > Theme Builder.

  3. Click Add New Template.

  4. Select Shop Page and save it.

  5. You will be redirected to Elementor, where you can start customizing the layout and design.


Please read the articles below to learn more about the elements of the Shop Page. You can also watch the Archive Page video for further guidance.

How to Set Up the Filters Panel

Filters Panel

Filters help users narrow down the search results based on specific attributes, making it easier to find relevant products on the archive or shop page. In CubeWP, you can create and display filters such as:

  • Color – Filter products by available color options.

  • Price – Allow users to select a price range.

  • Size – Show only items available in specific sizes.

  • Categories – Let users browse by product categories.

How to Set Up Filters

  1. Create Filters:

    • Go to your WordPress Dashboard → CubeWP → Search Filters.

    • Click Add New and select the post type (e.g., Product, Listing) for which you want to create filters.

    • Add your desired filters (Color, Price, Size, Categories, etc.).

  2. Display Filters on Archive/Shop Page:

    • Edit the archive or shop page using Elementor.

    • Drag and drop the CubeWP widget called “Search & Filters Form” onto the page.

    • In the widget settings, choose select form type as “Filters form” and select “Post type for which you want to show”

These dynamic filters will now appear on your archive page, allowing users to refine search results based on the options you’ve configured.

How to Configure Additional Settings

How to Change the Number of Posts Per Page

The Posts Per Page setting controls how many products or posts are displayed on each page of the archive or shop layout. This is essential for managing content load, improving user experience, and organizing your listings efficiently across multiple pages.

When you define a specific number of posts per page:

  • Only that number of items will be shown on a single archive page.

  • The rest will be accessible through pagination controls (e.g., next/previous page links or numbered pagination).

  • It helps reduce page load time by limiting the number of items shown at once.

How to Set It Up

 
Please go to your WordPress dashboard> CubeWP> Settings> Archive settings> Posts per page

How to Add a Sorting Option

Sorting Filter

The Sorting Filter allows users to rearrange the product or post listings on the archive page based on specific criteria. This improves the browsing experience by letting users control how content is displayed according to their preferences.


Available Sorting Options:

  • Newest: Displays the most recently published products or posts first.

  • Oldest: Shows the oldest products or posts first, based on publish date.

  • Title: Sorts items alphabetically by title (A–Z or Z–A, depending on configuration).

  • Random: Displays items in a random order with each page load—ideal for showcasing different content on each visit.

  • Best Match: Prioritizes results that best match the user’s search query (usually enabled when search terms are involved).

  • Price: Low to High: Sorts products by price in ascending order, showing the most affordable items first.

  • Price: High to Low: Sorts products by price in descending order, displaying premium or expensive items first.

How to Set It Up:

  1. Edit the archive or shop page using Elementor.

  2. Drag and drop the CubeWP widget “Sorting Fields Display” onto the page.

How to Customize Archive Posts Display

  • Archive Post Types

    The Archive Post Display widget in CubeWP allows you to show a list of posts, listings, or custom post types on your archive or search results page.

    To display these posts:

    1. Edit the page with Elementor.

    2. Add the CubeWP widget called “Archive Post Display” from the widget panel.

    3. This widget dynamically fetches and displays posts based on search queries, filters, or archive conditions.

    4. You can customize the layout, design, and post elements (like title, image, meta info) within the widget settings.

    This is essential for showing the actual search or archive results on the front-end in a styled and structured format.                                                                                                                                                                                                    

How to Customize/build the Product Detail Page in Woomen

Product Detail Page

The Product Detail Page is the individual page where complete information about a single product is displayed. It serves as the final decision point for a customer before making a purchase or taking an action. A well-structured product detail page plays a crucial role in converting visitors into buyers by presenting all relevant product details in a clear and engaging format.

 

1. Product Gallery
2. Product Title
3. Product Price
4. Product Description
5. Product Variations (Color, Size, etc.)
6. Accordion Section
7. Customer Reviews
8. Other Products Section (Recently Viewed Products, Upsell Products, Cross-sell Products)
 
Please read the articles below to learn more about the elements of the product detail page. You can also watch the above video for further guidance.

How to Add a Size Guide to Product Page

What is a Size Guide on a WooCommerce Product Page?

A Size Guide on a WooCommerce product page is a helpful table or popup that provides sizing information for the product (usually clothing, shoes, accessories, etc.). It helps customers choose the right size by giving measurements, fit details, or conversion charts (e.g., US to EU sizes).

Why Use a Size Guide?

  • Reduces returns due to size issues

  • Improves customer experience

  • Builds trust and confidence in buying

How to add size guide?
 

Make sure you have enabled the settings from WordPress dashboard> Woo merchant> Enable Size Guide Button 

Please go to your WordPress dashboard> Product> Add new> Product data section> Woo Merchant> Size Guide Image> Upload an image here.

 

Kindly watch the video below for the complete procedure​

How to Edit Product Title and Price with Elementor

Product Title

For Product Title:

  1. Open your product detail page and Edit with Elementor.

  2. From the Elementor widgets panel, drag & drop a Heading element onto the page.

  3. In the Heading settings, click on the Dynamic Tags ( icon) next to the Title field.

  4. From the dropdown, select Post Title.

    •  On the Product Detail Page, Elementor will automatically fetch the current product’s title (no need to enter a Product ID).

    •  If you want to display a product title on any other page (not the detail page), you must provide the Product ID so Elementor knows which product’s title to fetch. On the detail page you don’t need to because system will fetch automatically.

Product Price

For Product Price:

  1. From the Elementor widgets panel, drag & drop the Product Price widget  onto the page.

  2. Elementor will automatically fetch the price of the current product.

    • On the Product Detail Page, price is shown automatically.

    • If adding price on another page, you’ll need to specify the Product ID in the widget’s settings.

How to Add Product Variations (Size, Color, etc.)

What are Product Variations?

Product Variations are options you create for a single product when it comes in different types — like size, color, material, or style.

  • Example: A T-shirt can have variations like Small, Medium, Large (sizes) and Red, Blue, Black (colors).

  • Each variation can have its own price, SKU, and stock availability.

This is different from adding separate products — instead of creating multiple product pages, you manage all variations under one main product.


How to Show Product Variations in Elementor

  1. Edit the Product Detail Page with Elementor.

  2. From the Elementor widgets panel, drag & drop the Product Variations element (By Value Pack Addon).

  3. This widget will automatically show the dropdowns for variation options (like Size, Color) on the product page.

  4. When a customer selects a variation, the correct price, SKU, and stock info will be displayed automatically.

Note: When adding the Product Variation widget to the detail page, there’s no need to manually enter product IDs. The system will automatically fetch the variations dynamically based on the selected product.

How to Add an Accordion Section on Product Page

Accordion Section

The Accordion Section is used to organize additional product information into collapsible tabs. This improves readability by allowing users to expand only the sections they are interested in—keeping the product detail page clean and well-structured.

Common Use Cases:

  • Product Specifications

  • Shipping & Delivery Information

  • Return & Exchange Policies

  • FAQs

How to Add:

  1. Edit the Product Detail Page using Elementor.

  2. From the Elementor widget panel under Value Pack widgets section, search for and drag the Accordion widget to your desired location on the page.

  3. Add multiple accordion items such as “Specifications,” “Shipping Info,” or “Return Policy.”

  4. Enter relevant content under each tab. You can use plain text, HTML, or even shortcodes.

Customization Options in Sidebar:

In the Elementor settings panel (sidebar), you can:

  • Target Display
  • Content Type
  • Select Content Tab
  • Button Text

Kindly watch the video below for the complete procedure​

How to Add a Product Review Form and How It Works

Product Reviews

The Product Reviews section allows customers to view and submit feedback about a product, helping build trust and credibility.

Note:

Reviews will only appear for products where the “Enable reviews” option is checked during product submission.

To enable this:

 

Go to WordPress Dashboard → Products → Add New (or Edit) → scroll down to the Product Data section → click on the Advanced tab → and check the box labeled “Enable reviews.”

How to Add:

  1. Edit the product detail page using Elementor.

  2. From the Valuepack Addon Widgets section, drag and drop the Product Reviews widget onto the page.

This widget displays all approved reviews for the selected product and includes a review submission form where users can add their rating and comments.

 

Widget Settings in Elementor Sidebar:

In the Elementor widget settings panel (sidebar), you can:

  • Show/Hide Added Reviews: Display existing customer reviews.

  • Enable Overall Rating: Show the average rating based on all submitted reviews.

  • Enable Review Form: Allow users to submit a review directly on the product page.

  • Choose Layout Styles: Select from various design styles to match your site’s look and feel.

 

This section is fully dynamic and customizable, ensuring every product page presents real-time, user-generated content that adds credibility and encourages conversions.

Kindly watch the video below for the complete procedure​

How to Add a Product Description Section

 Product Description

Shows the full product description that provides details about the product’s features, benefits, and specifications.


Steps to Add:

  1. In the Valuepack Addon Widgets section within Elementor.

  2. Drag and drop the “Product Description” widget where you want it to appear.

  3. Adjust styling and spacing as needed.

These dynamic elements ensure each product displays its own unique content automatically when loaded on the frontend. Be sure to save and update your changes in Elementor.

Add to Cart & Checkout System

In WooCommerce, the Add to Cart and Checkout system is the backbone of the shopping experience. It allows customers to select products, review them in their cart, and proceed with secure payments.

When a customer clicks Add to Cart, the product is saved into the cart for later review. From there, they can either continue shopping or go directly to checkout. The Checkout Page is where customers enter their billing/shipping details and complete the purchase.

Types of Carts in the Woomen Theme

The Woomen Theme provides three different types of cart styles to improve user experience:


1. Sticky Cart

  • A cart that remains visible while scrolling.

  • Gives quick access to cart contents without leaving the current page.

  • Improves conversion by reducing steps for checkout.

2. Shopping Cart (Full Cart Page)

  • The traditional cart page where all products are listed.

  • Customers can update quantities, remove items, or apply coupons.

  • Usually accessed before moving to the checkout page.

3. Mini Cart

  • A small dropdown or sidebar cart that appears when a product is added.

  • Customers can view cart items instantly without page reload.

  • Saves time and enhances the shopping flow.

To explore each cart type in detail and understand how to configure them, please read the articles below. These resources will guide you step by step.

Articles

How to Enable/Create Sticky Add-to-Cart in Woomen

What is a Sticky Cart?

A Sticky Cart is a floating or fixed cart interface that stays visible on the screen as the user scrolls through a product or shop page. Its main purpose is to provide users with quick access to their cart and purchase options without needing to scroll back up or navigate away.


Key Features:

  • Always Visible: Remains fixed on the screen (top, bottom, or side) as the user scrolls.

  • Quick Add-to-Cart: Allows users to add the product to their cart instantly.

  • Cart Summary: May show product quantity, price, or selected variations.

  • Improved UX: Reduces friction in the buying process and increases conversions.

Note:



To add the Sticky Cart, simply drag and drop the widget onto any section of the page using Elementor—it will function automatically.

  • If you’re adding the Sticky Cart to a Product Detail Page, there’s no need to manually assign a product ID. The system will automatically detect and use the ID of the currently displayed product.
  • However, if you're placing the Sticky Cart on any other page (e.g., homepage, landing page), you’ll need to manually assign a product ID in the widget settings to display a static product’s Sticky Cart.
The Sticky Cart offers three different design layouts, which you can choose directly from the Elementor sidebar settings.

Where It’s Commonly Used:

  • Product Detail Pages — to keep the “Add to Cart” button always accessible.

  • Mobile Layouts — where screen space is limited and ease of access is essential.

  • Single Product Funnels — where guiding the user to complete a purchase is a priority.

How to Add in Elementor (if supported by your setup):

  1. Edit the product detail page with Elementor.

  2. Use a widget or plugin (e.g., from Valuepack Addons section> Sticky Add To Cart).

  3. Customize position (top/bottom), appearance, and behavior.


How to Design and Set Up the Shopping Cart Page

How to setup cart page

    
A full page that displays all cart items in detail with options to update or remove.

1.      Go to your WordPress Dashboard > Pages > Add New

2.      Name your page (e.g., “Cart”) and edit it with Elementor

3.      Add the WooCommerce cart shortcode by adding the text editor:

[woocommerce_cart]


4.      Now go to WooCommerce > Settings > Advanced Tab

5.      Under the Cart Page dropdown, select the page you just created

Your Cart Page is now set and functional.

How to create a Mini Cart and add Icon to the Woomen Store Header

How to Add a Mini Cart with Elementor

To display a Mini Cart button in the header, footer, or any section of your website:

1.      Open the page or template (e.g., Header/Footer) with Elementor.

2.      From the Elementor widget panel, search and drag the “Mini Cart” element to your desired location.

3.      Customize the mini cart:

o    Choose different icon styles

o    Show/hide text next to the cart icon

o    Adjust layout and visibility options

Select the style of cart

This feature helps users view cart contents from anywhere on your site.

How to Build a Custom Checkout Page Using the Woomen Theme

How to Create a Checkout Page with elementor​

1.      Navigate to Pages > Add New in your WordPress Dashboard

2.      Title the page (e.g., “Checkout”) and edit with Elementor

3.      Insert the WooCommerce checkout shortcode:

[woocommerce_checkout]

4.      Go to WooCommerce > Settings > Advanced

5.      Under the Checkout Page option, assign the newly created page

 

Customize Checkout Page Styles

We have designed two styles for checkout page via WooMerchant plugin. To enable and choose a layout:

1.      Head over to WordPress dashboard>WooMerchant (or the custom Woo plugin you’re using)

2.      Navigate to Checkout Styles settings

3.      Enable WooCommerce Checkout Styles

4.      Select between Style 1 or Style 2 as per your preference

 

                                      Final Notes:

·         Make sure WooCommerce is installed and activated.

·         Test the full cart and checkout flow after setup.

·         Use Elementor’s styling options to enhance the user interface.ee

How to enable the payment provider?

To configure your payment methods in WooCommerce, please follow these steps:

  1. Log in to your WordPress dashboard.

  2. Navigate to WooCommerce > Settings.

  3. Click on the Payments tab.

Here, you will see a list of available payment gateways such as PayPal, Offline Payments, Stripe, and others. You can enable or disable them as needed, and click “Set up” or “Manage” next to each option to configure the specific settings (like API keys, instructions for customers, etc.).

This section allows you to control how customers can pay on your website, ensuring a smooth and secure checkout experience.

Order Management

After a customer places an order, you can view all the order details by navigating to your WordPress dashboard and going to:
WooCommerce > Orders

From there, you’ll be able to manage and track each order, view customer information, payment status, and more.

How does Woo Merchant help us in building an online store?

WooMerchant helps us configure the following options:

To access these settings, go to your WordPress Dashboard > WooMerchant. There, you will find the following options

  1. WooCommerce Checkout

  2. Woo Merchant Cross Sell

  3. Woo Merchant Spend & Save Discounts

  4. Woo Merchant Spend & Get a Gift Offer

  5. Woo Merchant Sale End Countdown

  6. Woo Merchant Low Stock Notification

  7. Woo Merchant Buy Now Button

  8. Woo Merchant Size Guide Button

WooCommerce Checkout Styles

 

We’ve already published a detailed article on Checkout settings and styles. Please refer to the article below for more information.

How to create checkout page?

Woo Merchant Cross Sell Option

This option allows you to activate the “Frequently Bought Together” feature, displaying related or complementary products on individual product pages.

Frequently Bought Together Display Position

This setting allows you to choose where on the product page the “Frequently Bought Together” section should appear, helping to increase visibility and user engagement.

Available display positions may include:

  • Before the product summary – Displays above the main product details.

  • After the product summary – Displays below the product description.

  • Before the Add to Cart button – Encourages users to purchase bundles before adding the main item.

  • After the Add to Cart button – Gently prompts users to consider additional products after showing purchase intent.

  • So on….

Tip: Selecting the right position can significantly boost your average order value by promoting smart cross-sell opportunities.

Woo Merchant Spend & Save Discounts Option

This option allows you to activate the Spend & Save Discount feature, which provides customers with discounts based on their total spending.


Discount Offer

Choose the type of discount to offer. For example:

  • Percentage — Customers get a percentage off their purchase when they meet the spending threshold.

  • Fixed Amount Discount — Instead of giving a percentage off, the Fixed Amount discount lets you offer a specific monetary value off the customer’s total purchase once they reach the spending threshold.
  • Discount Value — Set the specific percentage or fixed amount of discount that will be applied once the spending criteria are met.
  • Spent Amount Threshold — Define the minimum purchase amount a customer must spend to qualify for the discount.

Woo Merchant Spend & Get a Gift Offer Option

This feature lets you reward customers with a free gift when they spend a certain amount in your store.

 

  • Enable Spend & Get a Gift Offer
    Turn this feature on to activate the gift offer for qualifying purchases.

  • Select Free Product
    Choose the specific product that will be offered as a free gift when customers meet the spending requirement.

  • Spent Amount Threshold
    Set the minimum purchase amount customers need to spend to qualify for the free gift.

Woo Merchant Sale End CountDown Option

This feature adds a countdown timer to your product pages, creating urgency by showing customers how much time is left before a sale ends.

  • Enable Sale End Countdown
    Activate this option to display a live countdown for discounted products with a set sale end date.

  • Sale End Countdown Display Position
    Choose where the countdown timer appears on the product page.
    Common positions include:

    • Before the product title

    • Before the product price

    • Before/after the Add to Cart button

    • Before the product summary

Tip: Showing a countdown can help drive faster decisions and boost conversions during promotional periods.

Woo Merchant Low Stock Notification Option

This feature displays a message on the product page when stock levels are low, encouraging customers to act quickly before the item sells out.

  • Enable Low Stock Notification
    Turn this option on to show a low stock alert when a product’s inventory drops below the set threshold in WooCommerce.

  • Low Stock Notification Display Position
    Choose where the low stock message should appear on the product page.
    Common positions include:

    • Before the product summary

    • After the product summary

    • Before the Add to Cart button

 

Benefit:
Displaying low stock alerts can create urgency, helping increase conversions by encouraging quicker purchase decisions.

Woo Merchant Buy Now Button

Adds a Buy Now button to the cart page, allowing customers to quickly proceed to checkout and complete their purchase faster.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Woo Merchant Size Guide Button option

  • Enable Size Guide Button
    Displays a button on product pages to help customers view size information.

  • Manage Size Guide Button
    Allows you to create and customize the size guide using Elementor OR by product page hook

We’ve published a detailed article on this topic, which you can review here.

How to add size guide?

 

Articles

How to Display Cross-Sell Products on the Product Detail Page in Woomen

How to Add a Discount Offer Popup on the Product Page in Woomen

In WooCommerce with the Woomen Theme, you can create discount offers to encourage customers to spend more and enjoy benefits such as percentage-based or fixed-amount discounts. These offers can be displayed on product detail pages as popups, guiding users about ongoing deals.


xample Discount Scenarios

  • Spend $2,000 → Get 10% off

  • Spend $3,000 → Get $300 discount

Step 1: Enable Spend & Save Discounts

  1. Log in to your WordPress Dashboard.

  2. In the sidebar, navigate to Merchant → Spend and Save Discounts.

  3. Enable this feature.

  4. Choose your discount type:

    • Percentage Discount (e.g., 30%)

    • Fixed Amount Discount (e.g., $300)

  5. Set your threshold amount (e.g., $3,000).

  6. Save your settings.

Step 2: Display Discount Popup on Product Page

By default, the discount popup will not appear automatically on the product detail page. To display it, you’ll need to use a WordPress hook.

  1. Edit your product page using Elementor.

  2. In the Elementor sidebar, search for the widget DoAction.

  3. Drag and drop the widget where you want the popup to appear.

  4. From the settings, select:

    • Predefined Action → Before Single Product.

  5. Save and update the page.

Now, the discount popup will appear on the product page, informing customers about the offer.


Step 3: Test the Discount

  1. Add products to your cart.

  2. Increase the quantity until the total reaches the discount threshold (e.g., $3,000).

  3. Check the popup—it will confirm your eligibility (e.g., Congratulations, you got a 30% discount!).

  4. Go to the Cart Page and proceed to Checkout.

  5. At checkout, you’ll see the discount applied:

    • Example:

      • Cart Total: $5,850

      • Discount (30%): $1,755

      • Final Payable: $4,095

How to Add and Display Gift Offers on the Product Detail Page in Woomen

Gift offers are a powerful way to increase sales and reward loyal customers. With the Woomen Theme and WooCommerce, you can easily set up a “Spend & Get a Gift” offer. For example, if a customer spends $2000, they can receive a free product, such as a Poplin Shirt Dress.

In this guide, we’ll walk you step by step on how to create and display gift offers in your store.


Step 1: Enable the Gift Offer in WooCommerce

  1. Log in to your WordPress Dashboard.

  2. From the sidebar, go to:
    WooCommerce > Merchants > Spend and Get a Gift Offer.

  3. Enable the option.

  4. Select the product you want to give as a gift (e.g., Poplin Shirt Dress).

  5. Set the spending threshold (e.g., $2000).

Now, whenever a customer shops for $2000 or more, the selected product will be added as a free gift.


Step 2: Display the Gift Offer on the Product Page

By default, the offer may not appear on the product detail page. To display it, you’ll need to use Elementor and a DoAction widget.

  1. Open your Product Detail Page in Elementor.

  2. In the Elementor sidebar, search for the DoAction widget.

  3. Drag and drop it where you want to display the gift offer.

  4. In the widget settings:

    • Choose Custom Action instead of Predefined Action.

    • Select Before Single Product as the hook.

  5. Save your changes and refresh the product page.

Now the gift offer will appear at the top of your product detail page.


Step 3: Test Your Gift Offer

  1. Add products to your cart until the total amount reaches or exceeds $2000.

  2. Go to the Cart Page.

  3. You should see the gift product automatically applied.

    • Example: If you selected the Poplin Shirt Dress worth $450, it will appear as free in the cart.

  4. The cart total will adjust accordingly, subtracting the gift product’s price.

Example in Action

  • Customer total: $8490

  • Gift Offer: Spend $2000, Get Poplin Shirt Dress Free ($450 value)

  • Discount applied: $450

  • Final amount payable: $8040

Important Notes

  • The gift product must be added to the cart in order for the offer to apply.

  • You can run multiple offers, such as:

    • Spend $2000 → Get a Free Product

    • Spend $3000 → Get 30% Discount

  • You can enable/disable these offers anytime from the Merchants tab in WooCommerce.

Product Card Design

Articles

How to Submit and Publish Products in the Woomen Theme

Follow these steps to add a new product to your store:

Go to Your Dashboard

  • From your WordPress Dashboard, navigate to:
    Products > Add New

Fill in Basic Product Information

  • Product Name → Enter the product title (e.g., Blue Cotton T-Shirt).

  • Product Description → Add detailed information about the product (features, materials, usage, etc.).

    • You can also include images, videos, or formatted text using the editor.

Set Product Type

In the Product Data panel, you’ll choose what type of product you are adding:

  • Simple Product → A product with no variations (e.g., Leather Handbag).

  • Variable Product → A product that comes in multiple options (e.g., T-Shirt with Size & Color variations).

For Variable Products, you’ll need to set Attributes (like Size, Color) and then create Variations for each option.


Pricing

  • In the General tab under Product Data:

    • Regular Price → Enter the standard product price.

    • Sale Price → (Optional) Enter a discounted price and schedule sale dates.

Add Product Images

  • Product Image → Upload the main image of the product.

  • Product Gallery → Add additional images to show different angles, colors, or details.

Assign Categories, Tags & Brands

  • Product Categories → Select the relevant category (e.g., Clothing > Dresses).

  • Product Tags → Add tags like Summer, Casual, Cotton.

  • Brands → Select a brand or create a new one.

Short Description

  • Add a short description that appears next to the product image on the product page.

                                                   Publish the Product

How to Create Post Cards in the Woomen Theme

How to Create a Post Card

CubeWP Post Loop is a powerful tool that allows users to create and manage custom post layouts for any post type. It helps display content in card-style formats, which is useful for highlighting key pieces of content such as blog posts, events, services, or products. The plugin offers multiple pre-built layout styles that can be applied to different post types, making it easier to maintain a consistent design across your website
 

Follow the steps below to create and style a custom Post Card using CubeWP:

 

Step 1: Define Post Card Styles

1.      Navigate to your WordPress Dashboard > CubeWP > Settings > Post Settings.

2.      Under Create Post Card Styles, select the Post Type for which you want to create post card styles.

3.      Enter the style names as comma-separated values (e.g., Style1,
Style2).
This will initialize the available layout styles for your selected post type.

Step 2: Configure Post Card Settings

1.      Go to WordPress Dashboard > CubeWP > Post Cards.

2.      Configure the following settings:

o    Select Post for Preview

o    Select Post Type

o    Select Loop Style (the styles created in Step 1 will appear here)

These settings will determine how the post card will appear and behave for the chosen post type.

Step 3: Design the Post Card Layout

You’ll find two primary configuration areas:

1.      Edit Post Card Layout

o    Add the HTML markup to structure your post card.

2.      Layout CSS

o    Apply custom CSS to style your post card layout.

This allows for full control over both structure and presentation.

Step 4: Use Shortcodes in HTML

In the HTML section, you can insert shortcodes available in the right sidebar. These are grouped under:

·         WordPress Default Fields

·         Taxonomies

·         Author

·         CubeWP UI & Custom Tags

·         WooCommerce

Example: Adding a Shortcode in HTML

To display the post title and content with a link, use the following structure:

				
					<div class="cwp-post-content-container"> <div class="cwp-post-content"> <h4><a href=" [loop_post_link] "> [loop_the_title] </a> </h4> [loop_the_content] </div> <ul class="cwp-post-terms"> <li> <a href=" [loop_property_type_tax_link] "> [loop_property_type] </a> </li> </ul> </div>

Default HTML Code (You can make amendments according to yours)

				
					<div [loop_woo_post_class]>
    <div class="fashion-v3-card-1-main">
        <div class="fashion-v3-card-1">
            <div class="fashion-v3-card-1-thumbnail">
                <a href="[loop_post_link]">
                    <img src="[loop_featured_image]" alt="featured-image">
                </a>
                <div class="fashion-v3-card-1-save save-tooltip" data-tooltip="Add To Wishlist" data-flow="left">
                    [loop_post_save]
                </div>
                <div class="fashion-v3-card-1-cart-btn">
                    <div class="fashion-v3-card-1-cart women-wc-quick-checkout" data-tooltip="Add To Cart"
                        data-flow="up" data-productid="[loop_woo_product_id]">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                            <g clip-path="url(#clip0_10803_559)">
                                <path
                                    d="M11.22 5.46562H6.82005V1.06559C6.82005 0.762058 6.57362 0.515625 6.26999 0.515625C5.96645 0.515625 5.72002 0.762058 5.72002 1.06559V5.46562H1.31999C1.01645 5.46562 0.77002 5.71206 0.77002 6.01559C0.77002 6.31923 1.01645 6.56566 1.31999 6.56566H5.72002V10.9656C5.72002 11.2692 5.96645 11.5157 6.26999 11.5157C6.57362 11.5157 6.82005 11.2692 6.82005 10.9656V6.56566H11.22C11.5236 6.56566 11.7701 6.31923 11.7701 6.01559C11.7701 5.71206 11.5236 5.46562 11.22 5.46562Z"
                                    fill="#00174F" />
                            </g>
                            <defs>
                                <clipPath id="clip0_10803_559">
                                    <rect width="11" height="11" fill="white" transform="translate(0.77002 0.515625)" />
                                </clipPath>
                            </defs>
                        </svg>
                    </div>
                </div>
                <div class="fashion-v3-card-1-tags">
                    <p class="tag-new wc-women-remove-empty">[loop_woo_new]</p>
                    <p class="tag-sale wc-women-remove-empty">[loop_woo_on_sale]</p>
                    <p class="tag-percent wc-women-remove-empty">Save [loop_woo_discount_percentage]</p>
                </div>
            </div>
            <div class="fashion-v3-card-1-content">
                <div class="title-price">
                    <a href="[loop_post_link]">
                        <span class="fashion-v3-card-1-title">[loop_the_title]</span>
                    </a>
                    <p class="fashion-v3-card-1-price">[loop_woo_normal_price]</p>
                </div>
                <div class="fashion-v3-card-1-colors women-wc-quick-checkout" data-productid="[loop_woo_product_id]">
                    <p>More Colors</p>
                    [loop_woo_color]
                </div>
            </div>
        </div>
    </div>
</div>

Default CSS Code

				
					.fashion-v3-card-1 {
    display: flex;
    flex-direction: column;
}

.fashion-v3-card-1-content {
    gap: 9px;
    display: flex;
    flex-direction: column;
    padding: 17px 16px 2px 16px;
}

.fashion-v3-card-1-save {
    position: absolute !important;
    top: 19px;
    right: 27px;
    z-index: 99;
    opacity: 0;
    transition: .3s;
}

.fashion-v3-card-1-save .cwp-single-save-btns.cwp-single-widget span.cwp-main,
.fashion-v3-card-1-save .cwp-single-share-btn.cwp-single-widget span.cwp-main {
    border-radius: 100%;
    padding: 2px 0px 0px 0px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-color: #fff;
}

.fashion-v3-card-1-save .cwp-single-save-btns.cwp-single-widget span.cwp-main svg path,
.fashion-v3-card-1-save .cwp-single-share-btn.cwp-single-widget span.cwp-main svg path {
    color: #000000;
}

.fashion-v3-card-1-save .cwp-single-save-btns.cwp-single-widget span.cwp-main svg,
.fashion-v3-card-1-save .cwp-single-share-btn.cwp-single-widget span.cwp-main svg {
    width: 12px;
    display: none;
}

.fashion-v3-card-1-save .cwp-main:after {
    content: "\f02e";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    color: #00174F;
    font-size: 14px;
}

.fashion-v3-card-1-save .cwp-main.cwp-save-post:after {
    font-weight: 400;
}

.fashion-v3-card-1-save .cwp-main.cwp-saved-post:after {
    font-weight: 600;
}

.fashion-v3-card-1-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    text-transform: capitalize;
    transition: .3s;
    color: #00174F;
}

.fashion-v3-card-1-title:hover {
    color: #00174F;
}

.fashion-v3-card-1-price {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    color: #767676;
}

.fashion-v3-card-1-colors .color-attributes .color-swatch {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #E6E6E6;
    transition: .3s;
}

.fashion-v3-card-1-colors .color-attributes .color-swatch:hover {
    box-shadow: 0px 0px 1px 1px #00174F;
}

.fashion-v3-card-1-colors .color-attributes {
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 10px;
    display: none;
    cursor: pointer;
}

.fashion-v3-card-1-colors label {
    position: relative;
    padding: 18px 0px 0px 10px;
    margin-left: 16px;
}

.fashion-v3-card-1-colors input[type="radio"] {
    display: none;
}

.fashion-v3-card-1-colors .color-attributes li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 15px;
}

.fashion-v3-card-1-save[data-tooltip][data-flow^=left]::before {
    border-left-color: #00174F;
}

.fashion-v3-card-1-save[data-tooltip]::after {
    background-color: #00174F;
}

.fashion-v3-card-1-cart[data-tooltip][data-flow^=left]::before {
    border-left-color: #00174F;
}

.fashion-v3-card-1-cart[data-tooltip]::after {
    background-color: #00174F;
}

.fashion-v3-card-1-save .woo-ajax-loader {
    align-items: center;
    justify-content: center;
}

.fashion-v3-card-1-thumbnail {
    overflow: hidden;
    position: relative;
}

.fashion-v3-card-1-thumbnail img {
    width: 100%;
    height: auto;
    transition: 3000ms;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-thumbnail img {
    transform: scale(1.1);
}

.fashion-v3-card-1-content .title-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.fashion-v3-card-1-content .title-price a {
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fashion-v3-card-1-colors p {
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-transform: capitalize;
    color: #767676;
    display: block;
}

.fashion-v3-card-1-cart-btn {
    position: absolute;
    bottom: 19px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: .3s;
}

.fashion-v3-card-1-cart {
    background: #FFFFFF;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 120px;
    cursor: pointer;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-colors .color-attributes {
    display: flex;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-colors p {
    display: none;
}

.fashion-v3-card-1:hover .fashion-v3-card-1-cart-btn,
.fashion-v3-card-1:hover .fashion-v3-card-1-save {
    opacity: 1;
}

.fashion-v3-card-1-tags {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fashion-v3-card-1-tags p {
    padding: 8px 10.5px;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    text-transform: uppercase;
    color: #040C13;
    width: fit-content;
    border-radius: 4px;
}

.fashion-v3-card-1-tags .tag-new {
    background: #FFFFFF;
    color: #1D1D1D;
}

.fashion-v3-card-1-tags .tag-sale {
    background: #1D1D1D;
    color: #ffffff;
}

.fashion-v3-card-1-tags .tag-percent {
    background: #A50118;
    color: #ffffff;
}

.cubewp-filters-style1.fashion-v3-shop-post .cwp-grids-container {
    gap: 36px 0px;
    padding: 0px !important;
}

.elementor-widget-vp_saved_products .col-6 {
    margin-bottom: 20px;
}

.cwp-grids-container .col-md-3 {
    transition: .3s;
}

.cwp-grids-container.columns-2 .col-md-3 {
    width: 33.333%;
}

.woocommerce .cross-sells .fashion-v3-card-1-colors p {
    text-align: left;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .title-price a {
    text-align: left;
}

.woocommerce .cross-sells .col-6 {
    margin-bottom: 20px;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .color-attributes {
    margin: 0;
    align-items: center;
    justify-content: left;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .color-attributes li {
    width: auto !important;
}

.woocommerce .cross-sells .fashion-v3-card-1-content .color-attributes::before {
    display: none;
}

.fashion-v3-card-1-colors {
    position: relative;
    width: fit-content;
    padding-bottom: 5px;

}

@media (max-width:768px) {
    .fashion-v3-card-1-content .title-price {
        gap: 7px;
    }

    .cubewp-filters-style1.fashion-v3-shop-post .col-md-3 {
        width: 50% !important;
    }

    .cwp-grids-container.columns-2 .col-md-3 {
        width: 50%;
    }

    .fashion-v3-card-1-content {
        padding: 15px 0px 0px 0px;
    }
}

.wp-admin .fashion-v3-card-1-colors p {
    display: block !important;
    margin: 0px;
}

Elementor Integration

Articles

Elementor Pro + Woomen: Unlocking Full Design Freedom

When you combine the Woomen WooCommerce theme with Elementor Pro, you unlock the ability to design a completely customized online store that reflects your brand identity. Unlike traditional WooCommerce setups where you are limited to predefined templates, Elementor Pro gives you the flexibility to design every element of your store without writing a single line of code.


Why Use Elementor Pro with Woomen?

The Woomen theme is built to integrate seamlessly with Elementor Pro, allowing you to take advantage of its advanced design features:

  • Drag-and-drop design freedom – You can design product pages, shop layouts, headers, and footers visually.

  • WooCommerce widgets – Elementor Pro includes dedicated widgets for product title, price, description, variations, stock status, ratings, and add-to-cart buttons.

  • Responsive editing – You can optimize your designs for desktop, tablet, and mobile views.

  • Theme Builder – Elementor Pro allows you to override the default WooCommerce templates and create your own custom layouts for products, shop archives, and checkout pages.

For example, instead of using the default WooCommerce single product page, you can create a custom design. Simply drag in the Product Title, Product Image, Product Price, and Product Variations widgets, style them according to your preferences, and publish the template. This design will automatically apply to all products, giving your store a consistent and professional appearance.

Creating Reusable Templates

Dynamic Data Integration

Advanced Elementor Techniques

Newsletter Subscription in the Woomen Theme

A newsletter is a type of email that a business, organization, or individual regularly sends to people who subscribe (sign up with their email address).

It usually contains:

  • Updates about the company or products

  • News, tips, or educational content

  • Promotions, discounts, or special offers

  • Invitations to events or new launches

Example: If you subscribe to a clothing brand’s newsletter, you might get emails about their new arrivals, seasonal sales, or fashion tips.

Please read the below article to learn how to build it.

Articles

How to Set Up a Newsletter Subscription in the Woomen Theme

What is a Newsletter?

A newsletter is a marketing and communication tool used to share updates, promotions, announcements, or valuable content with your website visitors via email. It’s typically presented as a subscription form (e.g., “Join our mailing list”) that allows users to sign up with their email addresses.

Newsletters help you:

  • Build and grow your email list

  • Keep your audience engaged

  • Promote products, services, or blog posts

  • Share company news or offers

  • Drive repeat traffic to your site

Adding a newsletter popup to your website can significantly increase subscription rates and help you stay connected with your audience.

How to Set Up a Newsletter Popup

To create a newsletter subscription popup using CubeWP and Elementor, follow these steps:

Step 1:

 

Please go to your WordPress dashboard>CubeWp form> Custom form> Add new and fill the below fields:

  1. Form Name*
  2. Form Slug*
  3. Set Group Order
  4. Description*
  5. Form Style

Then Click on Add new field


Let suppose you have created an email field, You have to copy the field name and place in side bar under “User Email Field Name“

                                      Save the form

  1. Then Again click on the WordPress dashboard> CubeWP Forms and copy the short code.

Step 2:

  1. Go to your WordPress Dashboard → CubeWP → Theme Builder → click on Add New.

  2. A new window will appear.

    • Under “Select the type of template you want to work on,” choose “Popup”

  3. Enter a name for your popup template.

  4. Select the display conditions (where you want the popup to appear).

  5. Click on “Save and Edit.”

    You will be redirected to Elementor, where you can design your popup.

Step 3:
 
Here you need to add an element of “CubeWp Forms” coming from Value Pack Addon
 
 
 
 
Step 4: 
 
Click on the setting icon, Then you will have an option to select Popup trigger type, Popup position and further settings.
 
 

 After making the settings, Just click on publish button appearing on right top

 
 
 
 

Store Management

Articles

The Easiest Way to Manage WooCommerce Orders with the Woomen Theme

Overview

The order management system in WooCommerce allows users to place orders, make payments, and track their purchases, while store admins can manage, update, and process these orders from the WordPress dashboard.


1. Customer Order Process

Step 1: Product Selection

  • A customer browses the store (e.g., searches for trousers).

  • They select a product and add it to the cart.

  • Customers can either:

    • Add to Cart → continue shopping.

    • Buy It Now → go directly to checkout.

Step 2: Checkout Page

  • After choosing Buy It Now or proceeding from the cart, the customer is redirected to the checkout page.

  • At checkout, they must:

    • Enter billing details.

    • Select a payment gateway (e.g., bank transfer, check, cash on delivery, or online payments).

    • Place the order.

2. Configuring Payment Gateways

Accessing Payment Settings

  1. Go to WordPress Dashboard > WooCommerce > Settings > Payments.

  2. Here, you can:

    • Enable offline payment methods (Cash on Delivery, Bank Transfer, Check Payments).

    • Enable online payment gateways (e.g., Payoneer, PayPal, Stripe, etc.).

Tip: If no payment options appear at checkout, ensure they are enabled in this section.

3. Admin Order Management

Viewing Orders

  • Go to WordPress Dashboard > WooCommerce > Orders.

  • Here, you can see all orders with their status (Processing, Completed, On Hold, Canceled, Refunded, etc.).

Updating Order Status

  1. Click on the order you want to manage.

  2. Change its status (e.g., from Processing to Completed).

  3. Click Update.

  4. The updated status will reflect in the Orders list.

4. Customer Order Tracking

Default “My Account” Page

  • WooCommerce provides a My Account page where customers can:

    • View all their orders.

    • Check order statuses (Completed, Processing, On Hold, Canceled, Refunded).

    • Manage downloads, addresses, and account details.

Adding “My Account” to Storefront

  1. Edit your header with Elementor.

  2. Add an icon box or text for My Account.

  3. Assign the My Account page link to this element.

  4. Customize appearance (icon, color, size, label).

  5. Publish and refresh your site.

5. Troubleshooting (404 Error on My Account Page)

If the My Account page shows a 404 error:

  1. Go to Dashboard > WooCommerce > Settings > Advanced.

  2. Under the My Account Page setting, make sure the correct page is selected.

  3. Save changes.

  4. Refresh the front end — the My Account page should now work correctly.

Watch the video below to see the complete process

How to Add a Store Locator Feature/Page in the Woomen Theme

 Store Locator Setup Guide using CubeWP

This documentation outlines the complete process for setting up a Store Locator feature on your WordPress website using CubeWP. The setup involves creating a new post type, defining custom fields, adding listings, designing post cards, and building a dynamic front-end locator page with map and search functionality.

 Step 1: Create the “Store Locator” Post Type

1.      Log into your WordPress Admin Dashboard

2.      Navigate to CubeWP > Post Types > Add New

3.      Create a new post type named “Store Locator”

Once created, “Store Locator” will appear in the left menu of your dashboard for easy access.

 

Step 2: Add Custom Fields for Store Details

1.      Go to CubeWP > Custom Fields > Add New Field Group

2.      Assign the field group to the “Store Locator” post type

3.      Create and add the following fields:

o    Store Address 

o    Phone Number 

o    Operating Hours 

These fields allow you to enter detailed information about each store including its location, contact, and timings.

 

Step 3: Add Store Listings

1.      In the WordPress dashboard, go to Store Locator > Add New

2.      Fill in the following information:

o    Title (e.g., “Downtown Branch”)

o    Store Address

o    Phone Number

o    Operating Hours

3.      Click Publish to save the listing

Repeat this process to add all your store locations.

 

 Step 4: Create Custom Post Cards for Store Locator

➤ Step 4.1: Define Post Card Styles

1.      Navigate to CubeWP > Settings > Post Settings

2.      Under Create Post Card Styles, select the “Store Locator” post type

3.      Add style names as comma-separated values (e.g., Style1,
Style2)

This step initializes custom layout options for your store listings.

➤ Step 4.2: Configure Post Card Layouts

1.      Go to CubeWP > Post Cards

2.      Set the following options:

o    Select a Post for Preview

o    Choose Post Type: “Store Locator”

o    Select Loop Style (choose from styles defined above)

This defines how your store listing cards will visually appear on the front end.

 

Step 5: Create the Store Locator Page

1.      Go to Pages > Add New, name it “Store Locator”

2.      Edit the page using Elementor or your preferred page builder

3.      Add the following components:

o    Archive Map – Displays store locations on a map

o    Archive Post Display – Lists the store post cards; select “Store Locator” as the post type

o    Search & Filter Form – (Optional) Enables advanced search/filter options for users

Customize the layout using Elementor’s containers, sections, or your theme’s design system.

Video Tutorial (Optional)

If available, include a video link demonstrating the full setup:
[Insert video link here]

Additional Notes

·         Ensure Google Maps API or your chosen map service is properly set up in CubeWP settings.

·         Use Elementor’s design controls to tailor the layout, spacing, and appearance.

·         You can link your Store Locator page from any menu or button on your site for easy access.

Adding & Managing Products

If you’re running an online store using the Woomen WordPress theme, understanding how to add and manage different types of products is essential. Whether you want to sell simple physical items, products with variations, or digital downloads, Woomen makes it easy and flexible.

In this guide, we’ll walk you through how to add and manage:

  • Simple Products

  • Variable Products

  • Digital Products

Adding Simple Products

A simple product is a straightforward item with no variations or options — like a single t-shirt or a mug.

How to Add a Simple Product:

  1. From your WordPress dashboard, go to Products > Add New.

  2. Enter the product name and description.

  3. Scroll to the Product Data panel and select Simple product from the dropdown.

  4. Set the price (regular and sale price if applicable).

  5. Manage inventory, shipping, and other details as needed.

  6. Add product images and gallery photos.

  7. Set the product categories and tags.

  8. Click Publish to make the product live.

Tip: Use clear product images and detailed descriptions to help customers make informed decisions.

Adding Variable Products

Variable products allow you to offer different variations of the same product — like multiple sizes, colors, or materials.

How to Add a Variable Product:

  1. Go to Products > Add New.

  2. Add the product title and description.

  3. In the Product Data panel, select Variable product.

  4. Navigate to the Attributes tab:

    • Add new attributes (e.g., Size, Color).

    • Enter values separated by a vertical bar (|), e.g., Small | Medium | Large.

    • Check Used for variations.

    • Click Save attributes.

  5. Switch to the Variations tab:

    • Choose Create variations from all attributes and click Go.

    • Edit each variation to set specific prices, SKUs, images, and stock status.

  6. Fill in other product details as needed.

  7. Publish the product.

Adding Digital Products

Digital products are files your customers can download after purchase — such as eBooks, music, or software.

How to Add a Digital Product:

  1. Go to Products > Add New.

  2. Enter product name and description.

  3. Under Product Data, select Simple product and then check Downloadable.

  4. Upload the file(s) your customers will download.

  5. Set download limits and expiry if needed.

  6. Set the product price.

  7. Publish the product.

Bonus: You can combine digital with variable options if needed (e.g., different versions of a digital file).

Managing Products in Woomen

Woomen theme integrates smoothly with WooCommerce, letting you:

  • Edit product details anytime via Products > All Products.

  • Bulk edit products to update prices, categories, or stock.

  • Track inventory and receive low-stock alerts.

  • Set featured products to highlight them on your homepage or shop page.

  • Use advanced filters and sorting so customers can find products quickly.

Tips for Success

  • Keep product titles clear and keyword-rich for SEO.

  • Use high-quality images and add multiple photos per product.

  • Write detailed product descriptions focusing on benefits and features.

  • Regularly update stock and pricing to avoid customer frustration.

  • Test purchase flows to ensure downloads and variations work flawlessly.

Organizing Products with Categories, Tags, and Attributes

When building an online store with the Woomen WordPress theme, keeping your products organized is key to providing a smooth shopping experience for your customers. Proper product organization not only helps visitors find what they want quickly but also improves your site’s SEO and overall usability.

In this article, we’ll explore how to use Categories, Tags, and Attributes in Woomen to create a well-structured product catalog.

Why Organize Your Products?

Imagine walking into a store where everything is mixed together without any sections or signs. Frustrating, right? Online stores are no different. Organizing products allows you to:

  • Help customers easily browse and filter products

  • Improve site navigation and product discovery

  • Boost SEO by targeting relevant keywords

  • Manage your inventory efficiently from the backend

Understanding Product Categories

Categories are broad groups that help you classify your products at a high level.

How Categories Work in Woomen:

  • They form the main navigation sections of your store

  • Categories can be hierarchical (with parent and child categories)

  • For example, a clothing store might have categories like Men, Women, and Accessories

Example:
In Woomen, categories usually appear in menus, sidebars, or as part of your shop’s layout, making it easier for visitors to explore related products.

Using Product Tags to Add Details

While categories are broad, Tags provide more specific details about products.

How Tags Help:

  • Tags describe product features, styles, or uses

  • For example, a dress could have tags like summer, casual, or cotton

  • Tags help customers find similar products even if they belong to different categories

In Woomen, product tags often appear under product titles or in filters, helping shoppers narrow down their choices.

Leveraging Product Attributes for Filtering

Attributes are product properties like size, color, or material that customers can use to filter products.

Why Attributes Matter:

  • They add structured product information

  • Customers can filter products dynamically (e.g., all blue shirts, or size Medium)

  • Attributes improve the shopping experience, especially for stores with many variants

Woomen integrates seamlessly with WooCommerce attributes, enabling your site visitors to filter products on shop pages or via sidebar widgets.

How to Set Up Categories, Tags, and Attributes in Woomen

Adding Categories:

  1. Go to Products > Categories in your WordPress dashboard

  2. Add new categories, set parent categories if needed

  3. Assign categories to products when adding or editing them

Adding Tags:

  1. Go to Products > Tags

  2. Create tags relevant to your products

  3. Assign tags in the product editor under the “Product tags” section

Adding Attributes:

  1. Navigate to Products > Attributes

  2. Create new attributes (e.g., Color, Size)

  3. Configure terms (e.g., Red, Blue for Color)

  4. Assign attributes to individual products under the “Attributes” tab

Tips for Effective Product Organization in Woomen

  • Keep category names clear and intuitive

  • Use tags sparingly for meaningful descriptors

  • Only create attributes relevant for filtering options

  • Regularly review and clean up unused categories, tags, or attributes

  • Use Woomen’s built-in widgets and filters to showcase these taxonomies prominently

Inventory Management

Inventory Management in WooCommerce with Woomen Theme

Effective inventory management is crucial for running a successful online store. It ensures that customers see accurate stock availability, prevents overselling, and helps store owners keep track of which products need restocking. WooCommerce provides built-in inventory management tools, and the Woomen theme is fully optimized to display this information clearly on product pages, in the cart, and at checkout.

Why Inventory Management Matters

  • Customer satisfaction: Customers expect to see real-time stock availability. Selling products that are out of stock can damage trust.

  • Efficient operations: Proper stock tracking reduces errors and saves time in order fulfillment.

  • Business insights: Reviewing stock reports helps identify best-selling products and underperformers.

Step 1: Enable Global Inventory Management

Before managing stock at the product level, you need to enable inventory tracking globally.

  1. From the WordPress Dashboard, go to WooCommerce > Settings > Products > Inventory.

  2. Check Enable stock management.

  3. Configure the following global settings:

    • Hold stock (minutes): Reserve stock for unpaid orders for a set time before canceling.

    • Low stock threshold: Define when you want to be notified that stock is running low.

    • Out of stock threshold: The point at which a product is marked out of stock.

    • Out of stock visibility: Choose whether to hide out-of-stock items from the shop catalog.

    • Stock notifications: Enable email alerts for low or out-of-stock products.

                                                            Save your changes.

Step 2: Manage Inventory for Products

Simple Products

For single products that do not have variations (such as a single book or bag), you can manage inventory directly.

  1. Edit or add a product from Products > Add New.

  2. Scroll to the Product Data panel and click the Inventory tab.

  3. Configure:

    • SKU (Stock Keeping Unit): A unique identifier for the product.

    • Manage stock? Enable this option to track stock automatically.

    • Stock quantity: Enter the number of units available.

    • Allow backorders: Decide whether customers can purchase when the item is out of stock.

    • Stock status: Set whether the product is In Stock or Out of Stock.

    • Sold individually: Allow only one unit per order if necessary.

Variable Products


For products with variations (such as a t-shirt with different sizes or colors), stock can be managed per variation.

  1. Go to the Attributes tab to create attributes (for example, Size or Color).

  2. Switch to the Variations tab.

  3. Expand each variation and configure:

    • SKU

    • Manage stock individually

    • Stock quantity

    • Backorder options

    • Stock status

This ensures that inventory is tracked accurately for each variation (for example, “Small – Red” can have 5 units while “Large – Blue” may have 2 units).


Step 3: Stock Status on the Storefront

The Woomen theme displays stock status directly on product pages, giving customers clear information:

  • In Stock: The product can be purchased immediately.

  • Out of Stock: Customers cannot add the product to their cart.

  • Available on Backorder: Customers can place an order even though the product is not currently in stock.

These messages can be styled and positioned using Elementor if you want to customize their appearance.


Step 4: Monitor Stock Reports

WooCommerce provides built-in stock reporting to help you stay on top of your inventory.

  1. Go to WooCommerce > Reports > Stock.

  2. Review the following:

    • Low stock products: Products that are running low.

    • Out of stock products: Items that are completely sold out.

    • Most stocked products: Products with the highest inventory levels.

This data helps you make informed decisions about restocking and product promotions.


Best Practices for Inventory Management

  • Assign unique SKUs to every product and variation.

  • Use low stock notifications to avoid unexpected shortages.

  • Avoid overselling by disabling backorders unless you can guarantee timely fulfillment.

  • Regularly check stock reports to identify fast-moving products and reorder them quickly.

  • Combine WooCommerce with advanced inventory tools (such as ERP or POS systems) if you manage stock across multiple sales channels.

Final Thoughts

Inventory management in WooCommerce is straightforward but powerful. With the Woomen theme, product availability is clearly communicated to your customers, reducing confusion and improving shopping experiences. By enabling global stock settings, managing product-level inventory, and monitoring stock reports, you can run your store efficiently and keep your customers satisfied.

Coupons, Discounts, and Promotions

One of the most powerful ways to attract customers and increase sales is through coupons, discounts, and promotions. These marketing tools not only encourage visitors to buy but also help build loyalty and boost your brand reputation.

In this article, we’ll explore how you can effectively use coupons, discounts, and promotions within the Woomen theme to maximize your store’s success.

Why Coupons and Discounts Matter

In the competitive world of ecommerce, shoppers are always on the lookout for a great deal. Coupons and discounts:

  • Create a sense of urgency and excitement

  • Encourage first-time purchases

  • Reward loyal customers

  • Help clear out inventory or promote new products

When implemented smartly, they can significantly increase your store’s conversion rates.

Setting Up Coupons and Discounts in Woomen

While Woomen is a versatile WordPress theme designed for fashion, lifestyle, and ecommerce stores, it typically works seamlessly with popular plugins like WooCommerce, which handle coupons and discount logic.

Step 1: Enable WooCommerce Coupon Settings

  1. From your WordPress dashboard, go to WooCommerce > Settings > General

  2. Make sure the Enable coupons option is checked

  3. Save changes

Step 2: Create a Coupon

  1. Navigate to WooCommerce OR Marketing > Coupons

  2. Click Add Coupon

  3. Enter a coupon code (e.g., SPRINGSALE20)

  4. Set the discount type — percentage, fixed cart discount, or fixed product discount

  5. Define usage limits and expiration dates for more control

Step 3: Apply Coupon On The Checkout Page

Go to your shop and add any product to the cart.

  • Navigate to the Checkout Page.
  • You will see a field labeled “Have a coupon? Click here to enter your code” at the top of the checkout form.
  • Click the link, enter your coupon code (e.g., SAVE20), and press Apply Coupon.
  • The discount will be automatically applied, and the order total will update.



Integrations and Extensions

Articles

Connecting Payment Gateways

Stripe, PayPal, and Custom Options

Whether you’re running a product marketplace, subscription service, or digital store, having a seamless payment process is essential. The Woomen theme is designed to work smoothly with leading payment gateways like Stripe and PayPal, and it also supports custom integrations. This article will guide you step-by-step on how to connect these gateways in your Woomen-powered website.

Why Payment Gateways Matter

A payment gateway is what allows you to securely accept payments online. Choosing the right one depends on:

  • Your target audience

  • Supported countries

  • Transaction fees

  • Supported currencies and features

Woomen theme supports major gateways through WooCommerce, making it flexible and easy to scale.

1. Getting Started: WooCommerce Setup

Before you connect any payment gateway, ensure:

  • WooCommerce is installed and activated

  • Your store settings (currency, location, products) are configured

  • SSL (HTTPS) is enabled on your website

To install WooCommerce:

  1. Go to Plugins > Add New

  2. Search for WooCommerce

  3. Install and activate the plugin

2. Connecting Stripe

Stripe is a popular payment processor known for smooth checkout, card payments, Apple Pay, and more.

Steps to Set Up Stripe:

  1. Go to WooCommerce > Settings > Payments

  2. Click Stripe

  3. Install the official Stripe plugin if prompted

  4. Enter your Stripe API keys (from your Stripe dashboard)

  5. Save changes

Stripe Features:

  • Accept credit/debit cards

  • Supports Apple Pay, Google Pay

  • Instant and recurring payments

3. Connecting PayPal

PayPal is widely trusted by customers and offers several integration options.

Steps to Set Up PayPal:

  1. In WooCommerce > Settings > Payments, enable PayPal

  2. Use either:

    • PayPal Standard (redirects users to PayPal)

    • PayPal Payments (integrated checkout experience)

  3. Enter your PayPal business email or API credentials

  4. Save changes

PayPal Features:

  • Accept PayPal balance, cards, bank transfers

  • Global reach with multi-currency support

  • Dispute and refund management

4. Adding Custom Payment Gateways

Need something beyond Stripe and PayPal — like a local bank gateway or manual payment?

Options Include:

  • Cash on Delivery

  • Bank Transfer

  • Third-party local gateways (e.g., Razorpay, 2Checkout)

To Add a Custom Gateway:

  1. Install a WooCommerce-compatible plugin for your provider

  2. Configure settings from WooCommerce > Payments

  3. Test thoroughly before going live

Tip: If you’re a developer, you can create your own WooCommerce gateway plugin using hooks and APIs.

5. Testing Your Payment Gateway

Before launching, always test your gateway in sandbox or test mode.

How to Test:

  • Enable sandbox mode in Stripe/PayPal settings

  • Use test cards or dummy PayPal accounts

  • Confirm transactions and email notifications work as expected

6. Troubleshooting Tips

  • Payment method not showing? Check if it’s enabled in WooCommerce

  • Currency not supported? Make sure your WooCommerce currency matches the gateway’s

  • SSL warning? Your site must use HTTPS to process payments securely

Multilingual Setup with WPML/Polylang

Expanding your website to a global audience is a smart move — and with the Woomen WordPress theme, going multilingual is easier than ever. In this guide, we’ll walk you through two of the most popular translation plugins: WPML and Polylang. Whether you’re targeting different regions or simply want to offer your content in more than one language, this tutorial has you covered.

Why Go Multilingual?

A multilingual website can help you:

  • Reach a wider audience

  • Improve SEO in multiple regions

  • Build trust with local users

  • Increase conversions and engagement

Is the Woomen Theme Translation-Ready?

Yes! The Woomen theme is fully compatible with popular translation plugins like WPML and Polylang, and it’s built following WordPress best practices — making it translation-ready out of the box.

Option 1: Setting Up WPML with Woomen

What Is WPML?

WPML (WordPress Multilingual Plugin) is a premium translation plugin that lets you build a fully multilingual site with powerful control over translated content, media, strings, and SEO.

Step-by-Step Setup

1. Install WPML

Go to https://wpml.org and purchase the plugin. Then:

  • Upload and install the core WPML plugin

  • Install recommended add-ons (like String Translation, Translation Management)

2. Choose Your Languages

After activation, the WPML setup wizard will appear:

  • Select your site’s current language

  • Add the additional languages you want to support (e.g., French, Spanish, German)

3. Translate Pages and Posts

Go to Pages > All Pages

  • Click the “+” icon next to the language you want to translate into

  • Translate manually or use WPML’s advanced translation editor

4. Translate Theme Strings

  • Navigate to WPML > Theme and Plugin Localization

  • Scan the Woomen theme for translatable strings

  • Use String Translation to translate dynamic or hardcoded text

5. Multilingual Menus and Widgets

WPML allows you to create menus and widgets for each language, ensuring a consistent user experience across languages.

Option 2: Setting Up Polylang with Woomen

What Is Polylang?

Polylang is a free and user-friendly plugin for managing multilingual content in WordPress. It integrates smoothly with most themes — including Woomen — and offers both manual and automatic translation.

Step-by-Step Setup

1. Install Polylang

Go to Plugins > Add New and search for Polylang. Install and activate it.

2. Configure Languages

  • Go to Languages > Languages

  • Add your default language and additional ones (e.g., Arabic, Urdu, Hindi)

3. Translate Content

  • Edit any post or page

  • Use the language switcher in the post editor to add translations

  • Save translations for each language individually

4. Translate Theme Strings

Install Polylang’s “Lingotek Translation” add-on or use the String Translations section to translate texts from the Woomen theme.

5. Add a Language Switcher

  • Navigate to Appearance > Menus or Widgets

  • Add the Language Switcher to your primary menu or sidebar

Language Switcher Design Tips

The Woomen theme gives you flexibility with header menus and widget areas, allowing you to place your language switcher wherever it suits your layout.

Common placements:

  • Top menu bar

  • Header widget area

  • Footer menu

  • Sidebar

SEO Considerations for Multilingual Sites

  • WPML and Polylang both create SEO-friendly URLs (e.g., /en/, /fr/)

  • You can set hreflang tags for better indexing

  • Translate meta titles and descriptions for each language

Advanced Customization

Articles

Custom CSS/JavaScript for Unique Styling or Functionality

Conditional Logic for Elements

WooCommerce Hooks & Filters

WooCommerce hooks and filters are powerful tools that allow you to insert or modify content on your store without editing core files. In the Woomen theme, we use hooks to give you complete flexibility in placing elements like countdown timers, size guides, and “frequently bought together” sections.

What Are Hooks in WooCommerce?

  • Hooks are specific points in your store layout where you can add custom content or functionality.

  • Actions let you insert something new (for example, a size guide button under the “Add to Cart” button).

  • Filters let you modify existing content (for example, changing the text of the “Add to Cart” button).

The Woomen theme makes this process simple by giving you pre-configured options directly in the WordPress dashboard.


Step 1: Enable Elements from the Dashboard

  1. Go to your WordPress Dashboard.

  2. Navigate to WooMerchant > Settings.

  3. Here you will find toggles to enable different features such as:

    • Enable Sale End Countdown: Displays a countdown timer for sale products.

    • Enable Size Guide Button: Shows a button that links to your product size guide.

    • Enable Frequently Bought Together: Displays recommended products on the product detail page.

When you enable these features, the system activates a WooCommerce hook in the background.

Step 2: Display Hooks in Elementor Using “Do Action”

On the frontend, the Woomen theme includes an Elementor widget called Do Action. This widget allows you to place hook-based elements exactly where you want them.

  1. Edit your product detail page with Elementor.

  2. Drag and drop the Do Action widget into your desired section.

  3. In the widget settings, choose the same hook name you enabled in the backend.

    • For example, if you enabled Sale End Countdown in WooMerchant, select that hook in the Do Action widget.

  4. Elementor will now fetch and display the correct element at that location.

Example

  • From the Dashboard, enable Size Guide Button.

  • Edit the product page with Elementor.

  • Drag in the Do Action widget below the Add to Cart button.

  • Choose the Size Guide Button hook in Elementor to match the setting you selected in WordPress Dashboard > WooMerchant > Size Guide, for example, “Before Single Product.”

  • The size guide button now appears on the frontend exactly where you placed the widget.


Why This is Useful

  • Flexibility: You decide where each element appears, instead of being restricted to a fixed location.

  • No coding required: The Woomen theme handles the technical side of hooks, you just toggle settings and place widgets.

  • Full control: You can enable or disable features individually from the dashboard without editing templates.




Performance and Security

Articles

Speed Optimization

Caching, Image Compression & CDN Setup for Faster Performance

A fast website is crucial for better user experience, higher SEO rankings, and lower bounce rates. Even the most beautifully designed WordPress themes — like Woomen — need performance tuning to reach their full potential.

In this guide, we’ll walk you through practical steps to optimize the Woomen theme for speed using three powerful techniques: caching, image compression, and CDN integration.

Why Site Speed Matters

A slow website can:

  • Drive visitors away

  • Lower your Google search ranking

  • Reduce conversion rates

  • Affect Core Web Vitals and user satisfaction

Let’s fix that by applying proven optimization methods.

1. Caching: Store, Reuse, and Speed Up

What is Caching?

Caching stores static versions of your pages and serves them quickly to users instead of generating them from scratch each time.

Recommended Caching Plugins for Woomen

  • LiteSpeed Cache (Best for LiteSpeed servers)

  • WP Rocket (Premium, user-friendly)

  • W3 Total Cache (Advanced control)

  • WP Super Cache (Simple and free)

Basic Settings to Enable:

  • Page Caching

  • Browser Caching

  • Object Caching (if your host supports it)

  • Minify CSS & JS (test for conflicts)

Tip: Always clear cache after major theme or plugin updates.

2. Image Compression: Shrink Without Losing Quality

Why Optimize Images?

Large, uncompressed images slow down your pages. Optimizing them can cut load times dramatically without affecting visual quality.

Recommended Tools:

  • Smush (Free & Pro version available)

  • ShortPixel (Best balance of compression + quality)

  • Imagify (Easy to use, integrates with WP Rocket)

  • TinyPNG (Online or plugin)

Best Practices:

  • Compress before uploading

  • Use WebP format for modern browsers

  • Lazy load images (Smush or WP Rocket offer this)

  • Avoid oversized banners or stock images

3. CDN Setup: Speed Up Delivery Worldwide

What is a CDN?

A Content Delivery Network (CDN) delivers your site’s content from multiple servers worldwide, reducing load time based on the visitor’s location.

Top CDN Providers:

  • Cloudflare (Free & Premium plans)

  • Bunny.net (Affordable and fast)

  • KeyCDN

  • Jetpack CDN (Free image CDN for WordPress)

How to Integrate with Woomen:

  1. Sign up for a CDN provider (e.g., Cloudflare).

  2. Point your domain to the CDN’s nameservers (Cloudflare guides you through this).

  3. Install a caching plugin (like LiteSpeed or WP Rocket) that supports CDN integration.

  4. Enter your CDN URL in the plugin’s settings.

Bonus Tips:

  • Enable Asset Preloading for fonts and CSS

  • Use HTTP/3 and Brotli Compression (Cloudflare offers these free)

Additional Tips for Woomen Theme Users

  • Update Regularly: Always run the latest version of the Woomen theme.

  • Deactivate Unused Plugins: Extra plugins slow your site down.

  • Mobile Optimization: Use responsive layouts and test with Google PageSpeed Insights.

  • Database Optimization: Use plugins like WP-Optimize or Advanced Database Cleaner to remove junk.

Securing Your Store

SSL, Backups & Malware Scans Made Simple

Running an online store with the Woomen theme means you’ve already taken a big step toward beautiful, responsive design. But what about security?

Online shoppers trust you with sensitive data — names, addresses, credit card info — and it’s your responsibility to protect them. In this post, we’ll walk through three essential ways to secure your store:

  • Setting up SSL (Secure Sockets Layer)

  • Creating automated backups

  • Performing regular malware scans

1. Enable SSL: Encrypt Customer Data

SSL encrypts the connection between your website and visitors, making it almost impossible for hackers to intercept sensitive information.

Why It Matters:

  • Builds customer trust (shows a padlock icon in the browser)

  • Required for payment gateways (Stripe, PayPal, etc.)

  • Boosts your SEO ranking

How to Set Up SSL:

  • Get a free SSL certificate from Let’s Encrypt

  • If you use a hosting provider like Bluehost, SiteGround, or Hostinger, SSL is often included.

  • Install a plugin like Really Simple SSL to automatically update your URLs and settings.

Pro Tip:
After SSL is installed, make sure all links and assets (images, stylesheets) use https:// — not http://.

2. Set Up Backups: Your Emergency Plan

Things go wrong — plugins crash, updates fail, hackers strike. Backups are your insurance policy.

Why You Need It:

  • Restores your site in minutes after a crash

  • Protects your store from data loss

  • Helps you recover from malware or hacks

How to Set Up Backups:

  • Use trusted plugins like:

    • UpdraftPlus

    • BlogVault

    • Jetpack Backup

  • Schedule daily backups stored on:

    • Google Drive

    • Dropbox

    • Amazon S3

What to Back Up:

  • Your database (orders, users, settings)

  • All site files (themes, plugins, uploads)

3. Run Malware Scans Regularly

Malware silently infects websites, redirects customers, and steals data. Most site owners don’t even know they’re infected — until it’s too late.

Symptoms of Malware:

  • Site redirects to unknown pages

  • Admin access issues

  • Slow performance or crashes

How to Scan for Malware:

  • Use these security tools:

    • Wordfence Security

    • Sucuri Security Scanner

    • MalCare

  • Enable firewall protection

  • Get alerts for suspicious activity

Important: Set up automatic daily scans and review results weekly.

Extra Security Tips

  • Always keep Woomen theme and plugins updated

  • Use strong admin passwords

  • Limit login attempts with a plugin like Limit Login Attempts Reloaded

  • Disable XML-RPC unless needed

  • Use 2FA (Two-Factor Authentication) for admin accounts

Troubleshooting

Articles

Fixing Elementor Conflicts

Common WooCommerce Errors

Common WooCommerce Errors and How to Fix Them

WooCommerce is one of the most popular eCommerce solutions for WordPress, powering millions of online stores worldwide. While it offers flexibility and ease of use, users often encounter errors that can disrupt the shopping experience and impact sales. In this article, we’ll explore the most common WooCommerce errors, why they occur, and practical steps to fix them.


1. “There Are No Shipping Methods Available”

Cause:
This error appears when WooCommerce cannot find any shipping method for the entered address. Common reasons include:

  • Shipping zones not configured.

  • No shipping methods added for the selected zone.

  • Customer’s address falls outside your defined zones.

Solution:

  • Navigate to WooCommerce → Settings → Shipping → Shipping Zones.

  • Add a shipping zone and methods (Flat Rate, Free Shipping, etc.).

  • Double-check the customer’s location matches your defined zones.

2. Payment Gateway Not Working

Cause:
Payment gateways like PayPal, Stripe, or custom gateways can fail due to:

  • Incorrect API keys.

  • Plugin conflicts.

  • SSL issues or insecure checkout pages.

Solution:

  • Verify API credentials under WooCommerce → Settings → Payments.

  • Enable Force Secure Checkout and ensure your SSL certificate is active.

  • Test payment in sandbox mode before going live.

3. “Your Cart is Currently Empty”

Cause:
Customers see this message after adding products to the cart, often due to:

  • Theme conflicts.

  • Caching or session issues.

  • Misconfigured cart and checkout pages.

Solution:

  • Make sure the Cart and Checkout pages are set under WooCommerce → Settings → Advanced.

  • Disable caching on cart, checkout, and account pages.

  • Test with a default theme like Twenty Twenty-One to rule out theme conflicts.

4. Product Images Not Displaying Correctly

Cause:
Product images may appear blurry, stretched, or not show at all because of:

  • Incorrect image sizes.

  • Theme compatibility issues.

  • Regeneration of thumbnails not done after theme switch.

Solution:

  • Set correct image sizes in WooCommerce → Settings → Products → Display.

  • Use the Regenerate Thumbnails plugin after changing themes.

  • Ensure your theme supports WooCommerce image settings.

5. “Too Many Redirects” Error

Cause:
Occurs when your SSL or URL settings conflict, often after enabling HTTPS or migrating to a new domain.

Solution:

  • Go to Settings → General and verify both WordPress Address (URL) and Site Address (URL) match.

  • Ensure you’re using the same protocol (HTTPS).

  • Clear browser and site cache after updating settings.

6. Checkout Page Not Working

Cause:
Checkout page issues often stem from:

  • Plugin conflicts.

  • JavaScript errors.

  • Missing shortcodes on the checkout page.

Solution:

  • Make sure the checkout page contains the [woocommerce_checkout] shortcode.

  • Disable plugins one by one to identify conflicts.

  • Enable debug mode to check for PHP or JavaScript errors.

7. Outdated WooCommerce or Theme

Cause:
Running outdated versions of WooCommerce, WordPress, or your theme can lead to incompatibility issues.

Solution:

  • Always keep WooCommerce, WordPress, and themes updated.

  • Test updates in a staging environment before applying to your live site.

Final Tips to Avoid WooCommerce Errors

  • Use quality hosting optimized for WooCommerce.

  • Regularly update plugins and themes.

  • Take regular backups before making major changes.

  • Install a caching plugin with WooCommerce compatibility.

  • Use a staging site to test changes before going live.

Restoring from Backups

Case Studies and Best Practices

Articles

Case Study: Boosting Conversions with Custom Product Cards

Introduction

In today’s digital marketplace, first impressions matter. Product pages and listings are often the deciding factor for customers considering a purchase. Generic layouts and cluttered designs can overwhelm users and lead to lost sales. This case study explores how implementing custom product cards helped a client enhance user experience, communicate value effectively, and ultimately boost conversions.


Background

Our client, an eCommerce store specializing in lifestyle products, was struggling with stagnant conversion rates despite having strong traffic. The problem was clear: their product pages looked too generic. The standard templates failed to highlight the product’s unique selling points, and customers were not engaging deeply enough to move further down the sales funnel.


The Challenge

  • Low Conversion Rate: Despite steady web traffic, the purchase completion rate was below industry benchmarks.

  • Generic Design: The default product cards lacked personality and failed to grab attention.

  • Poor Highlighting of Features: Essential details like discounts, product benefits, and reviews were buried in text.

The Solution: Custom Product Cards

We introduced custom-designed product cards tailored to the brand’s identity and target audience. The cards were designed with a focus on:

  1. Visual Appeal

    • High-quality product images with consistent sizing.

    • Bold typography for product names.

    • On-card highlights for discounts, free shipping, and bestsellers.

  2. Clear Value Proposition

    • Short, benefit-driven descriptions.

    • Quick-glance feature icons (e.g., eco-friendly, fast shipping, limited stock).

  3. Conversion-Focused Elements

    • Prominent “Add to Cart” or “Buy Now” buttons.

    • Integrated customer ratings and reviews.

    • Limited-time offers with countdown timers.

  4. Mobile Optimization

    • Responsive layouts ensuring cards looked engaging on smaller screens.

Results

After implementing the custom product cards, the client experienced measurable improvements within three months:

  • 35% Increase in Conversions: More visitors completed purchases.

  • 22% Higher Engagement: Users spent more time exploring products.

  • 15% Decrease in Bounce Rate: Visitors were more likely to stay on the website.

Key Takeaways

  • Design Drives Decisions: A product’s presentation can be just as influential as its price or features.

  • Highlight What Matters: Customers should see the most compelling reasons to buy without scrolling or clicking.

  • Consistency Builds Trust: Cohesive and professional card designs reassure customers of brand credibility.

Best Practices for Mobile-First Design

Seasonal Marketing Strategies Using Customizable Templates

Developer Resources

Articles

RestAPi Basics

Creating Child Theme

Customizing your WordPress site is exciting, especially when using a stylish theme like Woomen. But there’s a catch: if you make changes directly to the theme files, they will be lost whenever the theme is updated.

That’s where a child theme comes in. It’s the safest way to customize your WordPress site without risking your changes during updates. In this tutorial, we’ll show you how to create a child theme for Woomen — step by step — with visuals.

What Is a Child Theme?

A child theme is a WordPress theme that inherits the design, layout, and functionality of a parent theme. It allows you to:

  • Modify styles and layouts

  • Add or override functions

  • Keep custom changes even after theme updates

If you’re planning to customize the Woomen theme, using a child theme is highly recommended.

Why Use a Child Theme?

  • Your changes stay safe during theme updates

  • Cleaner code and better organization

  • Easier to maintain and debug

  • No risk to the original Woomen theme files

Step-by-Step Guide: Create a Child Theme for Woomen

Step 1: Create a Child Theme Folder

First, go to your site’s theme directory:

/wp-content/themes/

Inside this directory, create a new folder named:

woomen-child

Step 2: Create the style.css File

In the woomen-child folder, create a file named style.css, and paste the following code:

/*
Theme Name: Woomen Child
Template: woomen
Author: Your Name
Description: Child theme for Woomen
Version: 1.0.0
*/

The Template value must match the folder name of the Woomen parent theme (case-sensitive).

Step 3: Create the functions.php File

In the same folder, create a file named functions.php and add the following PHP code:

<?php
function woomen_child_enqueue_styles() {
    wp_enqueue_style( 'woomen-parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'woomen-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('woomen-parent-style'),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'woomen_child_enqueue_styles' );
?>

This ensures that both the parent and child stylesheets are properly loaded.

Step 4: Activate Your Child Theme

Once all files are in place:

  1. Log in to your WordPress dashboard

  2. Go to Appearance > Themes

  3. You’ll see “Woomen Child” listed

  4. Click Activate

You’re All Set!

You now have a working child theme for Woomen. You can:

  • Add custom CSS in style.css

  • Override any template by copying it from the parent theme into the child theme folder and editing it

  • Add new functions in functions.php

All without touching the original Woomen files.

Best Practices

  • Use a child theme for any custom code or layout tweaks

  • Always back up your site before major changes

  • Test new code in a staging environment first

Value Pack Addon

Articles

Features of Value Pack Addon

Do Action

Enables interactive features on your website, allowing users to trigger specific events or behaviors through actions like clicks or form submissions.

How to use:

Go to Elementor Page Editor >> Locate the Value Pack Addons Widgets >> Select the “Do Action” widget >> Drag and drop it onto the page >> Define your desired action

 

Instagram Feeds

Showcases a real-time feed of your Instagram posts directly on your website, allowing visitors to view your latest social media content.

How to use:

Open the Elementor Page Editor -> Locate the Value Pack Addons Widgets -> Select the “Instagram Feeds” widget -> Drag and drop it onto the page -> Enter your access token.

 

 

Login

Provides a customizable login system, enabling users to sign in or register directly on your website.

How to use:

Open the Elementor Page Editor -> Navigate to Value Pack Addons Widgets -> Select the “Login” widget -> Drag and drop it onto the page -> Choose your preferred form style.

 

Products Comparison

Allows users to compare multiple products side-by-side based on features and specifications to make better purchasing decisions.
Open the Elementor Page Editor -> Go to Value Pack Addons Widgets -> Choose the “Products Comparison” widget -> Drag and drop it -> Add images for comparison.

Product Search

Offers an advanced product search tool, helping users quickly find items by entering relevant keywords.
Open the Elementor Page Editor -> Find the Value Pack Addons Widgets -> Select the “Product Search” widget -> Drag and drop it -> Choose a search style.

Mini Cart

Shows a floating mini cart panel where users can view and manage selected items without navigating away from the current page.
Open the Elementor Page Editor -> Locate the Value Pack Addons Widgets -> Pick the “Mini Cart” widget -> Drag and drop it -> Select your preferred cart style.

Product Gallery

Showcases multiple images of a product in an organized gallery format, allowing users to explore the item from different angles. Enhances visual engagement and improves purchase confidence.

Product Variations

Enables selection of different variations like size, color, or material for a product. Offers customers a customizable shopping experience tailored to their preferences.

Slider

Adds a dynamic carousel to display products, banners, or images. Enhances visual appeal and allows showcasing multiple items in limited space.

Product Description

Displays detailed information about the product including its features, usage, and benefits. Helps users understand what they are buying.

Count Down

Shows a live countdown timer for deals or limited-time offers. Creates urgency and boosts conversions by encouraging quicker purchase decisions.

Product Price

Highlights the product price clearly with styling options. Can include sale prices and discounts to attract buyers.

Product Rating

Displays customer ratings using stars or numeric values. Helps new customers gauge product quality and reliability.

Save Product

Allows users to save or favorite products for future reference. Enhances user engagement and simplifies repeat purchases.

Product Social Share

Adds social media sharing buttons to product pages. Lets users easily share products with their networks, increasing visibility.

Sticky Add to Cart

Keeps the “Add to Cart” button visible while users scroll through the product page. Increases the chance of conversion by improving accessibility.

Collective Products

Bundles related or frequently bought-together products. Encourages upselling and helps users discover complementary items.

Related Products

Automatically displays products similar to the current one. Enhances user experience and boosts cross-selling opportunities.

Reviews

Displays customer feedback and ratings. Builds trust and helps potential buyers make informed decisions.

Extra Information

Shows additional product data like brand, SKU, or custom fields. Useful for tech specs or compliance information.

Sticky Section

Keeps a particular section (e.g., product summary or pricing) fixed on the screen during scrolling. Improves usability and access to key info.

Tooltip

Provides brief pop-up explanations or tips when users hover over an icon or text. Enhances UX by offering guidance without cluttering the interface.

Popup

Displays modal windows with offers, product info, or forms. Can be used for promotions, lead capture, or alerts.

Animated Border

Adds stylish animated borders around widgets or buttons. Makes elements more eye-catching and improves design aesthetics.

FAQs

Supposed to be commonly asked issues, questions & troubleshoot tricks are in this section.

Articles

About Theme

  1. Q: What is the Woomen Theme?
    A: Woomen is a modern, elegant, and highly customizable WooCommerce theme built specifically for selling products online. Whether you’re running a fashion boutique, footwear store, beauty brand, accessories shop, or home goods store, Woomen delivers the perfect balance of aesthetics and functionality to help you launch a professional and conversion-focused eCommerce website.
  2. Q: Is Woomen compatible with the latest WordPress version?
    A: Yes, Woomen is fully compatible with the latest version of WordPress.
  3. Q: Does Woomen support WooCommerce?
    A: Absolutely! Woomen is fully integrated with WooCommerce, making it perfect for setting up online stores.
  4. Q: Can I use Woomen for a blog?
    A: Yes, it comes with beautiful blog layouts and post formats for lifestyle, beauty, fashion, and personal content.
  5. Q: Is Woomen mobile responsive?
    A: Yes, it is 100% responsive and works flawlessly on all devices, including smartphones and tablets.

Installation & Setup

  1. Q: How do I install the Woomen theme?
    A: After purchasing, download the theme ZIP file, then go to Appearance > Themes > Add New and upload the file.
  2. Q: Does Woomen come with demo content?
    A: Yes, it includes one-click demo import which can be done with NextWp-Sites plugin (Pre Packaged).
  3. Q: What plugins are required for full functionality?
    A: Plugins like Woo Commerce, Elementor, Woomen- Addon, Woo Merchant, Valuepak Addon, NextWp- Sites, Framework, CubeWP Forms and CubeWP Addon Woo commerce are recommended (and are bundled).
  4. Q: Is the theme easy to set up for beginners?
    A: Yes, Woomen is beginner-friendly with detailed documentation and one-click setup.
  5. Q: How can I import demo content?
    A: Use the “NextWP-Sites” plugin (Pre Packaged) provided with the theme to import content in a single click.

Advanced Features & Functionality

  1. Q: Does Woomen support Mega Menu?
    A: Yes, Woomen includes support for Mega Menus.
  2. Q: Can I use video backgrounds or sliders?
    A: Yes, Woomen supports video backgrounds and slider.
  3. Q: Is there a popup or newsletter subscription feature?
    A: Yes, Woomen can be integrated with tools and Popup Maker for email subscriptions and marketing popups.
  4. Q: Does Woomen support custom post types?
    A: Yes, Woomen is compatible with custom post types and allows you to create different content types beyond just posts and pages.
  5. Q: Can I translate the theme into other languages?
    A: Yes, Woomen is translation-ready and can be translated into any Language.

Customization & Design

  1. Q: Can I customize colors and fonts?
    A: Yes, Woomen offers an advanced theme customizer where you can easily change fonts, colors, and more without coding.
  2. Q: Does Woomen support Elementor or any page builder?
    A: Yes, Woomen is fully compatible with Elementor, allowing drag-and-drop editing.
  3. Q: Can I upload my own logo?
    A: Definitely. You can upload your custom logo from the WordPress Customizer.
  4. Q: Are there pre-built demos available?
    A: Yes, Woomen comes with multiple ready-to-import demo layouts.
  5. Q: Is RTL support available?
    A: Yes, Woomen supports Right-to-Left (RTL) languages like Arabic and Urdu.

E-commerce Features

  1. Q: Can I sell products using this theme?
    A: Yes, Woomen is optimized for WooCommerce and supports all major eCommerce features.
  2. Q: Are product filters and quick view available?
    A: Yes, product filtering and quick view features are integrated.
  3. Q: Can I enable wishlist and compare options?
    A: Yes, these features are available using Value Pack Adon (Pre Packaged).
  4. Q: Does it support variable products?
    A: Yes, you can easily create and manage variable products with multiple attributes.
  5. Q: Can I use different payment gateways?
    A: Yes, Woomen supports all WooCommerce-compatible payment gateways.

Performance & SEO

  1. Q: Is Woomen theme SEO optimized?
    A: Yes, it follows best SEO practices and works well with SEO plugins like Yoast and Rank Math.
  2. Q: Does it load fast?
    A: Yes, Woomen is lightweight and optimized for fast loading times.
  3. Q: Is it optimized for Core Web Vitals?
    A: Yes, it has been built with performance in mind and passes major Core Web Vitals.
  4. Q: Can I use caching and CDN plugins with it?
    A: Yes, Woomen is compatible with all popular caching and CDN plugins.
  5. Q: Does it include image lazy loading?
    A: Yes, lazy loading is enabled for better performance.

Security & Compatibility

  1. Q: Is Woomen theme secure?
    A: Yes, the theme follows WordPress coding standards and will regularly updated to patch vulnerabilities.
  2. Q: Does Woomen work with third-party plugins?
    A: Yes, Woomen is compatible with most well-coded third-party plugins used in the WordPress ecosystem.
  3. Q: Can I use Google Fonts with Woomen?
    A: Yes, Woomen includes access to hundreds of Google Fonts through the Customizer.
  4. Q: Does the theme include schema markup?
    A: Yes, Woomen includes basic schema markup and works well with structured data plugins for enhanced SEO.
  5. Q: Is there a child theme included?
    A: Yes, Woomen includes a ready-to-use child theme to ensure safe customizations.

Support & Updates

  1. Q: Is support included with the theme?
    A: Yes, 6 months of free support is included with your purchase (extendable to 12 months).
  2. Q: How often is Woomen updated?
    A: The theme will be regularly maintained and updated for security and compatibility.
  3. Q: Will I lose my changes when updating?
    A: No, if you use a child theme for customizations, your changes will be safe.
  4. Q: Where can I find documentation?
    A: Full documentation is provided with the theme and available online via the support portal.
  5. Q: Can I request new features?
    A: Yes, feature requests are welcome via the support system or contact form.

Overview of Product By Type element

Articles

How to show related products (By Types) on detail page?

Related Products (You May Also Like)

The Related Products section is designed to enhance user engagement and increase sales opportunities by displaying additional product suggestions on the product detail page. These suggestions can include items the user recently viewed, complementary products, or alternative higher-end options.


Types of Related Products:

  • Recently Viewed Products – Displays products the user has previously viewed during their session.

  • Upsell Products – Promotes higher-end alternatives to the current product.

  • Cross-Sell Products – Shows complementary items often bought together with the current product.

How to Add:

  1. Edit the Product Detail Page using Elementor.

  2. From the Valuepack Addon Widgets section, drag and drop the “Products by Type” widget:

    • Recently Viewed Products

    • Upsell Products

    • Cross-Sell Products

  3. Place the widget in your desired location within the product page layout.

  4. Customize the number of products displayed, layout style, and design settings via the widget’s sidebar options.

Changes Log