TAKE YOUR ONLINE STORE TO THE NEXT LEVEL WITH OUR LATEST ECOMMERCE THEME
PURCHASE NOW

Elegant Shop Pro

This is the official documentation for Elegant Shop Pro, a WordPress theme designed for business owners to establish a professional-looking store to promote and sell your items online.

Welcome!

Welcome to the Elegant Shop Pro theme’s documentation page!

This documentation talks about how you can install the theme on your WordPress site, how to customize the theme to suit your needs, and a couple of other things that you’ll need to know to get going.

Although having WordPress installed on your server is enough to install the theme, we recommend that your server meets the following versions:

  • PHP version 7.0 or greater.
  • WordPress version 5.1 or greater

Installing The Theme

Installing the theme is quite straightforward.

Download and save the ZIP file containing all the theme files. We’ll be using it later on.

Step 1. Go to your WordPress dashboard and head over to Appearance > Themes.

Step 2. Inside Themes, click on Add New (plus icon).

Step 3. Click on Upload Theme located near the top right.

Step 4. It will then ask you to choose the ZIP file for the theme. Navigate to and select the ZIP file for the Elegant Shop Pro theme that you downloaded earlier. Once done, click on Install Now.

Step 5. Click on the Activate button after the theme installation finishes.

That’s pretty much it! Reload your website to see the gorgeous theme in action!

Elegant Shop Pro Theme requires some essential plugins to be installed for some components to work: WP Forms lite for the Newsletter Section, Contact Form 7 for contact forms, One Click Demo Import for importing Demo, Max Mega Menu for creating menus, Regenerate Thumbnails for image resizing, WooCommerce for creating a shop for your business and YITH for WooCommerce Plugin.

To install the plugins, follow the following steps:

Step 1. Go to your WordPress Dashboard. Head over to Plugins > Installed Plugins.

Step 2. On the top it displays a notice, asking you to install the recommended plugins. Click on Begin Installing Plugins.

Step 3. Select all the plugins and choose Install from the dropdown menu. Hit Apply.

Step 4. Head over to the Installed Plugins page once again. Select all the plugins, choose ‘Activate’ in the dropdown, and click on Apply as shown below.

That’s it. The plugins are now installed, activated, and ready to use. You’re all set!

Configuring The Theme

Now that you have the theme successfully installed, time to tweak the customization settings to make it your own!

As with all the other themes from GLThemes, the Elegant Shop Pro theme comes with tons of customization features to truly give you full control over the look of your website.

We’ll be exploring various customization options available in the theme’s customizer in this section.

Site Identity Options

While inside the customizer, navigate to Site Identity to edit settings such as Header title and tagline, add an (optional) logo, and add site icon (optional).

Inside Site Identity, you can add a logo via the Select Logo option, change your site’s title in the Site Title option, change the tagline in the Tagline option, and add a site icon in the Select Site Icon option.

You’ll be able to see the live preview as you edit the options.

Change Basic Appearance Settings

You can change the basic appearance of your website through the Appearance Settings option inside the customizer as shown below.

While inside the Appearance Settings option, you can change the Colors and Background Images in their respective settings.

Change Website Colors

While inside Appearance Settings, go to Colors.

Available Color Options:

  • Header Text Color: Color for the header title and subtitle.
  • Background Color: The color of the hindmost background. Color changed for visibility. Default is #FFFFFF(white).
  • Primary Color: The accent color used in Elegant Shop Pro. Most used color site-wide. Default is #fad2d3.

Example Usage:

  • Secondary Color: The secondary accent color. The second most used color site-wide. Default is #f7d8c2.

Example Usage:

  • FallBack SVG Color: This is the default color of the SVGs which are found missing in the pages.

Typography Settings

Here you can change the Font Family, Font Weight, Font Size, and Text Transform style for Primary, Secondary, H1, H2, H3, H4, H5, and H6 fonts.

Font Family is the typeface of the font used.

Font Weight is the width or the boldness of a font.

Font Size determines the size of the letters in the font.

Text Transform allows you to add special characters to the font, namely uppercase, lowercase, underline, and capitalize.

Change Background Image

You can add or change the background image of the whole website through Background Image settings inside Appearance Settings. By default, no background image is set.

Click on Select Image and upload the image file to the uploader. After uploading the image, you can choose variously Preset to change how the background image displays.

Front Page Settings

The front page is what makes or breaks the first impression of a visitor to your website. In the Elegant Shop Pro theme, you’ve been given numerous options to tweak and customize various sections of the front page.

The Front Page includes the following sections: Banner Section, Featured Section, Category Section, New Arrivals Section, Offer Section, Featured Product Section, Product Deal Section, Category List Section, Blogs Section, Footer Top Section, and Sort Section.

To start customizing the front page, go to Front Page Settings while inside the customizer.

Inside the Banner Section, you can choose among the following banner types: Static/Video, Banner as Slider, and Disable Banner Section.

In the Pro version, you’re given three types of banner options — Static/Video CTA Banner, and Banner as Slider. You can choose to disable the option in the Banner Options.

Static/Video CTA Banner

This banner type includes an image or a video as the background banner, banner heading, banner subheading, and Call-To-Action (CTA) buttons.

Customization Options:

  • Header Video: You can upload a video to use as the background video for the banner. Alternatively, you can also enter a URL for a YouTube video in the given field.
  • Header Image: This is the background image for the banner. Try to use the recommended image size of 1920×863 pixels for best results. Optimized, small-size images are highly suggested because of their impact on site performance.
  • Title, Description, CTA Buttons: Title is the main heading of the banner while Description is the subheading. What’s more, you change the labels for the CTA buttons through here.

This banner type uses your posts and their content as a slider/carousel.

Customization Options:

  • Slider Content Style: You can set the slider to use the Latest posts, posts from a specific category, or you can add your own custom pages to display.
  • You can create a custom slider by putting custom parameters as well. In the custom slider, you can add the image, title, and description as per your requirement.

If you select Latest Posts, you can set how many posts to cycle through by specifying the number in the Number of Slides slider menu.

If you select Category, you can choose what category of posts to choose from from the Slider Category dropdown menu.

If you choose the Pages option, you can add your own pages to cycle through via the Add New Pages button.

  • Button Label: Change the button label in the front of the banner.
  • Slider Auto: Enable to automatically scroll through the available slider pages/posts. Disable to require a user button press to change the slider page.
  • Slider Loop: Enable to infinitely cycle through the slider pages via looping. Disable to stop the slider as soon as it hits the last slider page.
  • Slider Animation: Choose among 29 different slider animations. Default is Slide.
  • Slider Speed: Specify how often the slider changes automatically (in milliseconds). Only effective if the Slide Auto option is enabled. The default value is 5000.

Disable Banner Section

Completely removes the banner section.

Featured Section

As a theme for eCommerce websites, we think having a section like “Featured” really makes it convenient to include relevant information about offers and sales on the homepage for your visitors to see.

Customization Options:

  • Section Tag, Title, Label, link, and image: This is where you can change the tag, title, image, and label for the Featured section, which will be reflected on the homepage. Moreover, you can add a link and text to the “Label” to direct your visitors to a relevant link.

This section is where you can list the categories of the product that your eCommerce site offers to the customers.

You can add new categories from Dashboard>Products>Categories>Add New Category.

New Arrivals Section

This is where you can feature your latest products to your customers. For this go to Customizer > Front Page Settings > New Arrivals Section and add a title, choose the banner options as the latest product or categories and a number of products you want to show on the homepage.

Offer Section

The Offer Section lets you display the offers provided by your business to the customers.

Customization Options:

  • Section Tag, Title, Label, link, and image: This is where you can change the tag, title, image, and label for the Offer section, which will be reflected on the homepage. Moreover, you can add a link and text to the “Label” to direct your visitors to a relevant link.

This is what a typical CTA Section looks like:

Featured Product Section

This section is where you can place information about the products your e-commerce provides.

Customization Options:

  • Section Title: You can add the title for the featured product section.
  • Category Tabs: Here you can select the categories for the products that you can display in this section.
  • Add New Category: This option lets you add a new category of products in the featured products section.
  • Number of Products: You can select the number of products to display in the section.

Product Deal Section

Product Deal Section allows you to display certain quantitative figures in a banner-like design. The counter will “count down” from the number of days and hours you set to zero.

Go to Front Page Settings >Product Deal Section to begin setting up and customizing this section.

Customization Options:

Section Title and description: This is where you can set the title and description of the Product Deal Section.

Event Time: Here you can set the time when the deal is going to be available for the product.

Product Deal Button and Link: You can add the text for the button for the Product Deal Section and also that link to the button that redirects to the relevant page.

  • Choose Image: You can upload the image of the product that you want to display on the product deal section.
  • Background color: You can select the background color of the Product part in the product deal section

Category List Section

Here you can add products according to their category to showcase and highlight them on the homepage. Go to Customizer > Front Page Settings > Category List Section.

You can add new Categories from the Add new category option.

Customization Options:

  • Category Title: This is where you can change the title for the category that you have created.
  • Category List: This is where you can select the category of products that you want to showcase.

Adding New Category:

  • Title: Create the title for the new category that you want to add.
  • Category for Lists: Here you can choose the category of the products from a wide range of list of categories.
  • Products based on: Here you can select what the products are based on. Three different options latest, Popular, and Sale are available for selection.

Blogs Section

This section helps to display the blog posts on the home page, so if you want to introduce a new product line or share other news with your visitors, it’s easy to do so. You can set up blogs from Customizer > Front Page Settings > Blogs Section.

Customization Settings:

  • Section Title and Subtitle: You can change the heading and the subheading for the section in the respective options.
  • Read More text: Change the text for the Read More button.

And this is what the section looks like, after making all the necessary changes.

Footer Top Section

This is the section where you can add the highlights of the services that your eCommerce business offers. To set up the footer top, go to Customizer > Front Page Settings > Footer Top Section

You can add a new Footer Top from the Add new Featured option.

Customization Settings:

  • Section Title and Subtitle: You can change the heading and the subheading for the section in the respective options.
  • Image: Change the image for the featured footer top.

Sort Section

In this section, you can sort your homepage sections according to your preferences. You can drag and drop sections as and when required. You can even hide certain sections which don’t fit your requirements.

Allows you to rearrange the sections within the homepage.

General Settings

General Settings comprises settings that allow you to tweak several aspects of the Top Bar, Header, Social Sharing, Post-Page settings, Performance tweaks alongside other Miscellaneous settings.

We’ll go through each setting and sub-settings inside the General Settings of the customizer and explain what the setting does, how it impacts your website, and where you can see the changes take place.

TopBar Settings

TopBar Settings is where you can change the settings of the topmost bar of your website, most commonly used for offering notifications. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.

Available Sub-Settings:

  • Enable TopBar: Toggle to enable or disable the top bar.
  • Notification Text, Button Label, and Button Link: Here you can change the text displayed on the top bar, and the button label and link.

As the button implies, the Enable to open link in a new tab makes it so that the link in this section, if clicked, opens up a new browser tab.

Header Settings

Header Settings is where you can change the settings of the header of your website. Most of the settings are mostly preferences and are localized, meaning they don’t majorly impact the whole website.

Available Sub-Settings:

  • Sticky Header: Enable to make the header stick at the top of the page.
  • Enable Search: Toggle to enable or disable the search button in the header.
  • Wishlist Cart: Toggle to enable or disable the Wishlist Cart in the header.
  • User login: Toggle to enable or disable the User login in the header.
  • Shopping Cart: Toggle to enable or disable the Shopping Cart in the header.

Search button enabled:

  • Header Button one title and link: Here you can set up the text and the link for the header button one.
  • Header Button two title and link: Here you can set up the text and the link for header button two.

Social Sharing Settings

  • Enable Social Links: Toggle to enable or disable the social link icons and links on the header.
  • Social Links: This option is where you can add, remove and customize the social links present on the header. This option is only effective if you have Enable Social Links turned on.

To add a new link, click on the Add new links button.

For this demo, let’s set up 3 social media links for the header — Facebook Link, Twitter Link, and Instagram Link.

For the first link i.e, the Facebook link, choose “Facebook” from the Social Media dropdown menu.

Add the link to your Facebook profile in the Link field.

The steps for the other two links are quite similar. Here’s the end result:

Click on Publish and you’ll be able to see the changes in the header.

Posts(Blog) & Pages Settings

These settings apply to all the Single Posts on your website, which are generally blog posts.

Available Sub-Settings:

  • Hide Prefix in Archive Page: Enable/disable to show or hide prefix in the archive page.
  • Hide Author, Posted Date, Post Views: Enable these settings to hide the Author name, Date of Publishing, and the number of views on your Single Page Posts (blog posts).
  • Related Posts Section Title: You change the Related Posts heading displayed at the end of each blog post by editing this setting.

By default, the text is set to “You might also like”:

Performance Settings

Performance settings include settings that impact the performance of your website, and in most cases, increase the overall performance of the website.

Caution: Some of the settings come with a tradeoff, and you may not be able to use particular features if one or more of the settings are turned on. Likewise, it may conflict with other external plugins which are related to performance and SEO.

Available Sub-Settings:

  • Lazy Load: Lazy loading is a way of intentionally delaying the load or initialization of resources until the resources are actually needed. Enabling this option will lazy load the featured images, thereby improving load times and conserving bandwidth.
  • Lazy Load Content Images and Gravatar: Toggling this option on will lazy load content images and gravatar icons, potentially improving site performance.
  • Defer JavaScript: “Defer” is a boolean attribute in JavaScript.

If this option is enabled, the ‘defer’ attribute is set to TRUE for all JavaScript content on the website, if available. This causes the JavaScript file to be downloaded/loaded asynchronously or in parallel to parsing the page, thereby improving page speed.

  • Remove ‘ver’ parameters: By default, WordPress adds ‘ver’ (referring to version) parameter at the end of JS and CSS files in HTML tags. This specifies the browser to not cache those files. Enabling this option will remove ‘ver’ parameters, which tells your browser to cache the JS and CSS files next time you visit the webpage. This can drastically improve the load time and on-site performance due to caching being enabled.

Misc Settings

Misc Settings contains a few other miscellaneous settings that affect various parts of the website.

Available Sub-Settings:

  • Admin Bar: Toggle to enable or disable the Admin Bar on the top of the screen when you’re logged in to your WordPress backend of the website. The Admin Bar allows you to easily edit pages and customize various parts of the website on the go.
  • Scroll To Top: Toggle to enable or disable the scroll-to-top button at the lower right side of the page. Clicking on the button will automatically scroll to the top of the webpage.
  • Excerpt Length: If you haven’t manually specified or written an excerpt for a Post, WordPress automatically uses the text from the first paragraph of the post as the excerpt to display it. This setting will allow you to specify how many words of the first paragraph to use as the excerpt if the excerpt isn’t manually set.
  • Read More Button: Here you can set the Read more button label for Archive Pages and 404.
  • 404 Error Page image: Here you can add the image to display on the 404 Error page.

Configuring Layouts

Layouts are essentially how the components are displayed in a particular section or theme component — their positioning, colors. size, etc.

Consider them as themes or presets for theme sections. With different layouts, you can fully revamp and change the look of Headers, Footers, Single Posts, and so forth without having to add any code or use any plugin.

Elegant Shop Pro comes with a variety of layouts for the Header, Sidebars, and Banner.

To start customizing layouts, head over to Layout Settings inside the customizer.

Header Layouts

There are a total of four different header layout options in Elegant Shop Pro.

We’ll label each layout from 1 to 4, top to down to make it easier to understand.

  • Header Layout #1: Header with Search Bar above the navigation section.
  • Header Layout #2: Header with Search Bar below the navigation section.
  • Header Layout #3: Search Bar disabled. A site logo at the left.
  • Header Layout #4: Search Bar disabled. A site logo at the center.

Slider Layouts

Elegant Shop Pro ships with three different Slider layouts you can choose from.

Sliders are only enabled if you have the Banner type of your homepage set to Banner as Slider. Refer to their respective sections for more info about Banner Types and Banner as Slider.

We’ll mark each layout numerically from top-down as you see on the screenshot above.

  • Slider Layout #1: Default layout. Contains one single image of the post/page with heading, sub-heading, author and date details, and navigations arrows below the texts.
  • Slider Layout #2: Post/Page image on the front, Post details on the cardboard-styled section below the image, Navigation arrows on the sides of the image.
  • Slider Layout #3: Post image in the middle, Post details on the lower left, Navigation buttons on the sides of the image.

General Sidebar Layouts

Page Sidebars

There are 3 layouts for Pages in the Elegant Shop Pro theme. Pages include any page you create through the Admin Panel or the template pages created by us such as Contact Page, Testimonial Page, etc.

We’ll mark each layout numerically from top-right-down as you see on the screenshot above.

  • Page Sidebar Layout #1: Sidebar completely disabled.
  • Page Sidebar Layout #2: Sidebar on the left side of the page.
  • Page Sidebar Layout #3: Sidebar on the right side of the page.

Note: The Page sample used here is the default Privacy Policy page. All of these layouts look the same on any Page.

General Sidebars

There are 3 layouts for Posts in the Elegant Shop Pro theme. Posts include any Post you create through the Admin Panel which is generally a blog post.

We’ll mark each layout numerically from top-right-down as you see on the screenshot above.

  • Post Sidebar Layout #1: Sidebar completely disabled.
  • Post Sidebar Layout #2: Sidebar on the left side of the page.
  • Post Sidebar Layout #3: Sidebar on the right side of the page.

Pagination Settings

Here you can select a pagination type from the three available pagination options.

How To Create A Page in WordPress

Creating pages in WordPress is a simple process. Pages can be fully custom or you can create a page with premade templates.

Follow the steps below to create a simple new page for your website:

Step 1. Log in to your WordPress Admin Panel. Go to the Pages option located in the left sidebar.

Step 2. Click on Add New at the top. You should have a screen that looks like this:

You can add titles, paragraphs, and many other blocks through the editor. For now, let’s create a basic page titled “My First Page” and a dummy text for the paragraph.

Step 3. Click on Publish button located on the righthand sidebar.

That’s pretty much it. We’ve created a page titled “My First Page”.

Here’s what the page looks like:

You can add different blocks, headings, and media files via the + button in the editor.

Set Up and Configure Teams Page

Let’s create a Team page for your website from a ready-made template that comes with Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. Make sure to choose “Teams” in the page template as shown:

Here’s what our recently created team page will look like:

Now we need to add members to our team for them to be displayed on this page. Let’s do that next.

How To Add Members In Teams

Step 1. Go to your WordPress Dashboard and go to Teams in the left sidebar.

Step 2. Click on Add New and fill in the required details on the next page.

Hit Publish and see the changes.

Here’s what our new Team Page looks like now:

You can populate this page by adding more team members.

Set Up and Configure Testimonials Page

Let’s create a Testimonials page for your website from a ready-made template that comes with the Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. Make sure to choose “Testimonial” in the page template (right sidebar) as shown:

Step 3. Add Testimonials of your own. Follow the below steps to add one:

Go to your WordPress dashboard and on to the Testimonials section in the left sidebar.

Click on Add New button.

On the next page, enter the required details. You can add an image of the reviewer in the Featured Image section in the right sidebar.

Finally, click Publish and it should be listed on the Testimonial page you just created.

Customization Options:

  • Testimonial Section: You can conveniently change the number of testimonials to show in the testimonial page before the user has to “Load More” through the slider option inside this section.

Set Up and Configure Partner Page

Let’s create a Partner page for your website from a ready-made template that comes with Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. Make sure to choose “Partner” in the page template (right sidebar) as shown:

Hit Publish and you’ll be able to see the page on the Portfolio page.

Customization Options:

  • Partner Section: You can add title and content for the Partner page and also configure the list of partners link to show at once.
  • FAQ Section: You can customize the FAQ section of the Portfolio page by changing the title, and description, and adding/removing new FAQ elements through these options.
  • CTA Section: You can customize the CTA section of the Portfolio page by changing the title, subtitle, and adding button link and button color through these options.

Set Up and Configure About Us Page

Let’s create an About Us page for your website from a ready-made template that comes with Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. Make sure to choose “About Us” in the page template as shown:

Hit Publish and you should have an About Us page ready to be customized!

Customization Options:

We’ll customization each of the sections in the About Us Page.

Set Up and Configure Contact Page

Let’s create a Contact page for your website from a ready-made template that comes with Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose the Contact page.

Step 3. You can configure other settings such as adding an Excerpt or setting the Featured Image for the page. For this demo, we’ll keep the default values. Click on Publish and then click on View Page to visit your newly created page. Here’s what it should look like:

Time to configure the theme!

Go to your Customizer and head over to Contact Page Settings to begin customizing your newly created Contact page.

Customization Options:

  • Contact Details Section: Here you can change the text for Section Title, Subtitle, Location Title, Description, Mail Title, your email address, Phone Us heading title, your phone number, and details about your hours of operation.

Ensure that the changes are reflected on the Contact Us page by publishing the changes and refreshing the page.

As expected, we can see the changes on the page.

  • Google Map Section: You can embed Google Maps of your location via this section. You can always disable this section by toggling the Google Map Settings button off.

To add a new embed for your location, go to Google Maps and enter your location. For this demo, we’ll input the following address: Empire State Building, West 34th Street, New York, NY, USA

Click on the Share button.

And on the Share page, go to Embed a Map tab. Copy the link shown.

Go back to your Contact Page Settings, and enter the embed code you just copied in the Embedded Google Map field.

Refresh the page to see the changes.

  • Contact Form Section: Contact forms are essential components of a Contact page. You can add a contact form to your page by creating and configuring a form in Contact Form 7, which is a plugin we’ll use. If you don’t have the plugin installed, please refer to Installing Recommended Plugins section to learn how to install it.

You can change the form title in the Contact Form Title field. For this demo, we’ll keep it as it is.

To get a shortcode for a form configured in Contact Form 7, follow the steps below:

Note: You must have the Contact Form 7 plugin installed.

Step 1. Go to your WordPress dashboard and go to the Contact page from the sidebar.

Step 2. Click on Add New to add a new contact form. Enter your form title in the given field.

Step 3. You can configure the form as you please, but for now, we’ll use the default template.

Step 4. Configure the Mail settings to make sure the contact form is fully functional and sends mail to the right email address.

You can configure other settings for the form as well. For now, this will do for us. Hit the Save button.

Step 5. Copy the shortcode shown on the top.

Go back to the Contact Us Form settings, and paste the code in the Contact Form Shortcode field as shown below.

Hit Publish and refresh the Contact Us page to see the changes in action.

Set Up and Configure Pricing Page

Let’s create a Contact page for your website from a ready-made template that comes with Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. While inside the page editor, locate the Template dropdown selector menu on the righthand side, and choose Pricing Page as shown:

Hit Publish to finalize creating the Pricing page.

On to the customization part!

  • Pricing Section: Inside the pricing section, which is the main emphasis of this page, you’ll find the following options:

Here you change the title and subtitle of the section but most important, you can add new pricing plans through the Add new pricing button.

You’ll be prompted to provide details about the Pricing Plan. Here’s a demo sample of the Standard pricing plan:

Set Up and Configure Service Page

Set Up and Configure FAQ Page

Let’s create a FAQ page for your website from a ready-made template that comes with Elegant Shop Pro theme.

Step 1. Create a new page by following the steps described above.

Step 2. Make sure to choose “FAQ” in the page template (right sidebar) as shown:

Hit Publish and you’ll be able to see the page on the Portfolio page.

Customization Options:

  • FAQ Section: You can customize the FAQ section of the Portfolio page by changing the title, description, and adding/removing new FAQ elements through these options.
  • Topics Section: You can customize the Topics section of the FAQ page by changing the title and adding new FAQ topics through these options.

You can tweak the footer of your website through these settings.

You’re free to change the Footer Copyright text to your own by changing the content in the field.

Moreover, you can hide/show the Author and the WordPress link in the footer text.

One Click Demo Import Plugin

One click Demo Import lets users import content, widgets, and theme settings with one click.

How to Import Demo Content?

Go to Admin Dashboard > Appearance > Import Demo Data

Then at the One Click Demo Import page, scroll down to the bottom of the page.

There are two options to import the demo data
1. Import Demo Data: Clicking on the Import Demo Data option, all of the available demo data will be imported.

2. Switch to Manual Import: Clicking on this will let you choose between the content, widget, and customizer to import specific demo data that you need.

You can select and upload the file for the data that you want to import.

WooCommerce Plugin

Woo Commerce is a powerful WordPress plugin to easily create all the essentials an eCommerce store needs — product catalogs, checkout page, site-wide announcements, etc.

Elegant Shop Pro seamlessly integrates with Woo Commerce and makes it a breeze to sell services and products online.

If you’ve never used WooCommerce before, you’ll first need to know how to set up WooCommerce for your WordPress website. Follow this official guide by the folks from WooCommerce to know how to set up WooCommerce and add products.

Adding Products To Your Store:

Although their official guide (link above) shows how to add products to your store, here’s a quick recap on how to do it:

Step 1. Login to your WordPress Dashboard and go to the Products section from the left sidebar.

Step 2. Click on the Add New button to add a new product. You’ll see a screen similar to the following:

Step 3. Give your product a name, and tweak the settings to your liking. For demonstration purposes, we’ll set up a product named “Product #2”.

Step 4. After everything’s done, hit the Publish button on the left to successfully publish the product to your store. ‘

Go to yourwebsite.com/shop (replace your website with your website’s URL) to see the store page in action. In our case, we’ve added a total of three products, and here’s what it looks like:

Customization Options for WooCommerce:

The theme has a couple of WooCommerce options that you can customize to your liking.

  • Store Notice: A site-wide notice text for your visitors. Make sure the Enable store notice checkbox is ticked.

After enabling store notice, here’s what it looks like:

  • Product Catalog: This section offers a host of options to sort the products at your shop page (accessible by default from yourwebsite.com/shop).
  • Product Images: Here you can tweak settings related to the images of the product and the thumbnails. By default, the values are set to 600×600 pixels.
  • Checkout Page Settings: Make changes to the checkout page for your store (accessible from yourwebsite.com/checkout by default) from here.

WP Forms Lite

For adding WP Forms, First set up your form from the dashboard. Select the legacy widget option while adding a block, then select WP Forms Lite and select the form that you have created.

Image sizes can impact the performance of your website, which is why we suggest you use the following sizes for images on the website (in pixels):

  • Blog Posts = 390px * 250px (Width * Height)
  • Products = 280px * 324px (Width * Height)
  • Team = 300px * 350px (Width * Height)
  • Featured = 550px * 250px (Width * Height)

Further Support

If you have any issues with how to install the theme, set up the pages, or customize the website elements, please submit an inquiry ticket at the Support page. You can also directly mail us at [email protected]

Theme Installation Service

If the theme installation process is a little too technical for you, we offer theme installation services at an extremely affordable price. Check out our Theme Installation service page for more info.

Theme Customization Service

If you want professionals to customize the theme for you, or make internal changes to the theme’s core elements to better suit your liking, our Theme Customization service might just be the right service for you.