Gogo Theme

Installing Theme

  • First, download the Gogo theme zip file.
  • Login to WordPress dashboard.
  • Go to Appearance > Theme.
  • Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
    Activate the theme.

theme installing gogo

Note – For enabling FrontPage Section (Homepage Layout, Big Image with Typewriter, Services, About Us, Clients & Testimonial, Team, Video ribbon section, Blog post, Social icon option etc.) in our theme, download the Hunk Companion. This plugin will work with Free version, For More features go with Gogo Pro addon.

Installing Gogo Pro Addon

  • Download the plugin Gogo Pro plugin from Member’s area.
  • Go to Dashboard > plugin , click on “Add New” button and then “Upload Plugin”.
  • Select the zip file of the plugin Gogo Pro and activate the plugin.
  • After activating the plugin all unlimited customize options will be activated in customize panel.
  • Note – This pro plugin will add more features in our theme and make it ore powerful.

How to Setup Homepage

  • Go to Dashboard > Pages > Add new. Enter a page title,choose template (Home page layout) and publish.
  • homepage setup gogo

  • After that go to the Settings > Reading and set that newly created page as a Front page.

Section Scrolling Menu

To get scrolling menu please follow these steps:-

  • Go to Appearance > Menus and create a new custom menu.
  • Add a new link from “links” tab.
  • Here you need to add section id in “URL” field.
  • Please check id for all sections, you can use them.
  • Service = #service
    About Us = #about_us
    Woocommerce = #woocommerce
    Call To Action = #call_to
    Portfolio = #portfolio
    Team = #team
    Pricing = #Pricing
    Clients & Testimonials = #clients
    Video Ribbon = #Video-Ribbon
    Blog = #blog
    Contact = #contact
    Social = #social
    Counter =
    Skill = #skill
    Single Project = single_pro
    Faq = #faq

Note – These are default section id’s you can change them in the customize panel.

Header Menu

  • Main Header menu – Display menu on Main Header. Just create a menu and select the display location as “Main header menu”.
  • Header Above Menu – Display menu above main header. Just create a menu and select the display location as “Header above menu”.
  • Header Below Menu – Display menu below main header. Just create a menu and select the display location as “Header below menu”.
  • Footer Above Menu – Display menu above main footer area. Just create a menu and select the display location as “Footer above menu”.
  • Footer Below Menu – Display menu below main footer area. Just create a menu and select the display location as “Footer below menu”.

Site Identity

This setting will allow you to set site identities like Logo, site title, tagline, site icon. Go to Appearance > Customizer > Site Identity

Logo –

You can upload a logo image here. Click on “Select logo” option. Upload the logo image.

Retina Logo –

Retina logo size is same as the size of normal logo. For example: If the normal logo size is 100×100 pixels, then the retina logo image size would need to be 200×200. Retina logo is best suitable for high definition screens, so that your logo won’t look blurred.

Logo Width –

You can adjust the width of the logo by increasing or decreasing the scrollbar.

Site Title & Tagline –

In site title just write the text you want to show in the title with a tagline. You can enable or disable the title & tagline from “Display Site Title and Display Tagline” option.

Site Icon –

This will show icon in your browser tab. Just upload an image in site icon and show it in your browser tabs.
Site identity gogo

Section Ordering (Pro Feature)

  • For Section Ordering setting, go to Appearance > Customize > Frontpage Sections > Section Ordering.
  • You can Change the order of any particular section.

FrontPage Section

All the front page sections can be found in Appearance > Customize > FrontPage Sections.
frontpage section gogo (1)

Homepage Layout Settings

For Homepage Layout settings, go to Appearance > Customize > FrontPage Sections > Homepage Layout Settings .

  • Padded Layout – By checking the box you can disable the padding from the outside.
  • Numbered Section – By checking the box you can disable the “Numbers” from each section.
  • Centered Layout – By checking the box it will align your section content in center.
  • Vertical Navigation – By checking the box you can Remove the Vertical Navigation.

Big Image with Typewriter

  • For Big Image with Typewriter setting, go to Appearance > Customize > FrontPage Sections > Big Image with Typewriter.
  • This is the top most section of homepage. Here, you can add an image slider or a video in the background. You can mute the audio of video, by checking the Mute Audio box option.
  • Add Typewriter & Caption, you can add before and after text. You can also add fancy text and pick color for highlighting your fancy text. For button you can add the text and link in the text area.
  • You can change the font size, line height and Letter spacing of typewriter text.
  • Choose layout – (Pro Feature) You can choose three different layouts to show text and image in homepage.

big image with typewriter gogo

Service Section

  • For Service section, go to Appearance > Customize > FrontPage Sections > Service Section.
  • Disable section – You can disable your section by checking the box.
  • Big Heading & Small Heading – Add heading and subheading for section.
  • Slider Setting – By checking the option you can display your slider in slide way.

About Us section

  • For About us section, go to Appearance > Customize > FrontPage Sections > About us Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small Heading – Add heading and subheading for section.
  • Section Description – Add your description here.
  • Upload Right Side Image – Upload an image for your about us section.

WooCommerce Section

  • For WooCommerce section, go to Appearance > Customize > FrontPage Sections > WooCommerce Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small Heading – Add heading and subheading for section.
  • WooCommerce Shortcode – Put the shortcode here.

Call to Action Section

  • For Call to Action section, go to Appearance > Customize > FrontPage Sections > Call to Action Section.
  • Disable section – You can disable your section by checking the box.
  • Heading – Add heading for your section.
  • Button Text – Add text for call to action button.
  • Button Link – Add link for call to action button.
  • Background Image – Upload an image for background.

Portfolio Section

  • To add portfolio go to the Dashboard > Portfolio Gallery > Add New. Featured image that you upload in each portfolio will be displayed at the home page.
  • For Portfolio Section, go to Appearance > Customize > FrontPage Sections > Portfolio Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small Heading – Add heading and subheading for section.
  • Number of Portfolio Images Show – Set number of portfolio post to display at home page.
  • Select Portfolio Type – Here you can select standard portfolio style.
  • Show Portfolio Category – Check the desired category to display at home page.

Team Section

  • For team Section, go to Appearance > Customize > FrontPage Sections > Team Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Display in a Slide Way – By checking this option you can display your team box as a slider.
  • Team Content – You can add the content of team boxes as you want. Content like Image, title, sub title, text, link and social icon can be added.

Pricing Section

  • For Pricing Section, go to Appearance > Customize > FrontPage Sections > Pricing Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Terms & Condition – Add text of terms & condition.
  • Display in a Slide Way – By checking this option you can display your team box as a slider.
  • Highlight Popular Pricing Table No. – Put the table no ( Pricing Box ) you want to highlight in this section.
  • Pricing Content – You can add the content of pricing boxes as you want. Content like title, sub title, price, text, link and button text can be added.

Clients & Testimonial Section

  • For Clients & Testimonial Section, go to Appearance > Customize > FrontPage Sections > Clients & Testimonial Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Testimonials Content – Here you can add the content of testimonials as you want. Content like Image, title, sub title and text.
  • Clients Logo – In Clients Logo you can upload an image and link of your clients.

Video ribbon Section

  • For Video ribbon Section , go to Appearance > Customize > FrontPage Sections > Video ribbon Section .
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Enter the video URL – Put the desired video URL (Iframe embed URL) in the text area.
  • Background Image – Upload an image for the section background.

Blog Section

  • For Blog Section , go to Appearance > Customize > FrontPage Sections > Blog Section .
  • Disable section – You can disable this section by checking the box.
  • Latest Post Category – You can select the category you want to show in your blog section.

Contact Section

  • For Contact Section , go to Appearance > Customize > FrontPage Sections > Contact Section .
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Contact Us Shortcode – First download & activate the plugin Lead form builder. Create a form and insert shortcode in the text area.
  • Address – Put the address in the text area.
  • Mobile Number – Put the mobile number in the text box.
  • Email – Add the email address.
  • Background Image – Upload an background image for the section background.

Social Section

  • For Social Section, go to Appearance > Customize > FrontPage Sections > Social Section.
  • Social Content – Add the social content like icon, color, text and link.

Counter Section (Pro Feature)

  • For Counter Section, go to Appearance > Customize > FrontPage Sections > Counter Section.
  • Disable section – You can disable this section by checking the box.
  • Counter Content – Add the counter content like title and numbers.

Skill Section (Pro Feature)

  • For Skill Section, go to Appearance > Customize > FrontPage Sections > Skill Section. This section will show
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Skill Content – Add the counter content like title, color and numbers.

Single Project Section (Pro Feature)

  • For Single Project Section, go to Appearance > Customize > FrontPage Sections > Single Project Section.
  • Disable section – You can disable this section by checking the box.
  • Small heading – Add subheading for section.
  • Number of Projects Show- Set the number of single projects to show on your site
  • Choose Project – From the drop down option panel choose Random, Recent or featured projects you want to show at your home page.
  • Select Category – Check the desired category of single project to display at home page.

Faq Section (Pro Feature)

  • For Faq Section, go to Appearance > Customize > FrontPage Sections > Faq Section.
  • Disable section – You can disable this section by checking the box.
  • Big Heading & Small heading – Add heading and subheading for section.
  • Rightside Image Upload – Upload an image here, this image will be display on the right side.
  • Faq Content – In Faq content you can add Question title and text.

Color & Background option in Section (Pro Feature)

  • This is a pro feature. You’ll can change the overall color & background in each section.
  • For Color & background option, go to Appearance > Customize > FrontPage Sections > desired Section.
  • Pick color from the color bar for each section item and you can also upload a background image. Decrease the color opacity to show color overlay background image.

Advanced Layout Setting

For Advanced Layout Setting, Go to Appearance > Customizer > Advanced Layout Setting.

Container

In container overall site content will appears. Container will exclude the header & Footer area. You can manage your container by doing the below settings in it. These settings will be applicable for Page, Blog / Archives, Blog Single and Woocommerce Pages.

  • Full width- . In wide site layout the main body goes with the edge to edge of the browser whereas the content is managed by the container width.
  • Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
  • Max Width – In max width site layout, the main body is set to a certain width which includes the content, header & footer whereas the container max width can be managed.
  • Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
  • Top/Bottom Margin – You can control the Top/Bottom Margin of your site using this option.

Header

For header setting, Go to Appearance > Customizer > Advanced Layout Setting > Header.

Above Header

It appears right above the Main header and allows you to show multiple elements. You’ll get three different layouts. In each layout column you can show elements like social icons, menu, search, Text, Widgets. Here styling can be done using the color scheme, height, border and many more.

Main Header

In main header your logo and main navigation will be displayed along with Menu.
To show navigation menu in your “header” first set the menus from the dashboard. Go with this link.

  • With Main header setting, you can modify your overall header by adding different layouts with other content. Five different type of layouts shown in below image.
  • Last Menu Item – You can show search icon, social media profile, text, button or widgets as the last menu item.
  • Bottom Border size – This will add a separation between Main header and Below Header. You can adjust the width by increasing or decreasing the scroll bar or enter the value in text box.
  • Bottom Border Color – Pick desired color for your “main header” border. It will only appear when you add a border in your header.
  • Enable Full Width Header – This will show your Header in Full Width area.
  • Mobile Menu Open – Choose the Mobile menu alignment left. right or center.
  • Mobile Header Alignment – Display your header as a stack or inline aligned for mobile devices.
  • Color scheme – Select the desired color scheme for your above header by clicking on the image. You can show your text in white and background in black or vice versa.
Below Header

It appears right below the Main header and allows you to show multiple elements. You’ll get three different layouts. In each layout column you can show elements like social icons, menu, search, Text, Widgets. Here styling can be done using the color scheme, height, border and many more.
below header gogo

Sticky header will be fixed on the top of your site when you scroll the page. You can easily access the menu from any part of the page. Check the box and enable sticky header for above, below and Main header. Two animation effects are there Fade and Slide. While you scroll your site selected effect will be shown.

Transparent Header

Transparent Header will simply merge your main header and content.

  • Enable Front Page Header Transparent – Check the box and enable transparent header. This will display a transparent header on the Front Page.
  • Enable Internal Pages Header Transparent – Check the box and enable transparent header for Special pages (like archive,404,search, shop, product page etc.)

For Sidebar setting, Go to Appearance > Customizer > Advanced Layout Setting > Sidebar. You can set the sidebar and its alignment as “Left”, “Right” or “No sidebar” ( it will disable your sidebar).

  • Default Layout – It will work for overall site. If you choose “Default” option in Page, blog, blog/archive layout then it will follow the sidebar alignment which you have set in the Default layout.
  • You can also set for Page, blog, blog/archive, WooCommerce.
  • Sidebar Width (%) – You can adjust the width of sidebar by increasing or decreasing the scroll bar.

Blog

For Blog setting, Go to Appearance > Customizer > Advanced Layout Setting > Blog. In Blog page you can show collection of post grouped by category, author, date and tag etc.

Blog Archive
  • Grid Layout – Select the number of columns (up to 4) to display your blog posts. From one column to four columns. You can make your first post large.
  • Add Space Between Post – Check this option and add space between two blog posts.
  • Remove Featured Image Space – Remove the padding between the featured images of two blog posts. Use this along “Add Space Between Post” option.
  • Enable Date Box – You can add the date box on the featured image. Here you will get three different styles Circle, Diamond, and Square.
  • Enable Drop Cap – You can enable drop cap in your paragraph.
  • Blog Post Content – In blog post content you can show your full content, No content and Excerpt length. Excerpt length allows you to set content length you want to show in your blog page.
  • Post Pagination – It will provide you better navigation for your blog page. You can choose an option between “Numbered”, “Load More” and “Infinite Scroll”.
  • Blog Structure – You can enable or disable “Featured Image” and “Post Title & Meta”.
  • Blog Meta – You can disable or enable the following elements, These options will work for each post in a page-
    • Comment – Hide or show your comment from post by just enabling or disabling eye.
    • Category – Using this option you can show or hide category from blog post.
    • Publish date – Show or hide the publish date of your post.
    • Author – In blog post you can show or hide your author name.
  • Post Meta Separator – You can add separation to the meta tags. In a text field, you can put the desired separator you want to display between.
  • Blog Content Width – Blog content width allows you to define the width of the container in your blog page.
  • Choose “Default” value then it will automatically take width which is pre-defined. However, you can also add your custom width by just choosing the “Custom” option. As soon as you choose this option it will open a new field to enter your value. Either you can drag the bar to change the width or can enter your value.
  • Note – Go to dashboard > Reading Settings. You’ll see this option their “Blog pages show at most”. Enter the number of posts you want to show on your blog page.
Single Post

For single post setting, Go to Appearance > Customizer > Layout > Single Post. A single post will show complete blog post. It will cover all content of posts such as featured image, description, post meta, and all important links.

  • Single Post Content Width – Change the width of your post page by increasing/decreasing the scroll bar or just enter the value in the text box.
  • Single Post Structure – Disable or enable the “Featured image” and “Post title & meta” from your post page. Drag & drop the elements and change their position according to your need.
  • Single Post Meta – Enable or disable the “Comment”, “Category”, “Author” and “Publish date” of a post using this option. Drag & drop the elements and change their position according to your need.
  • Meta Separator- You can add a separator between the meta tags, just write the “separator character” in the text box and show separation in them.
  • Enable Drop Cap – The first large capital letter of any paragraph is known as “Drop Cap”. Enable or disable the drop cap at the beginning of the text.
  • Remove Featured Image Padding – It will remove the spacing or padding from the featured image. It is only applicable for single page post.
  • Display Author Info – Check the box, Show the “Author bio” in a single post.
  • Display Related Post – You can show “Related post” under your post. It will automatically display related post which have same category or tag under the main post.

For this setting, Go to Appearance > Customize > Layout > Footer.
In footer area you can add important content and navigation option of the site. Show your “Copyright text” Terms and Conditions link or privacy policy links” are added there and more stuff like widgets, social icons etc.

It appears right above the footer widget and allows you to show multiple elements. You’ll get three different layouts. You can show elements like social icons, menu, search, Text, Widgets in each layout column. Styling can be done using the color scheme, height, border and many more.

In Footer Widget there are eight different Bottom Footer Layout. You can add unlimited widgets in your footer by selecting desired layout.

  • Layout 1 – Single column widget area. Widgets will occupy the 100% area of the Footer Widget.
  • Layout 2 – Two column widget area. Widgets will cover 50-50% area of the Footer Widget.
  • Layout 3 – Three column widget area. Widgets will occupy 33% widget area in each column.
  • Layout 4 – Four column widget area. Widgets will occupy 25% widget area in each column.
  • Layout 5 – You will get three column to add widget but left column will occupy 50% area and remaining two column will take 25% of the area in each column.
  • Layout 6 – You will get three column to add widget but left most and right most column will occupy 25% width and the center column will occupy 50% of the widget area.
  • Layout 7 – You will get two column to add widget, left column will occupy the 60% of area and right column will take the 40% of the area.
  • Layout 8 – You will get two column to add widget, right column will occupy the 60% area and left column will take the 40% of the widget area.

Note – You’re absolutely free to add unlimited widgets in each widget area. Just click on “Go to Widget” button and add widgets.

Widget width – Using this option you can change the width of footer area.

  • Content width – It will take the width of the content area which you have set in the container width.
  • Full width – In “full width” your footer will occupy 100% of the screen’s width. It will simply fit the edge to edge of the screen.

Color Scheme – Click on the image and Select the color scheme for your footer. You can show your text in white and background in black or vice versa.

It appears below main footer widget area and allows you to show desired elements like social icons, menu, search, Text, & Widgets. These elements will be displayed on the bottom-most area of the footer in your site.

Scroll to Top

For Scroll to Top, Go to Appearance > Customize > Advanced Layout setting > Scroll To Top. You can add back to top button on your site. This button will easily scroll your site to the top of the page in just one click on the button.

  • Position – You can select position of button.
  • Icon Color – Pick desired icon color for your button.
  • Icon Background Color – Pick desired color for your button background.
  • Icon background Radius – You can change the radius of your button by sliding scroll bar or just enter the value in text box.
  • Icon Hover Color – Set the hover color of icon when you put mouse over it this color will display.
  • Icon Background Hover Color – You can change the hover color of icon Background when you put mouse over it this color will be shown in the background.

Color & Background

For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.

  • Theme Color – In theme color you can change the default color all over the site. it will cover color of elements like Date box color, Button etc.
  • Link Color – Pick the color for all the links present on your site.
  • Link Hover Color – Pick the link hover color. Whenever you hover your mouse over the link it will show that color.
  • Text Color – Pick color for the text of your site.
  • Title Color – Pick color for all the title of your site.

Typography

Typography makes your content visually stunning. You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.

Font Subsets –

Go to Appearance > Customizer > Typography > Font Subsets.
Google font families support every subset. With this option you’ll get subsets like Latin, Latin-ext, Cyrillic, Cyrillic-ext, Greek, Greek-ext, Vietnamese and Arabic. Without these special characters won’t be displayed at your site. Just check the desired subset and enable it on your site.

Base Typography

Typography is the best way to show your content in a unique and attractive way. It makes your content visually stunning. You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site make it a creative website.

For Typography, Go to Appearance > Customizer > Typography > Base Typography.

  • Body – Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
    You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
  • Title – Choose font of your title. This will set typography for overall site titles. You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.
  • Content – This will set the overall typography of single page from heading H1 to H6.
    • Heading (H1) – Best Suited for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
    • Heading (H2) – Best Suited for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
    • Heading (H3) – Best Suited for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
    • Heading 4 (H4) – Best Suited for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
    • Heading 5 (H5) – Best Suited for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
    • Heading 6 (H6) – Best Suited for h6 headings. Choose font family and adjust the font size, line height & letter spacing.

Site Button Setting

For Site Button, Go to Appearance > Customize > Site button. Site button allows you to change the color of each button.

  • Button Text Color – You can pick desired color for your button text.
  • Button Background Color – You can choose desired color for your button background.
  • Button Text Hover Color – Choose the text to hover color for your button text, whenever you take your mouse over the button it will show the button text hover color.
  • Button Background Hover Color – Choose the background to hover color for your button, whenever you take your mouse over the button it will show the button background hover color.
  • Button Border Radius – For button border radius Increase or decrease the scroll bar and change the border radius of a button. It will change the outer border’s edge of the button.

Pre Loader

For Pre loader, Go to Appearance > Customizer > Pre Loader.

  • For enablling the loader, check on the box “Enable loader”. Preloader will be shown when you load or refresh your site.
  • You can upload a GIF or an image as a preloader or you can pick background color instead of image.

Social Icon Setting

For adding social profile links, Go to Appearance > Customize > Social icon.

  • You can show these social icon in the header as well as at the footer. To show social icons just put the likns in the text area.
  • By default it will follow the color scheme but You can also set the “original color” for each social icon.

Search icon & Search box

For Search icon, Go to Appearance > Customize > Search > Search icon.

  • Icon Font size – You can adjust the size of icon using this option. Enter the value in the text box or slide the bar.
  • Icon Radius – You can adjust the radius of an icon. Enter the value in the text box or slide the bar.
  • Icon Color – Pick any desired color for icon from the color bar.
  • Icon Border Color – Using this option you can pick any desired color for icon border.
  • Icon Hover Color – Pick any desired color for icon hover. ( When you hover the mouse on the icon it will show your selected color.
  • Icon Background Color – Pick any desired color for icon background.

For Search box. Go to Appearance > Customize > Search > Search box.

  • Width – You can adjust the width of search box. Enter the value in the text box or slide the bar.
  • Height – You can adjust the height of search box. Enter the value in the text box or slide the bar.
  • Border Radius – You can adjust the border radius of box. This will change the outer border edge of the box. You can increase or decrease the border-radius or enter the desired value in the text box.
  • Placeholder Font Size – This option will help you in adjusting the font size of the placeholder text. slide the scroll bar or enter the desired value.
  • Icon Size- Change the size of the icon in a box by increasing or decreasing the scroll bar or enter the value.
  • Placeholder Text- Write your Placeholder Text in the text box.
  • Search Box Background Color- Pick desired color for your Search Box Background.
  • Placeholder Text Color- Pick desired color for your Placeholder Text.
  • Border Color- Pick desired color for your search box Border.
  • Icon Color- Pick desired color for search box icon.

WooCommerce

For WooCommerce setting. Go to Appearance > Customize > WooCommerce
First Setup your WooCommerce. Go to your WP dashboard, Install WooCommerce plugin from WordPress.org and activate it.

For WooCommerce General setting. Go to Appearance > Customize > WooCommerce > General

On Sale Badge –

You can show a “circle”, “diamond” and “square” on the upper left side of your product. It will automatically display alongside with the product which is on sale.

Cart –

Cart shows the number of the product you have added in your cart for the final purchase. From this option, You can display Cart Icon in the Menu.

Visibility – You can disable or enable cart icon from your site. You can choose the desired option from the drop-down box.

Show as – You can display your Cart as Icon, Icon & Total (Price total of items you have added in your cart), Icon & Cart count (Total number of items added in cart) or Icon & Cart Count & Total.

Drop-down Color scheme – Choose desired color scheme for your Drop-down Cart.

Note – To create “Cart Page ” Go to Dashboard > Pages > Add New page > Put this Short-code “[woocommerce_cart]” in the editor. Publish it. This will create a cart page on your site.

Shop Page –

For Shop Page. Go to Appearance > Customize > WooCommerce > Shop Page
Set the shop page first, Create shop page, Navigate to WooCommerce tab > Setting > Products. Now click on “select a page” choose your shop page and save it.

  • Products per row – You can enter the number of products which will be displayed in each row. For example, if you set the number of products as “3”, in each row “3” products will be displayed.
  • Rows per page – You can enter the number of rows you want to show in each page. For example, if you set the number of rows as “4”, on each page “4” row of products will be displayed.
  • Product Image Hover Style – You can choose the desired hover style and show your product in a unique way. You can display your product in “Zoom” or as “Swap” hover style.
  • Zoom – It is a kind of basic magnify effect on your product, it will zoom out your product while hovering the mouse over it.

    Swap – In swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look. For “Product Gallery option” Go to a single product page on the rightmost side you can set your product gallery images.

  • Product Structure – Here you can Disable or Enable the elements like “Category”, “Title”, “Ratings”, “Price”, “Add to cart” and “Short description”. You can also change their position by drag & drop the desired element.
  • Product Content Alignment – You can Align your product content “Left”, “Right” or “Center”. Click on the tab and set the desired position.
  • Product Box shadow – You can highlight your product with a Shadow in the background. Set product box background shadow by just scrolling the bar or enter the value in the text box.
  • Product Box shadow on Hover – Set product box on hover shadow by just scrolling the bar or enter the value in the text box. Whenever you hover your mouse on the product it will show a shadow in the background.

Single Product –

You can set up your single product. For single product, Go to Appearance > Customize > WooCommerce > Single product setting.

  • Content Width – You can adjust the content area of your single product page. Increase or decrease the width by scrolling the bar or just enter the value in text box.
  • Product Content Alignment – You can align your content “left”, “right” or “center”. Click on the tab and set desired position.
  • Product Structure – You can Disable or Enable the elements like “title”, “ratings”, “price”, “add to cart”, “meta” and “short description”.Change their position by drag & drop.
  • Product Description Tab – You can show a short description of the product. Write product short description in the product editor.
  • Product Tab Layout – You can show your product short description in horizontal or vertical view in tablet & mobile devices.
  • Up Sell Product – These are the items that your customer might prefer instead of the product currently viewed. Items which is offered as an up-sell might be more popular, have better profit margin or a higher quality. Check the box “Display upsell product”. If you check this box you can now set the Number of Column and Number of up-selling Product you want to show.
  • Related Product – Related product are the items which are similar to the product your customer is viewing. Check the box “Display related product”. If you check this box you can now set the Number of Column and Number of related Product you want to show.