Rosun v1.0.2
Live Preview Documentation

Build your online store with Rosun

Create a grocery market, food delivery, meal-ordering or organic food shop. Follow this guide to install Rosun, set up WooCommerce, import a demo and customize your site.

Start Setup Ask for Help
  • Grocery, Food Delivery & Organic Shop Theme
  • Version 1.0.2
  • WordPress · WooCommerce · Elementor · Rosun Core
Rosun theme preview
  1. 1 InstallUpload rosun.zip
  2. 2 Add pluginsActivate the essentials
  3. 3 Import a demoPick a ready-made site
  4. 4 Make it yoursLogo, colors and menus

Overview

Version v1.0.2
Platform WordPress + WooCommerce
Author Togra Studio
Documentation Open guide

Theme: Rosun - Grocery Store & Food Delivery WooCommerce Elementor Theme

Introduction

Rosun is a WordPress theme for grocery stores, food shops, meal ordering and delivery. It combines WooCommerce with Elementor page building, ready-made home layouts, product-focused widgets, and theme options for headers, footers, popups and store presentation. This guide explains how to set it up, import a starter demo and manage your store.

Stuck somewhere?

For help with Rosun, consult the Rosun documentation or visit the Togra Studio website.

Choose where to begin

Jump to the part you need, or open search with Ctrl K (⌘ K on Mac) and type what you are looking for.

Setup & Install

Check the requirements, install Rosun and activate its recommended plugins.

Start installing

Demo Import

Choose one of the included Rosun layouts and import its starter content.

Import a demo

Site Design

Logo, colors, fonts, menus, header, footer, breadcrumb and the offcanvas panel.

Design your site

Products & Store

Use WooCommerce to manage products, categories, prices, stock, cart and checkout.

Set up your store

Elementor Widgets

Build pages with Rosun Core Elementor widgets for products, categories and site content.

Explore widgets

Help & Fixes

Translating the theme, fixes for common errors, the changelog and how to reach us.

Find a fix

Requirements

Use a current, supported WordPress release and keep WordPress, Rosun and its plugins updated. Rosun requires PHP 7.4 or newer; PHP 8.1 or newer is recommended. WooCommerce and Elementor are needed for the store and page-building features.

Requirement Minimum Recommended
WordPress 6.0+ Latest stable
PHP 7.4+ 8.1+
MySQL 5.6 / MariaDB 10.0 Latest stable
Memory Limit 256 MB 256 MB or more

Recommended PHP configuration limits

php.ini 
    
        max_execution_time = 180
        memory_limit = 256M
        post_max_size = 64M
        upload_max_filesize = 32M
        max_input_time = 60
        max_input_vars = 3000
Server environment details

For detailed server requirements, visit: https://make.wordpress.org/hosting/handbook/handbook/server-environment

What's Included

Download the product files from the marketplace account where you purchased Rosun. The Installable WordPress file only download is the theme ZIP; it does not contain the separate documentation site or the full-download sample data. Extract the complete product download when you need the manual-import files.

File / Folder Description
rosun.zip The installable WordPress Theme zip file. This is the file you need to upload to WordPress.
sample-data/content.xml, sample-data/widget.json, and sample-data/customizer.dat Bundled WordPress content, widget, and Customizer export files for manual import when the predefined demo import cannot retrieve its files.
Rosun Core Install the companion plugin from Appearance → Install Plugins. It is separate from the installable theme ZIP.
Online documentation Read this guide at wptheme.moontelict.com/rosun/docs/. It is not located inside the installable theme ZIP.
licensing.txt Third-party asset notices and license references included with the Rosun theme.

Installation

Install WordPress, upload the Rosun theme, activate its required plugins and optionally import a starter demo.

WordPress Installation

Please follow the instructions in the videos below to see how you can install WordPress on your hosting:

For localhost: https://www.youtube.com/watch?v=snFzbPm_RUE
For cPanel: https://www.youtube.com/watch?v=t-YBqV2ReR0

Installing the Theme

Important!

If you download the full product archive and try to upload it directly to WordPress, you may receive the error: "Theme is missing the style.css stylesheet." Extract the archive first, then upload only the installable rosun.zip theme file.

When you are ready to install the theme, you must first upload the theme files and then activate the theme. The theme files can be uploaded in two ways:

1. Using Theme Uploader

Follow the steps below:

Go to Appearance → Themes → Add New → Upload Theme

From the WordPress dashboard navigate to Appearance → Themes → Add New → Upload Theme.

Appearance → Themes → Add New
Appearance → Themes → Add New

Choose File and Install

Click on "Choose File" and select rosun.zip, then click "Install Now".

Upload rosun.zip
Click on Choose File, select rosun.zip and click Install Now

Activate the Theme

After the upload completes, click "Activate" to activate the Rosun theme.

Activate Theme
Click Activate on the Rosun theme
Note

All plugins must be installed and activated if you want your site to look exactly like the demo.

2. Using FTP Clients

Follow these steps to upload the theme using an FTP client (e.g. FileZilla):

  1. Use an FTP client such as FileZilla and connect to your WordPress installation directory.
  2. Navigate to the /wp-content/themes/ folder and upload the unzipped rosun theme folder there.
  3. Log in to your WP Admin Dashboard and open the Appearance → Themes menu.
  4. You will now see the Rosun theme listed among the other themes. Click "Activate" and you're done!

3. Updating Theme

Occasionally we provide updates which include new features and bug fixes. Updating a WordPress theme is standard WordPress functionality.

Before Updating

Before updating, please make sure to keep a backup of your installed theme and plugins (e.g. Rosun Core) to be on the safe side. You can use your hosting backup tool or a trusted backup plugin before continuing.

There are a few ways to update the WordPress theme:

  1. Download the latest installable Rosun theme archive from your purchase account.
  2. Use your marketplace's supported update method, or upload the new theme version through WordPress Appearance → Themes.
  3. Update Rosun Core and the bundled/recommended plugins when prompted.
After Updating Theme

After updating the theme, please also update all plugins that come with the theme.

4. Installing Required Plugins

Click Begin installing plugins

Import Demo Data
Click Begin installing plugins — you will be taken to the Install Required Plugins page.

Select Install, then hit Apply

Import Demo Data
Simply check all of them (or all of required plugins and some recommended plugins you like) and from the drop down select Install, then hit Apply.

Select Activate plugins Then hit Apply

Confirm Import
Simply check all of them (or all of required plugins and some recommended plugins you like) and from the drop down select Activate, then hit Apply.

Import a Demo

Rosun includes two starter layouts. Importing adds demo content and applies demo settings so you have a working starting point.

Importing Demo Contents

Install and activate One Click Demo Import, Rosun Core, Elementor and WooCommerce first. Then open the demo importer and choose Home or Home 2.

Both predefined demos use the same content export, which includes the Home 1, Home 2 and Blog pages. The selected demo assigns its own homepage and menu. Import one demo per site. The predefined importer also requests the widget and Customizer exports and then attempts to import Elementor site settings from the demo server. Your WordPress host must allow outbound requests for this automatic workflow.

Method When to Use
One-click import
Recommended		 Imports the selected starter content, widgets and theme settings, then assigns the matching home page and blog page. Use a fresh WordPress install or staging site for the closest demo match.
Manual import
Fallback		 Use the bundled XML, JSON and DAT exports from the complete product download if the predefined importer cannot retrieve its files. The XML references media on the Rosun demo site, so media downloads still require access to that site.
Note

Before you start: take a complete database and files backup. Demo import is not a reset, but it can add pages, products, media and templates, and replace selected theme, widget, menu and Elementor settings. Do not run it on a live store unless you have tested on staging and have a restorable backup. Existing orders and customer data should be backed up and checked separately.

Import Theme Demos

Confirm Import
Open Appearance → Import Demo Data, choose Home or Home 2, then click Import.

Continue to import

Confirm Import
Review the selected demo and confirm the import when you are ready.

Importing Content

Confirm Import
Please sit tight while we import your content. Do not refresh the page or hit the back button.

Import Complete

Confirm Import
When the importer reports completion, visit the site and check the home page, shop, header, footer and popup. Then replace demo text, images and products with your own content.

Manual import from the bundled files

If the predefined importer cannot retrieve its files, extract the complete product download and locate sample-data/content.xml, sample-data/widget.json, and sample-data/customizer.dat. Make a backup and use a fresh WordPress install or staging site before importing.

  1. Open Appearance → Import Demo Data and select Switch to Manual Import.
  2. Use the Import Content card to select content.xml, the Import Widgets card to select widget.json, and the Import Customizer card to select customizer.dat. Complete each import and wait for its result before moving to the next.
  3. After content import, open Settings → Reading. Choose Home 1 or Home 2 as the static homepage and Blog as the posts page.
  4. Open Appearance → Menus and assign the imported main menu to the theme's Main Menu location. Check WooCommerce page assignments and save Settings → Permalinks once.

The manual importer does not run every predefined-demo setup step. The content export's image attachments are downloaded from the Rosun demo server, so the bundled XML does not make those media files available offline. Elementor's global site settings are also fetched separately during the predefined import; configure Elementor's global colors and typography manually if that request is unavailable.

Safe troubleshooting

Take a backup, try the import on a clean staging site, and review the importer log for the failing step. If the bundled manual import also reports errors, send the log and your WordPress, PHP, WooCommerce and Elementor versions to theme support.

Review the import screen

Switch to manual
Use the importer screen to select a demo and review the confirmation before starting.

Wait for the import to finish

Manual import
Wait for the import task to finish; do not close or refresh the page.

Marketplace License and Updates

Use the marketplace account where you purchased Rosun to access your product license, downloads and updates. Rosun does not request an Envato purchase code in the WordPress dashboard. For account or license questions, follow that marketplace's instructions or contact theme support.

Customization

Set up your Rosun site identity, menus, headers, footers, store, blog and visual options using the controls included with the theme and Rosun Core.

Basic Site Settings

Change Site Title and Favicon

To change your Site Title and Favicon, navigate to Dashboard → Appearance → Customize → Site Identity.

Favicon

Change Global Colors

To change all global colors, navigate to Dashboard → Theme Options → Theme Colors.

Global Colors

Change Typography

To change the typography of your site, navigate to Dashboard → Theme Options → Typography.

Typography

Customize Menu

To create or edit a navigation menu, open Dashboard → Appearance → Menus. Add pages, product categories or custom links, then assign the menu to a theme location.

Menu

Organize menu items

Drag menu items to change their order or create nested links, then save the menu. Check the storefront on desktop and mobile to confirm the navigation works as expected.

Menu

Set Home and Blog Page

To set the home and blog page, navigate to Dashboard → Settings → Reading.

Home Blog Page

Header Default Setting

To Customize Default header, navigate to Dashboard → Theme Options → Header and Customize logo and width".

Header Default

Header Default Layout

To use the default header, navigate to Dashboard → Theme Options → Header then Switch OFF "Header From Elementor? ".

Header Default

Header Elementor Layout

To use the Elementor header, navigate to Dashboard → Theme Options → Header then Switch ON "Header From Elementor? ". And Select Elementor Header

Header Default

Header Elementor Create

To create an Elementor header, navigate to Dashboard → Rosun Settings → Header → Add New.

Create a new Header

Create Header
  • Insert a Header Title
  • Select Page Template as Elementor Canvas
  • Click Publish
Publish Header

Edit with Elementor

Click "Edit With Elementor" and build the header layout.

Edit with Elementor
Header in Elementor

Header Style Options

To edit a specific page's header, identify the Elementor header used by that page:

Header Style

To use the Elementor Footer, navigate to Dashboard → Theme Options → Footer Then Switch Off "Footer From Elementor? "

Footer Default

To use the Elementor Footer, navigate to Dashboard → Theme Options → Footer Then Switch On "Footer From Elementor? ". And Select Elementor Footer

Footer Elementor

To create an Elementor footer, navigate to Dashboard → Rosun Settings → Footer → Add New.

Create a new Footer post

Create Footer
  • Insert a Footer Title
  • Select Page Template as Elementor Canvas
  • Click Publish
Publish Footer

Edit with Elementor

Edit Footer
Footer in Elementor

To edit a specific page's footer, identify the Elementor Footer used by that page:

Footer Style

Navigation Menus

Create and assign a menu

Open Dashboard → Appearance → Menus to create or edit a navigation menu. Add pages, product categories or custom links, then assign it to the appropriate theme menu location.

WordPress navigation menu
  • Use the screen options to enable product categories or other menu item types if needed.
  • Drag menu items to arrange their order and nesting.
  • Save the menu, then preview the site on desktop and mobile.
Menu item organization

To edit a menu later, return to Appearance → Menus, select it from the menu selector and save your changes.

Edit a navigation menu

Assign menu locations in the Menu Settings area. Available locations depend on the active theme layout.

Menu settings

To change Breadcrumb settings, navigate to Dashboard → Theme Options → Breadcrumb.

Breadcrumb settings

Features available in this section:

  1. Open Theme Options from the dashboard menu
  2. Select Breadcrumb
  3. Global Breadcrumb Switcher
  4. Breadcrumb Elementor Switcher
  5. Breadcrumb Elementor Template

Offcanvas Settings

Create Offcanvas with Elementor

To create an Offcanvas, navigate to Dashboard → Rosun Settings → Offcanvas → Add New Offcanvas.

Create Offcanvas Post

Create Offcanvas
  • Insert Offcanvas Title
  • Select Page Template as Elementor Canvas
  • Click Publish
Offcanvas published

Build with Elementor

Edit Offcanvas

Select the Offcanvas in Header

Edit Offcanvas

Site Design Options

Every Theme Options setting for the parts of the site covered above.

How the panel works

Open Dashboard → Theme Options, pick a section on the left, change what you need and click Save Changes. Some settings only appear after the setting they depend on is turned on. Options may vary depending on the active theme and installed plugins.

Theme Settings

To configure Theme Settings, navigate to Dashboard → Theme Options → Theme Settings.

Theme Controls.

Features available:

  1. Header Sticky Switcher — Header Sticky On/OffDefault: Off
  2. Smooth Scroll Switcher — Smooth Scroll On/OffDefault: Off
  3. Magic Cursor Switcher — Magic Cursor On/OffDefault: Off
  4. Small Pointer Color — Select Color For Small PointerDefault: #000000 · Appears when Magic Cursor Switcher is on
  5. Big Pointer Color — Select Color For Big PointerDefault: #ffffff · Appears when Magic Cursor Switcher is on
  6. Text Color — Select Color For Cursor TextDefault: #000000 · Appears when Magic Cursor Switcher is on
Theme Settings

Logo

To configure Logo, navigate to Dashboard → Theme Options → Logo.

Features available:

  1. Header Logo
  2. Logo Width — Include a CSS unit, e.g. 150px.Default: 150px
  3. Header White Logo
  4. White Logo Width — Include a CSS unit, e.g. 150px.Default: 150px
Header Logo

Header

To configure Header, navigate to Dashboard → Theme Options → Header.

Features available:

  1. Use Elementor Header — Render a global Elementor header template instead of the default header.Default: Off
  2. Header TemplateSelect an Elementor header template · Appears when Use Elementor Header is on
  3. Show Header SearchDefault: Off
  4. Header Search PlaceholderDefault: What are you looking for? · Appears when Show Header Search is on
  5. Search Form LogoAppears when Show Header Search is on
  6. Show Header ButtonDefault: Off
  7. Header Button TextDefault: Get Started · Appears when Show Header Button is on
  8. Header Button URLDefault: # · Appears when Show Header Button is on
Header Logo
Header Logo

Offcanvas

To configure Offcanvas, navigate to Dashboard → Theme Options → Offcanvas.

Features available:

  1. Offcanvas Logo — Falls back to the header logo when empty.
  2. Offcanvas Logo WidthDefault: 135px
  3. Show Intro Text — A short paragraph under the offcanvas logo.Default: Off
  4. Intro TextAppears when Show Intro Text is on
Offcanvas

Breadcrumb

To configure Breadcrumb, navigate to Dashboard → Theme Options → Breadcrumb.

Features available:

  1. Show BreadcrumbDefault: On
  2. Blog Breadcrumb TitleDefault: Blog
  3. Use Elementor BreadcrumbDefault: Off
  4. Breadcrumb TemplateSelect an Elementor breadcrumb template · Appears when Use Elementor Breadcrumb is on
  5. Padding
  6. Background ColorDefault: Theme default
Breadcrumb

To configure Footer, navigate to Dashboard → Theme Options → Footer.

Features available:

  1. Use Elementor FooterDefault: Off
  2. Footer TemplateSelect an Elementor footer template · Appears when Use Elementor Footer is on
  3. Copyright TextDefault: © Your Store | All Rights Reserved
Footer

Typography

To configure Typography, navigate to Dashboard → Theme Options → Typography.

Set fonts for the body, headings, menu and buttons. Supports Google Fonts and custom uploaded fonts (WOFF, WOFF2, TTF, OTF).

Features available:

  1. Body TypographyDefault: DM Sans (Google Fonts)
  2. Heading H1Default: Theme default
  3. Heading H2Default: Theme default
  4. Heading H3Default: Theme default
  5. Heading H4Default: Theme default
  6. Heading H5Default: Theme default
  7. Heading H6Default: Theme default
  8. Menu TypographyDefault: Theme default
  9. Button TypographyDefault: Theme default
Breadcrumb

Theme Colors

To configure Theme Colors, navigate to Dashboard → Theme Options → Theme Colors.

Features available:

  1. Theme Color 1 — Overrides the theme primary accent (--oit-clr-green). Leave empty to keep the default.Default: Theme default
  2. Theme Color 2 — Overrides the theme secondary accent (--oit-clr-yellow).Default: Theme default
  3. Theme Color 3 — Overrides the theme secondary accent (--oit-clr-teal-2).Default: Theme default
  4. Theme Color 4 — Overrides the theme secondary accent (--oit-clr-blue).Default: Theme default
  5. Theme Color 5 — Overrides the theme secondary accent (--oit-clr-green-dark).Default: Theme default
  6. Theme Color 6 — Overrides the theme secondary accent (--oit-clr-green-soft).Default: Theme default
  7. Theme Color 7 — Overrides the theme secondary accent (--oit-clr-forest-rich).Default: Theme default
  8. Theme Color 8 — Overrides the theme secondary accent (--oit-clr-green-neon).Default: Theme default
  9. Theme Color 9 — Overrides the theme secondary accent (--oit-clr-teal).Default: Theme default
  10. Theme Color 10 — Overrides the theme secondary accent (--oit-clr-deep-teal).Default: Theme default
  11. Theme Color 11 — Overrides the theme secondary accent (--oit-clr-olive).Default: Theme default
  12. Theme Color 12 — Overrides the theme secondary accent (--oit-clr-purple).Default: Theme default
  13. Theme Color 13 — Overrides the theme secondary accent (--oit-clr-dark-navy).Default: Theme default
  14. Theme Color 14 — Overrides the theme secondary accent (--oit-gray-1).Default: Theme default
  15. Theme Color 15 — Overrides the theme secondary accent (--oit-gray-2).Default: Theme default
  16. Theme Color 16 — Overrides the theme secondary accent (--oit-text-body).Default: Theme default
  17. Theme Color 17 — Overrides the theme secondary accent (--oit-clr-white).Default: Theme default
  18. Theme Color 18 — Overrides the theme secondary accent (--oit-clr-black).Default: Theme default
Breadcrumb

Popup

To configure Popup, navigate to Dashboard → Theme Options → Popup.

The newsletter modal that slides in a few seconds after the page loads.

Features available:

  1. Enable PopupDefault: Off
  2. Show OnDefault: Every page · Choices: Every page, Front page only · Appears when Enable Popup is on
  3. Delay (seconds) — How long to wait after the page loads before the popup appears.Default: 2.5 · Appears when Enable Popup is on
  4. SubtitleDefault: SUBSCRIBE FOR UPDATES! · Appears when Enable Popup is on
  5. Title — Plain text — no HTML needed. Use the field below to colour part of it.Default: Subscribe today and enjoy 50% off your first order · Appears when Enable Popup is on
  6. Highlighted Words — Repeat the part of the title that should take the accent colour, e.g. 50% off. Leave empty for a plain title.Default: 50% off · Appears when Enable Popup is on
  7. Side Image — Shown beside the form on large screens. Leave empty for a text-only popup.Appears when Enable Popup is on
  8. Form Shortcode — Paste a Contact Form 7 or Mailchimp shortcode. Leave empty to use the built-in email field, which posts to the URL below.Appears when Enable Popup is on
  9. Built-in Form Action URL — Where the built-in email field submits to — a Mailchimp or Brevo list URL, for example. Only used when no shortcode is set.Appears when Enable Popup is on
  10. Email PlaceholderDefault: Email Address · Appears when Enable Popup is on
  11. Button TextDefault: SUBSCRIBE · Appears when Enable Popup is on
  12. Social Links — Leave empty to hide the row entirely.Default: 3 items · Appears when Enable Popup is on
  13. Show "Don't show this again"Default: On · Appears when Enable Popup is on
  14. Checkbox LabelDefault: Don't show this again · Appears when Show "Don't show this again" is on
  15. Remember For (days) — How long the popup stays hidden after the visitor ticks the box.Default: 30 · Appears when Show "Don't show this again" is on
Popup

Blog Archive

To configure Blog Archive, navigate to Dashboard → Theme Options → Blog Archive.

Features available:

  1. Archive Sidebar PositionDefault: Right Sidebar · Choices: Right Sidebar, Left Sidebar, No Sidebar
  2. Show CategoryDefault: On
  3. Show DateDefault: On
  4. Show Comment CountDefault: On
  5. Show AuthorDefault: On
  6. Show Read More ButtonDefault: On
  7. Read More Button TextDefault: Read More
Blog Archive

Blog Details

To configure Blog Details, navigate to Dashboard → Theme Options → Blog Details.

Features available:

  1. Single Post LayoutDefault: Standard (with Sidebar) · Choices: Standard (with Sidebar), Full Width
  2. Single Sidebar PositionDefault: Right Sidebar · Choices: Right Sidebar, Left Sidebar, No Sidebar
  3. Show TagsDefault: On
  4. Show Social ShareDefault: Off
  5. Show Next / Previous Post — The navigation links to the previous and next post, shown under the article.Default: On
  6. Show Author Box — The author biography box. It only appears when the author has filled in their bio.Default: On
  7. Show Comments — Turning this off hides the comment list and form on every post, whatever each post allows.Default: On
  8. Show Related Posts — A block of posts from the same category, under the article. Off by default, as it always has been.Default: Off
  9. Related Posts Title — Leave empty to show the block without a heading.Default: Related Posts · Appears when Show Related Posts is on
Blog Archive

Theme Options

Back to top, preloader, 404 page and slug settings. For every option in the panel, with defaults and choices, see Theme Options reference below.

Back To Top

To configure Back To Top, navigate to Dashboard → Theme Options → Back To Top.

Features available:

  1. Enable Back To Top ButtonDefault: Off
  2. Button Background ColorDefault: #B3ED97
  3. Arrow ColorDefault: #000000
Back To Top

Preloader

To configure Preloader, navigate to Dashboard → Theme Options → Preloader.

Features available:

  1. Enable PreloaderDefault: Off
  2. Preloader Image — Optional. Shown in place of the default CSS loader.
  3. Preloader Image — Optional. Shown in place of the default CSS loader.
  4. Preloader TitleDefault: Loading Knowledge... Please Wait Wisely!
Preloader

404 Page

To configure 404 Page, navigate to Dashboard → Theme Options → 404 Page.

Features available:

  1. 404 Illustration
  2. 404 HeadingDefault: Oops!
  3. 404 Sub HeadingDefault: Something went Wrong...
  4. 404 DescriptionDefault: Sorry, we couldn't find your page.
  5. Back To Home Button TextDefault: Back To Home
404 Page

Custom CSS

To configure Custom CSS, navigate to Dashboard → Theme Options → Custom CSS.

Add CSS per device. Global applies everywhere; each device tab is wrapped in its breakpoint; Dashboard applies in wp-admin. Do not include <style> tags.

Features available:

  1. Custom CSS
Custom CSS

Custom JavaScript

To configure Custom JavaScript, navigate to Dashboard → Theme Options → Custom JavaScript.

Printed before </body> on every page. Do not include <script> tags.

Features available:

  1. Custom JavaScript
Custom CSS

Import / Export

To configure Import / Export, navigate to Dashboard → Theme Options → Import / Export.

Theme Options are stored as WordPress theme_mods. Export every saved value as a JSON bundle and restore it on this or another site.

Features available:

  1. Backup / Transfer — Only fields defined on this Theme Options screen are exported and restored.
Custom CSS

WooCommerce Store

Add products and organize your grocery, food delivery or organic shop with WooCommerce. Product cards and shop layouts are styled to match Rosun.

Adding Products

  1. From the dashboard, open Products → Add New.
  2. Enter the product name and description, set its price and inventory, choose a product category, and add product images.
  3. For variable products, add attributes and variations before publishing.
  4. Preview the product page and confirm the price, stock, images and shipping information.

WooCommerce manages products, categories, inventory, cart and checkout. Configure payment, tax, shipping and store emails in WooCommerce → Settings before accepting orders. See the WooCommerce documentation for store-specific setup.

Shop pages and product widgets

  1. WooCommerce creates the Shop, Cart, Checkout and My Account pages during setup. Check their assignments in WooCommerce → Settings → Advanced.
  2. Use Products → Categories to organize products. Add a category image if you want it to appear in category widgets.
  3. Build landing pages with Elementor. Search the widget panel for Rosun product, category, sale, featured, recent or tab widgets.
  4. Change product-card and single-product features in Theme Options → Shop.

Use a staging site to test payment and delivery settings. A test order helps confirm the full customer checkout flow before launch.

Rosun Core

Rosun Core adds the theme's Elementor widgets and custom content screens. Use its settings page to manage template and content URL slugs.

Settings Screen Overview

To open the screen, navigate to Dashboard → Rosun Settings. It is available to administrators when the Rosun Core plugin is active.

Features available:

  1. Settings — the URL slugs for the theme's content types and Elementor templates.
  2. Content Types — manage Header, Footer, Offcanvas, Breadcrumb, Popup, Services, Portfolios, Team, Story, Industry, Career and Case Studies.
  3. Theme Options button — opens Dashboard → Theme Options.
  4. Permalinks button — opens Settings → Permalinks.
  5. View Site button — opens your website in a new tab.
Rosun Core settings

General Settings

To change URL slugs, navigate to Dashboard → Rosun Settings → Settings.

A slug is the part of the web address in front of an item's name, for example yoursite.com/tograstudio-services/sample-service/. Under each field the screen shows the full address with the slug you entered.

Content Types:

  1. Services Slug — web address base for Services items.Default: tograstudio-services
  2. Portfolios Slug — web address base for Portfolios items.Default: tograstudio-portfolios
  3. Career Slug — web address base for Career items.Default: tograstudio-career

Template Types:

  1. Header Slug — web address base for Elementor header templates.Default: tograstudio-header
  2. Footer Slug — web address base for Elementor footer templates.Default: tograstudio-footer
  3. Offcanvas Slug — web address base for Elementor offcanvas templates.Default: tograstudio-offcanvas
  4. Breadcrumb Slug — web address base for Elementor breadcrumb templates.Default: tograstudio-breadcrumb
Rosun Core slug settings

Click Save Settings to apply your changes.

Good to know

Leave a field empty to go back to its default slug. Two types cannot share the same slug — if you try, that field keeps its previous value and a message tells you which type already uses it. If an address shows a 404 after a change, open Settings → Permalinks and click Save Changes.

Content Types

Each tab lists the items of one type and lets you add new ones. Templates are designed with Elementor, then chosen in Theme Options or on a single page.

Services

To manage your services, navigate to Dashboard → Rosun Settings → Services.

Features available:

  1. Add New — create a service with its own page.
  2. Item list — search, filter by date, and edit, quick edit, trash or restore items, the same way as the WordPress Pages screen.
  3. Web address — each service lives under the Services slug set in General Settings.
  4. Page settings — each service has the same Breadcrumb and Header & Footer settings as a page.
Services

Portfolios

To manage your portfolio items, navigate to Dashboard → Rosun Settings → Portfolios.

Features available:

  1. Add New — create a portfolio item with its own page.
  2. Item list — search, filter by date, and edit, quick edit, trash or restore items, the same way as the WordPress Pages screen.
  3. Web address — each item lives under the Portfolios slug set in General Settings.
  4. Page settings — each item has the same Breadcrumb and Header & Footer settings as a page.
Services

Career

To manage your career posts, navigate to Dashboard → Rosun Settings → Career.

Features available:

  1. Add New — create a career or job post with its own page.
  2. Item list — search, filter by date, and edit, quick edit, trash or restore items, the same way as the WordPress Pages screen.
  3. Web address — each post lives under the Career slug set in General Settings.
  4. Page settings — each post has the same Breadcrumb and Header & Footer settings as a page.
Services

Team

Open Dashboard → Rosun Settings → Team to add or edit team profiles. Add a title, profile image and the available team details, then publish the entry. Use the matching Rosun Elementor widget to display team content on a page.

Popup templates

Open Dashboard → Rosun Settings → Popup to manage popup template entries. Popup display and newsletter content are configured separately in Dashboard → Theme Options → Popup. After editing, preview the storefront to confirm the popup's content and display behavior.

Rosun Core also provides Industry, Case Studies and Story content screens. Their available fields and frontend layouts depend on the installed theme features and Elementor widgets.

Elementor Page Builder Options

Rosun Core adds Elementor widgets for building grocery and food-shop pages, product listings and theme templates. The available widgets depend on the active plugins.

Elementor Widgets

Elementor includes its own general-purpose widgets. Rosun Core adds theme-specific widgets; search the Elementor panel for Rosun or Rosun Core to find them. WooCommerce widgets and product-related Rosun widgets require WooCommerce to be active.

26 general Rosun widgets: Header Builder 1, Header Builder 2, Footer Style 1, Breadcrumb, Mega Menu Links, Mega Menu Demo, Banner, Slider, About, Heading, Team, Team Details, Brand, Testimonial, Blog Post, Features, Button, Newsletter, Skill List, FAQ, CTA, Fact, Choose, Contact Info, Contact Form, and Image.

5 additional WooCommerce widgets: Product Feature, Category Slider, Product Tab, Product Sale, and Product Recent. These appear when WooCommerce is active.

Widget 1 Widget 1 Widget 1

Elementor Big Icon Issue

If icons appear unusually large or lose their expected styling after an Elementor update, first clear Elementor's generated files and data from Elementor → Tools, then clear any site or host cache. If the issue remains, check the Elementor experiment settings and test Inline Font Icons as a compatibility option.

Elementor Icon Issue Fix

Elementor Template Library Usage

The template library offers an extensive collection of versatile and modern templates designed for a variety of projects. Each template is designed with a focus on flexibility, ensuring compatibility with different industries and purposes.

You can follow the video guidline to template library:

Help & Support

Translation guidance, common troubleshooting steps, release information and support resources for the Rosun WordPress theme.

Translating Theme

You can translate Rosun and its companion plugin into your preferred language. Translate both the theme and plugin strings so the complete storefront and widgets are localized.

  1. Theme: Rosun
  2. Plugin: Rosun Core

There are many tools available for translation. The easiest way is to use the plugin "Loco Translate". Using this plugin, you can translate any WordPress theme or plugin that supports translation.

Step-by-step using Loco Translate

Step 1: Install and activate "Loco Translate"

Install Loco Translate

Step 2: Select the Theme or Plugin to translate

Select the theme or plugin you want to translate from the "Loco Translate" menu.

Step a: Theme Translate

Theme Translate

Step b: Plugin Translate

Plugin Translate
Translate 4

Step 3: Click "New language"

New Language

Step 4: Select language and start translating

Select your preferred language, choose location as "System", then click "Start Translating".

Select Language

Loco Translate — Video Tutorial

Multilingual & Translation with TranslatePress

Here is a step-by-step tutorial for translating pages manually using the plugin "TranslatePress Multilingual":

Step 1: Install and activate TranslatePress

TranslatePress

Step 2: Configure TranslatePress Settings

Go to TranslatePress Settings, select another language and click "Save".

TranslatePress Settings

TranslatePress — Video Tutorial

404 Error in All Pages

If you face 404 errors across all pages (this is common after demo import), the fix is to update your permalink structure.

Quick Fix

Navigate to Settings → Permalink and click the "Save Settings" button. This refreshes your WordPress permalink structure and resolves the 404 issue.

404 Permalink Fix

Changelog

Every release in chronological order — newest first.

v1.0.2
11 November 2026
WPBay submission corrections
  • UPDATED Corrected package, plugin, and manual demo import instructions
  • UPDATED Matched the release version and documented the 26 general and 5 WooCommerce widgets
  • UPDATED Added third-party licensing guidance
v1.0.1
23 October 2026
Maintenance update
  • Restored registered theme image sizes and large-image scaling.
  • Kept existing comments visible when new comments are closed.
  • Added an Elementor header fallback and reconciled demo setup behavior.
v1.0.0
15 August 2026
Initial release
  • Initial release of the Rosun grocery and food delivery theme.

Contact Support

Can't find your answer in this guide? Our support team is available 13 hours a day. Pick the channel that suits you below.

Rosun Live Preview

Explore the Rosun grocery and food shop demo site.

Open live preview

Togra Studio

Visit the theme studio for product information and updates.

Visit Togra Studio

ThemeForest Portfolio

View Rosun and other WordPress themes by Togra Studio.

Visit ThemeForest