Creta - Premium Responsive Woocommerce Theme

Creta is a modern, fully responsive Wordpress Woocommerce Theme created for e-commerce and online shop websites and gives you the ability to lead your business a step further. Creta is user-friendly and easily customizable to fit your needs. Built with latest coding standards and clean design, the theme is envisioned to provide you a long-term and powerful solution for your next online project.

Theme Features

  •   Modern and clean Responsive design
  •   Easy to install and customize
  •   Easy custom home page
  •   Easy Widget Positioning
  •   WooCommerce Integrated
  •   SEO Optimized
  •   Best Seller and Featured products on home page
  •   Related product slider on product details page
  •   Header dropdown shopping cart
  •   Back to top button
  •   Scroller Thumbnail images in product page
  •   Powerful Admin Panel
  •   Valid XHTML and CSS markup
  •   Cross Browser Support (IE 9+, Safari, Mozilla Firefox, Chrome, Opera 9+)
  •   User Guide Documentation html file

Install WordPress

If you have not set up your WordPress installation yet, you can grab a copy of latest WordPress version here. Next, go through the installation instructions inside readme.html file and set up your WordPress installation.

Install Creta Theme

To install Creta Theme, follow the steps given below:

  • a ) Extract your download package main ZIP file.
  • b ) Next, look for the folder named creta.zip, Unzip this folder and upload to WordPress via Admin.
  • c ) OR, you can also upload the creta folder to http://www.yoursite.com/your-wordpress-dir/wp-content/themes/ directory using an FTP software like Filezilla, CuteFTP or others.
  • Important: Do NOT install the downloaded zip directly via WordPress Theme install option.

Activate Theme

Log into your WordPress admin using the following URL: http://www.yoursite.com/your-wordpress-dir/wp-admin

Next, go to Appearance > Themes. Here, you shall see a thumbnail of Brezza theme. Click on ‘Activate’ link to activate the theme.

Activate the theme

After activation, preview this theme by clicking on your blog name (top left corner) > Visit Site.

Important: Since, we haven't configured the theme yet so it may look empty.

On first load, you may see some unwanted widgets inside top-right section of header area. You can remove those widgets by navigating to WordPress Appearance > Widgets. Delete or pull out any unwanted widgets from this section. You can of-course place appropriate widgets in this section later on.

Disable Admin Bar on top

If you wish to disable admin bar on front end. You can do so by navigating to WordPress Users > Your Profile section.

Disable admin bar

Uncheck the toolbar option. Next, scroll down and click on "Update Profile" button to save the changes. The admin bar will hide.

Dummy Data

You can find the dummy / sample data in Dummy Data folder under theme zip you have downloaded. Please find the following files in Dummy Data folder

1. .xml - Woocommerce Sample Data First Upload .xml file via Admin > Tools > Import > Select checkbox for Download and import file attachments > Save

2. .json - Default Redux settings Once theme is installed new menu is generated under left column "Creta Options". Then Go to Creta Options > Import / Export Paste the json code from .json text file & import.

Create Home Page

By default, WordPress shows blog posts on front page unless we change these settings to show a static page. In our case, we will create a Home page and set it as static front page. You can follow these steps for creating a Home page:

If you imported the dummy data then home page and blog page automatically created.

If you do not import then follow the given steps.

Navigate to Pages > Add New. Next, enter a title for your home page. Say, "Home".

This will create a basic Home Page. But this page will still not appear on front page. For that, it will be required to set Front page Displays.

Please Select Home Template for Home page.

Similarly, Navigate to Pages > Add New create one more page and call it "Blog".

Important: We have just created the Home page. But this will not appear as front page yet. For that, we will need to adjust Front Page Display Settings.

Navigate to Settings > Reading > Front page displays > A static page. Next, set Front page as "Home", and choose Posts page as "Blog". Finally, Save the changes.

Set front page

Once you are done, check the site. It should show your newly created Home page with basic content.

How to select home template

Home template styling for a page can be selected under Page options.

Go to Pages > All pages > Select Home page edit the page. In to the Page Attributes block Select Template > Home template.

home template

Creta Theme Options

For additional Theme Options we use Redux framework.

Creta theme support 2 different Theme Layout.

Creta comes with a theme options panel for basic settings and configuration of the theme.

In order to configure theme options, navigate to Creta Options. You shall see different sections in form of tabs. Let’s cover a brief introduction about each of these sections:

1. Home Settings This section contains settings to configure/update your store's home page.

2. General Settings This section contains general settings like Upload Company/clients Logo.

3. Header This section can be used to configure header related settings i.e. logo, search boxes etc.

4. Menu This section covers settings for menu .

5. Footer This section can be used to configure footer related settings i.e. footer color schemes.

6. Styling Options This section covers settings for styling your Creta store. You can define your header footer background etc.

7. Blog Pages This section covers settings Blog Page. You can set different Blog Page Layouts here.

8. Social Media This section covers Social Media settings. You can set links of different social media accounts here.

9. Import/Export

You can import and export redux data from here.

Once you have configured basic settings, click on "Save Changes" button at the bottom of page. You can also reset all settings to default by clicking on "Reset all settings" button.

1 Home Settings

    a . Enable Home Page Gallery You can enable home page gallery and add/upload/use images to create slides with image and text which will be shown right below menu section.

    1 . Default version Slider Text

    home_page_gallery

    Slider Text given below
    Slide 1 Text :
    <div class="info"> <div class='tp-caption ExtraLargeTitle sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1100' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:2;max-width:auto;max-height:auto;white-space:nowrap;'> <span>Modern Design</span> </div> <div class='tp-caption LargeTitle sfl tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1300' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:3;max-width:auto;max-height:auto;white-space:nowrap;'> <span>Season Sale</span> </div> <div class='tp-caption Title sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1450' data-easing='Power2.easeInOut' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'>In augue urna, nunc, tincidunt, augue, augue facilisis facilisis.</div> <div class='tp-caption sfb tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1500' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'> <a href='#' class="buy-btn">Shop Now</a> </div> </div> Slide 2 Text :
    <div class="info"> <div class='tp-caption ExtraLargeTitle sft slide2 tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1100' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:2;max-width:auto;max-height:auto;white-space:nowrap;padding-right:0px'> <span>Mega Sale</span> </div> <div class='tp-caption LargeTitle sfl tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1300' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:3;max-width:auto;max-height:auto;white-space:nowrap;'>Go Lightly</div> <div class='tp-caption Title sft tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1500' data-easing='Power2.easeInOut' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div class='tp-caption sfb tp-resizeme ' data-endspeed='500' data-speed='500' data-start='1500' data-easing='Linear.easeNone' data-splitin='none' data-splitout='none' data-elementdelay='0.1' data-endelementdelay='0.1' style='z-index:4;max-width:auto;max-height:auto;white-space:nowrap;'> <a href='#' class="buy-btn">Buy Now</a> </div> </div>

    2 . Version 2 Slider Text


    home_page_gallery

    Slider Text given below
    Slide 1 Text :
    <div class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="700" data-height="none" data-whitespace="normal" data-transform="transform: scale(1.05);" animation-timing-function: ease-out;> <span>Super</span> Trends <p>Get up to <b>70%</b> off on all women collection </p> <a href="#" class="Newspaper-Button">Shop Now</a> </div> Slide 2 Text :
    <div class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="700" data-height="none" data-whitespace="normal" data-transform="transform: scale(1.05);" animation-timing-function: ease-out;> <span>New</span> Collection <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="Newspaper-Button">Learn More</a> </div> Slide 3 Text :
    <div class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="700" data-height="none" data-whitespace="normal" data-transform="transform: scale(1.05);" animation-timing-function: ease-out;> <span>New</span> Collection <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <a href="#" class="Newspaper-Button">Learn More</a> </div>
    b . Enter welcome message You can add default welcome message here.

    home_header_banner_text

    d . Enable Home Sub Banner Set this as ON and add Sub Banner images .It will display in home page here.

    homepage_sub_banner

    e . Show Hot Deal Product Then this product will display in hotdeal section of home page.

    Set this as ON .It will display in home page here.

    home-hot_deal

    If you want to display product in hot deal section of home page then you have to add sale price and sale schedule in that product.

      sale_schedule

      sale_schedule


    Show Hot Deal on Product Detail Page

    Set this as ON From Home Setting options .

    Hot deal on Product Deatil Page option checked then deal time will display on product detail page.

    f . Show New Products Set this as ON then select product categories whose new product you want ot display in home page.

    home_new_products

    g . Show Best Seller Products Set this as ON if you want to display best selling products on your store's home page.

    home_best_seller_products

    h . Show Featured Products Set this as ON if you want to display featured products products on your store's home page. To create featured products, go to wooCommerce products and click on the star icon in front of the product name.

    enable_featured_product_slider

    g . Show recommended Products Set this as ON if you want to display recommended products products on your store's home page . Add recommended custom fileds in product then product will dispaly in recommended section

    home_best_seller_products

    i . Show Related Products Set this as ON if you want to display related products products on your store's product detail page.

    related_productsr

    j . Show Upsell Products Set this as ON if you want to display upsell products products on your store's product detail page.

    upsell_products

    k . Show Latest Post Set this as ON to display latest posts on your store's home page.

    home_latest_post

    Admin Creta Options

    Home Settings

2General Settings

a . Enable Company Logo Uploads Set this as ON and add Logo images .It will display in home page here.

homepage_logo

b . Enable Product Page Social Share Set this as ON Product Page Social Share .It will display in Product page here.

homepage_logo

Back To Top This setting controls the back to top functionality. We recommend to set it as ON.

Browse the other Creta options and configure the way you like to make your store the way you like.

General Settings

3Footer

a . Enable Mailchimp Form Set this as ON footer mailchimp form .It will display in the footer section here.

footer_mailchimp_form

b . Show Footer Service Set this as ON footer service.It will display in the footer section here.

footer_service

c . Enable Footer Middle Enable footer middle text .It will display in the footer section here.

footer_text

d . Bottom Footer Text Bottom footer text .It will display in the footer section here.

footer_text

Using Widget Areas

Widget area is a section where you can use widgets for the theme. Creta supports 8 widget areas. 1 for sidebars of (Product Categories, Blog and Pages each). 5 for footer sections.

In order to access your widget areas, go to Appearance > Widgets. You will see 8 widget areas, as shown below:

Default Widget Areas

These are the default widget areas. The theme will use these default widget areas when no exclusive widget area is defined for a page or post.

Let’s have a quick look on each widget area:

Widget Area Description
Shop Sidebar Widgets placed under primary sidebar will appear only on Woocommerce pages i.e. categories, subcategories etc.
Content Sidebar Widgets placed under content sidebar will appear only on wordpress pages i.e. About Us, Contact us etc.
Blog Sidebar Widgets placed under content blog will appear only on wordpress post pages i.e. Blog page, blog category, blog tags, archive & blog single pages.
Footer Widget Area 1 Widgets placed under content blog will appear only under footer widget section 1. Where you see our logo, some text and payment gateway images on our demo store.
Footer Widget Area 2 Widgets placed under content blog will appear only under footer widget section 2.
Footer Widget Area 3 Widgets placed under content blog will appear only under footer widget section 3.
Footer Widget Area 4 Widgets placed under content blog will appear only under footer widget section 4.

1 Widget Dummy Content

a . Footer Widget Area 1
<ul class="links"> <li class="first"> <a title="How to buy" href="#">Blog</a> </li> <li> <a title="FAQs" href="h#">FAQs</a> </li> <li> <a title="Payment" href="#">Payment</a> </li> <li> <a title="Shipment" href="#">Shipment</a> </li> <li> <a title="Where is my order?" href="#">Where is my order?</a> </li> <li class="last"> <a title="Return policy" href="#">Return policy</a> </li> </ul>
b . Footer Widget Area 2
<ul class="links"> <li class="first"><a title="Your Account" href="#">Your Account</a></li> <li><a title="Information" href="#">Information</a></li> <li><a title="Addresses" href="#">Addresses</a></li> <li><a title="Addresses" href="#">Discount</a></li> <li><a title="Orders History" href="3#">Orders History</a></li> <li class="last"><a title=" Additional Information" href="#"> Additional Information</a></li> </ul>
c . Footer Widget Area 3
<ul class="links"> <li class="first"><a title="Site Map" href="#">Site Map</a></li> <li><a title="Search Terms" href="#">Search Terms</a></li> <li><a title="Advanced Search" href="#">Advanced Search</a></li> <li><a title="History" href="#">About Us</a></li> <li><a title="History" href="#">Contact Us</a></li> <li><a title="Suppliers" href="#">Suppliers</a></li> </ul>
d . Footer Widget Area 4
<div class="payment-accept"> <img src="http://wordpress.magikthemes.com/creta/wp-content/themes/creta/images/payment-1.png" alt="payment1"> <img src="http://wordpress.magikthemes.com/creta/wp-content/themes/creta/images/payment-2.png" alt="payment2"> <img src="http://wordpress.magikthemes.com/creta/wp-content/themes/creta/images/payment-3.png" alt="payment3"> <img src="http://wordpress.magikthemes.com/creta/wp-content/themes/creta/images/payment-4.png" alt="payment4"> </div>
It will display in the footer section here.

footer

Create Navigation Menus

How to open screen options panel

The screen options are a pull down menu which is located in the top right corner of your WordPress admin panel.

screen_options

You can see a list of the different modules and checkboxes in the ‘Screen Options’ drop-down menu. You can show or hide something on the current screen of the WordPress dashboard by simply checking or unchecking the boxes.

screen_options_panel

In the image above, you’ll see a screen options panel.The Screen Options let you choose which sections and columns on the current screen of the WordPress admin panel are displayed or not.

How to Create Navigation Menus

Creta support WordPress menus in two locations. Top Menu in top header section, and Main Menu as the main menu.

1. Navigate to Appearance > Menus. 2. On the right side, you will see a form for adding new menu. Enter a menu name; say "toplinks" and click on "Create Menu" button.

Theme menu settings.

Create a Menu

Next, assign this menu to any of the available theme locations. i.e. Top Menu or Main Menu.

Menu theme locations

After assigning a theme location, save the menu. Next, add pages or custom links to the menu as required.

Tip: You can drag menu items up-down to manage order of appearance. You can drag them left-right to set as sub-page. You can also edit "Navigation Label" and "Title Attribute" if you wish to do so.

Create Page

Create a Page with required layout

1. Go to Pages > Add New. Next, enter a Page Title and Page Content.

Add a post

2. Scroll down to the bottom of your page. You will see a new panel added by a theme to set the required layout for your page.

You can repeat same procedure for creating more pages.

Create Category and Posts

Theme's blog content will depend upon categories, posts and featured images associated with them. Most of the site content will contain images. So let’s start by creating a category and publish some posts in it. But before that, a quick note about image preparation.

Image Preparation

Since the theme is responsive, images will be shown in fluid width. For better results, you can prepare images of around 800px to 100px width and auto height. You can save these images in web optimized .jpg or .png format, and keep on your hard drive. These can be uploaded to the posts when required.

Create a Category

Navigate to Posts > Categories. Next, create a new category (say, Featured) and click on "Add Category".

Create a category

A newly created category will appear.

Find a category ID

Finding a Category ID: Hover your mouse pointer on the category name and watch it's link in the status bar of your browser. You shall see a link as taxonomy=category&tag_ID=xx. This xx is the category ID. Note this down as we will need the category IDs to populate the widgets, blog and portfolio pages.

You can follow same procedure for creating more categories like News, Health, Beauty, Blog etc. Let's create some posts for our "Featured" category.

Create a Post with Featured Image
  • 1] Go to Posts > Add New. Next, enter a Post Title and Post Content.

    Add a post
  • 2] Scroll down to the right-bottom side of your page. You will see a panel for "Featured Image". Click on the "Set featured image" link.

    Set Featured Image

    A media uploader will appear. You can either Upload new image files by dragging them in the upload box, or set already uploaded images from the 'Media Library' section. After choosing an image, click on the 'Set featured image' button.

    Select media files

    The newly set featured image will appear inside the "Featured Image" panel.

  • 3] Finally, assign the post to an appropriate category and click on "Publish" button.

    Publish the post

    You can repeat same procedure for creating more posts in different categories. i.e. Create a post, set featured image, and publish it in appropriate category. Once you have enough posts and categories, they can be displayed in various sections of the site.

Create Blog/Archive page

A blog or archive page can be created using built in page templates. Below are some basic steps for creating a blog or archive page:

Navigate to Pages > Add New. Next, enter a title for blog page. Say - “Blog”.

Create Blog or Archive Page

After publishing the page, just click on Blog to see your posts showing up in browser.

Page Settings

a. Product Category

Use below shortcode to display product top parent catgeory.


[product_categories parent="0"]


a. Special Products

Use below shortcode to display Special Products.


[sale_products]


a. Contact Us

Use below code for Contact Us page.


<div class="col-sm-6 col-xs-12 address-box"> <h3 class="block-heading">Get in touch</h3> <p class="u-push-bottom@2">We are very approachable and would love to speak to you. Feel free to call, send us an email, Tweet us or simply complete the enquiry form.</p> <div class="info"> <div class="icon-box"><i class="fa fa-map-marker"></i></div> <div class="description"> <h4 class="info-title">Find us at the office</h4> 163 Duane Avenue, Abant Street, CA 95352 </div> </div> <div class="info"> <div class="icon-box"><i class="fa fa-phone"></i></div> <div class="description"> <h4 class="info-title">Give us a ring</h4> John Doe +01 123 456 789 Mon - Fri, 8:00-22:00 </div> </div> <div class="info"> <div class="icon-box"><i class="fa fa-envelope"></i></div> <div class="description"> <h4 class="info-title">Support Email</h4> <a href="mailto:abc@example.com" target="_blank" rel="noopener">abc@example.com </a> </div> </div> </div> <div class="col-sm-6 col-xs-12 contact-box"> <h3 class="block-heading">Send us a message</h3> [contact-form-7 id="3212" title="Contact form 1"] </div>


a. Pricing Table

Use below code for pricing table page.


<div class="pricing-table-box"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="price-value">$10 <span class="month">monthly</span></div> <h3 class="title">Standard</h3> <ul class="pricing-content"> <li>50 GB Disk Space</li> <li>50 Email Accounts</li> <li>50 GB Monthly Bandwidth</li> <li>10 Subdomains</li> <li>15 Domains</li> </ul> <a class="pricingTable-signup" href="#">Sign Up</a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="price-value">$20 <span class="month">monthly</span></div> <h3 class="title">Business</h3> <ul class="pricing-content"> <li>60 GB Disk Space</li> <li>60 Email Accounts</li> <li>60 GB Monthly Bandwidth</li> <li>15 Subdomains</li> <li>20 Domains</li> </ul> <a class="pricingTable-signup" href="#">Sign Up</a> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="price-value">$30 <span class="month">monthly</span></div> <h3 class="title">Premium</h3> <ul class="pricing-content"> <li>70 GB Disk Space</li> <li>70 Email Accounts</li> <li>70 GB Monthly Bandwidth</li> <li>20 Subdomains</li> <li>25 Domains</li> </ul> <a class="pricingTable-signup" href="#">Sign Up</a> </div> </div> </div> </div> <div class="pricing-section row" style="margin-top:20px;"> <div class="pricing-table"> <div class="col-sm-12 col-xs-12"> <div class="standard "> <div class="pricing-table-header-standard"> <h3>Standard</h3> <h2>$15/mo</h2> </div> <div class="pricing-table-features"> <strong>Unlimited</strong> Email Addresses <strong>50GB</strong> Disk Space <strong>Unlimited</strong> MySQL Databases <strong>Unlimited</strong> Domains <strong>Free</strong> Billing Systems </div> <div class="pricing-table-signup-standard"> <a href="#">Sign Up</a> </div> </div> <div class="premium"> <div class="pricing-table-header-premium"> <h3>Premium</h3> <h2>$29/mo</h2> </div> <div class="pricing-table-features"> <strong>Unlimited</strong> Email Addresses <strong>80GB</strong> Disk Space <strong>Unlimited</strong> MySQL Databases <strong>Unlimited</strong> Domains <strong>Free</strong> Billing Systems </div> <div class="pricing-table-signup-premium"> <a href="#">Sign Up</a> </div> </div> <div class="professional"> <div class="pricing-table-header-professional"> <h3>Professional</h3> <h2>$69/mo</h2> </div> <div class="pricing-table-features"> <strong>Unlimited </strong> Email Addresses <strong>120GB</strong> Disk Space <strong>Unlimited</strong> MySQL Databases <strong>Unlimited</strong> Domains <strong>Free</strong> Billing Systems </div> <div class="pricing-table-signup-professional"> <a href="#">Sign Up</a> </div> </div> <div class="maximum"> <div class="pricing-table-header-maximum"> <h3>Maximum</h3> <h2>$99/mo</h2> </div> <div class="pricing-table-features"> <strong>Unlimited</strong> Email Addresses <strong>120GB</strong> Disk Space <strong>Unlimited</strong> MySQL Databases <strong>Unlimited</strong> Domains <strong>Free</strong> Billing Systems </div> <div class="pricing-table-signup-maximum"> <a href="#">Sign Up</a> </div> </div> </div> </div> </div>


a. FAQs Page

Use below for FAQs page.


<div class="faq-wrapper"> <div class="faq-box"> <h4>QA manager/ executive</h4> <div id="accordion10" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"><a class="collapsed" href="#collapse21" data-toggle="collapse" data-parent="#accordion10" aria-expanded="false">How to deactivate my account?<span><i class="fa fa-angle-up" aria-hidden="true"></i></span></a></h5> </div> <div id="collapse21" class="panel-collapse collapse" style="height: 0px;" aria-expanded="false"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div> </div> </div> </div> </div> <div class="faq-box"> <h4>Oprations / Work Management</h4> <div id="accordion12" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"><a class="collapsed" href="#collapse25" data-toggle="collapse" data-parent="#accordion12" aria-expanded="false">How can i track my orders and payment? <span><i class="fa fa-angle-up" aria-hidden="true"></i></span></a></h5> </div> <div id="collapse25" class="panel-collapse collapse" style="height: 0px;" aria-expanded="false"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div> </div> </div> </div> </div> <div class="faq-box"> <h4>Manager / Executive</h4> <div id="accordion13" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"><a class="" href="#collapse27" data-toggle="collapse" data-parent="#accordion13">How can i chnage my shipping address?<span><i class="fa fa-angle-up" aria-hidden="true"></i></span></a></h5> </div> <div id="collapse27" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div> </div> </div> </div> </div> <div class="faq-box"> <h4>Accounts Manager/ Accounts Executive</h4> <div id="accordion14" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"><a class="" href="#collapse29" data-toggle="collapse" data-parent="#accordion14">How do i cancel my order before i make a payment? <span><i class="fa fa-angle-up" aria-hidden="true"></i></span></a></h5> </div> <div id="collapse29" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div> </div> </div> </div> </div> <div class="faq-box"> <h4>Sales Manager / Sales executive</h4> <div id="accordion15" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title"><a class="" href="#collapse31" data-toggle="collapse" data-parent="#accordion15">What are the payment methos available? <span><i class="fa fa-angle-up" aria-hidden="true"></i></span></a></h5> </div> <div id="collapse31" class="panel-collapse collapse"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div> </div> </div> </div> </div> </div> <div class="faq-block"> <h4>FAQ Layout 2</h4> &nbsp; <div class="question-block"> <h4>What payment methods do you accept?</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <h4>Do I have to sign a long-term contract?</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h4>I need to update the credit card on my account, how can I do that?</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <h4>Is VAT collected?</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <h4>I need to update the credit card on my account, how can I do that?</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div>


a. About Us

Use below for about us page.


<div class="wrap-about"> <div class="about-content-tab"> <div class="content-inner over-view"> <div class="images"> <img src="http://192.168.3.49/new_themes/wp-content/uploads/2018/04/about-img.jpg" alt="" class="alignnone size-medium wp-image-3290" /> </div> <div class="text-about"> <h3>Want to know more about Finance Consultant?</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="text-about"> <h3>A Global Organization</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima.</p> </div> <div class="row"> <div class="col-sm-4 col-xs-12"> <div class="imagebox style2"> <div class="imagebox-content"> <span class="fa fa-truck"></span> <h3><a href="#" title="">Free Shipping Worldwide</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="imagebox style2"> <div class="imagebox-content"> <span class="fa fa-headphones"></span> <h3><a href="#" title="">24X7 Customer Support</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="imagebox style2"> <div class="imagebox-content"> <span class="fa fa-heart"></span> <h3><a href="#" title="">We love ideas</a></h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> </div> </div> </div> <div class="clearfix"></div> </div> <div class="text-about"> <h3>Start with a small service</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> <div class="we-about"> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="title"> WE ARE </div> <ul> <li><span class="fa fa-check"></span>Contrary to popular belief, Lorem Ipsum is not</li> <li><span class="fa fa-check"></span>It has roots in a piece of classical Latin literature</li> <li><span class="fa fa-check"></span>Making it over 2000 years old. Richard McClintock</li> <li><span class="fa fa-check"></span>Professor at Hampden-Sydney College in Virginia</li> </ul> </div> <div class="col-sm-6 col-xs-12"> <div class="title"> WE DONT </div> <ul> <li><span class="fa fa-remove"></span>The standard chunk of Lorem Ipsum used since the 1500s</li> <li><span class="fa fa-remove"></span>Reproduced below for those interested. Sections 1.10.32</li> <li><span class="fa fa-remove"></span>And 1.10.33 from "de Finibus Bonorum et Malorum"</li> <li><span class="fa fa-remove"></span>Reproduced in their exact original form, accompanied</li> </ul> </div> </div> </div> </div> </div> </div> <section class="flat-team"> <div class="row"> <div class="col-sm-12 col-xs-12"> <div class="page-title"> <h2 class="entry-title">The Team </h2> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="team-item"> <div class="team-image"> <img src="http://192.168.3.49/new_themes/wp-content/uploads/2018/04/member1.jpg" alt="" class="alignnone size-full wp-image-3272" /> </div> <div class="team-content"> <div class="name"> Saraha Smith </div> <div class="options"> Manager </div> </div> <div class="team-content hover"> <div class="name"> Saraha Smith </div> <div class="options"> Manager </div> <ul> <li> <a href="#" title=""> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-facebook-f"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-google-plus"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-pinterest-p"></i> </a> </li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="team-item"> <div class="team-image"><img src="http://192.168.3.49/new_themes/wp-content/uploads/2018/04/member2.jpg" alt="" class="alignnone size-full wp-image-3273" /> </div> <div class="team-content"> <div class="name"> Mark doe </div> <div class="options"> Desinger </div> </div> <div class="team-content hover"> <div class="name"> Mark doe </div> <div class="options"> Desinger </div> <ul> <li> <a href="#" title=""> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-facebook-f"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-google-plus"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-pinterest-p"></i> </a> </li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="team-item"> <div class="team-image"> <img src="http://192.168.3.49/new_themes/wp-content/uploads/2018/04/member3.jpg" alt=""class="alignnone size-full wp-image-3270" /> </div> <div class="team-content"> <div class="name"> John Doe </div> <div class="options"> Marketer </div> </div> <div class="team-content hover"> <div class="name"> John Doe </div> <div class="options"> Marketer </div> <ul> <li> <a href="#" title=""> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-facebook-f"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-google-plus"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-pinterest-p"></i> </a> </li> </ul> </div> </div> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <div class="team-item"> <div class="team-image"><img src="http://192.168.3.49/new_themes/wp-content/uploads/2018/04/member4.jpg" alt="" class="alignnone size-full wp-image-3271" /></div> <div class="team-content"> <div class="name"> Stephen Doe </div> <div class="options"> Manager </div> </div> <div class="team-content hover"> <div class="name"> Stephen Doe </div> <div class="options"> Manager </div> <ul> <li> <a href="#" title=""> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-facebook-f"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-google-plus"></i> </a> </li> <li> <a href="#" title=""> <i class="fa fa-pinterest-p"></i> </a> </li> </ul> </div> </div> </div> </div> </section>


Frequently Asked Questions

Below are some Frequently Asked Questions that may help you in finding a solution to your specific issue.

1.I have just uploaded the download zip file to WordPress, and it is showing stylesheet missing error. Why?

Your download zip file is not the theme itself. It is a collection of theme and documentation. It will be required to unzip this folder first. Next look for the folder named "creta" folder. Upload it to the wp-content/themes/ directory.

2. Why are images not appearing properly on site?

WordPress thumbnail sizes DO NOT get generated for images that were uploaded before the theme was installed. i.e. only newly uploaded images will get generated into the theme specified sizes. (This is a limitation with WordPress). To rectify this issue, you can follow any one of these solutions:

  • a) Delete old attachments and re-upload the images into the media library. Next, set these newly uploaded images as featured image to each post. (This could be a long process and time consuming).

  • b) Use the Regenerate Thumbnails plugin. This plugin regenerates all your post thumbnails without having to upload images again. This is a handy plugin and widely used for themes with WP Thumbnails feature. The installation instructions can be found inside the plugin. After installing this plugin, navigate to Tools > Regen Thumbnails. Next, follow the instructions and re-generate the thumbnails.

3. What are recommended sizes for images in this theme?

Since the theme is responsive, images are of fluid width. You can upload images from 800px to around 1200px in web optimized format for better results. The height of images are set to auto. You can also specify custom image sizes inside Appearance > Theme Options > Image Sizes.

4. How to use Theme Customizer

Creta supports WordPress Theme Customizer for basic color schemes on main Navigation menu, secondary area and footer. In order to use Theme Customizer, navigate to WordPress Appearance > Themes. Next, click on the "Customize" link that appears on the active theme section.

5. How to change Image Sizes of woocommerce products

Theme's image sizes can be changed inside Woocommerce > Settings > Products. Inside this section, provide image widths and height for different elements. After changing dimensions, click on "Save Changes". Once you are done, it will be required to regenerate thumbnails using Regenerate Thumbnails Plugin. Recommended Settings are:

  • Catalog Images: 256x256
  • Single Product Image:458x458
  • Product Thumbnails:109x109

6. How to set cart / checkout / shop / my account pages.

You can set set that pages from admin panel. Here inside Woocommerce setting you can see option for set the page .

  • Shop Page: WooCommerce -> Settings -> Products -> Display
  • Cart / Checkout Page: WooCommerce -> Settings -> Checkout
  • My Account : WooCommerce -> Settings -> Accounts

    If you want to show registration form on My Account page then you have to enable this option Enable registration on the "My Account" page .

7. How you enable Product category and other option in admin menu page :

You can enable product category and their subcategory in menu from here path- Appearance -> Menus. Here on the top of the page you can see "Screen Options". Please click on this then Product Categories and other options will display. Please check the options. (Like Product Categories) Now that option will display to the left side of menus.

Videos links that will help you.

We would be glad to help you if you have any questions relating to this theme please contact us via email at - support@magikcommerce.com. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.