Goodz WordPress Theme Documentation

Goodz theme is a WooCommerce-ready WordPress theme. Goodz provides a great balance of flexibility and simplicity, so creating an outstanding online shop is just a few clicks away.

Read how you can get the most out of the theme with the Goodz WordPress theme documentation.

Goodz WordPress theme documentation , step 1: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress Admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for a theme file on your computer.
6. Click on Install Now to start the install process.
7. After the installation is done, click on Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Goodz WordPress theme documentation are:

1. Jetpack
2. Kirki
3. Goodz Custom Post Types
4. MailChimp
5. WooCommerce
6. YITH WooCommerce Wishlist

Jetpack

Jetpack is the world popular plugin that extends WordPress features. In the Goodz theme, it is used to extend galleries’ features and protection. The official documentation is available here: https://help.themeskingdom.com/jetpack-plugin/.

Kirki

Kirki is a plugin that enhances theme experience by adding useful elements in the Customizer, like image position picker, font settings and such.

Goodz Custom Post Types

Goodz Custom Post Types plugin adds Slider and Brands post type to the theme. Both post types can be managed from the admin panel, and are used on the homepage.

MailChimp

MailChimp plugin allows you to add a MailChimp signup form widget to your WordPress theme quickly.

WooCommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

YITH WooCommerce Wishlist

Wishlist allows visitors to “save” items for later, without adding them to the cart. Items on the wishlist can be reviewed, and removed if they are no longer needed.

Goodz WordPress theme documentation, step 2: Theme setup

Before starting the setup, please install and setup the WooCommerce plugin. During the setup process, you will need to set up a store address, payment methods, and shipping methods. WooCommerce will also create all pages that are required for a shop – Shop, Cart, Checkout, and My Account.

To set up the theme, please follow the next steps:

1. First, go to Pages -> Add New, and create four pages – Home, Blog, Contact and About. For the Home page, set the Front Page template, while the other pages should use the Default template.
2. For the pages Contact and About, leave page title empty. In the pages’ admin panel, add (no title) notice. Later, in the Menus section, we will add navigation labels.
3. On the Contact page, you will need to insert your contact details. In our demo, we have added three, hypothetical store locations. To get the same layout, be sure to insert Heading block with the word Hello, and under it, add a columns block with three columns. Insert your contact details into those columns.
4. For the About page,  insert one image, and add a text.
5. Go to Settings -> Reading. Select the homepage to display a static page. For the Homepage, set the Home page, and for the Posts page, set the Blog page.
6. To create posts – go to Posts -> Add New and create several posts. Be sure to set featured images for each of them. All posts will be displayed on the Blog page.
7. Go to Products -> Categories. Create several product categories – in our demo, we have created categories Accessories, Bags, Jewelry, Blazers, Dresses, etc. Categories are used to group similar products and to display product groups in the navigation.
8. Create several products and associate them with the product categories. Be sure to set featured images for each of the products, and add other details – description, price, shipping details, etc.
9. Brands are used to showcase brand logos that are sold on your site. Create several brand posts – you will need to prepare a logo (we have created gray logos), set title, and a link (the link is optional for each entry).
10. In the Slider section, create three new slides. You will need to set featured images for all slides. In titles, you can use a simple HTML markup like strong and em to create bold and italic text.
11. To set up the main navigation, go to Appearance -> Menus. Create a new menu – add your items in hierarchical order to the menu. In our demo, we have created a Mega menu which is displayed under the Shop. Jump to Creating Mega Menu section for detailed instructions and a short video on how to set up this menu. Mark menu as a Primary and save changes.
    You will also need to create additional menus which will be displayed in the footer widgets – Social menu, with links to your social profiles; Company – with links to static pages, and Help – which will lead to Terms and Conditions page, and any other page that is related to your shop (like Shipping and Return).
12. Now, it’s time to build the homepage.
13. Go to Appearance -> Customize and set the following options:
    1. Site Identity: Set site logo and favicon.
    2. Content Options: Enable the author’s bio on a single post.
    3. Widgets: Add widgets to the desired widget areas. In our demo, we have set:
       • Footer Widgets 1: Three Navigation Menus – Company, Help, Social. Note: Only Navigation Menu widgets will be displayed inline, all other widgets will be stacked.
       • Footer Widgets 2: Add Text widget with the desired content.
       • Footer Widgets 3: Add the MailChimp subscription widget.
14. Theme Options:
    • Layout Settings: Set Choose Archive Pages Layout to full width. Single post/page should be set to Boxed mode, and Archive paging type should be set to Infinite post load.
15. Front Page Settings:
    • Front Page Slider Settings: Enable slider on the front page, and set the number of slides. Make sure that you have created the slides before enabling the slider.
    • Call To Action Section Settings: Set Call to action Layout to 2/3 + 1/3. This means that there will be two sections – one that is 2/3 of the width, and the second that is 1/3 of the width. Set cover images, titles, content, and links for each of the call to action sections.
    • Products Section Settings: Set a title for products section, and set the Display type to Carousel Slider. Select the desired category – in our demo, we chose Top Selling.
    • Brands Section Settings: Leave it to display all brand categories.
    • Front Page Sections Order: Here, you will need to enable sections that will be displayed on the homepage. Enable Call to action, Products and Brands sections.

That’s it. For additional tuning, check the theme options listed below.

Goodz WordPress theme documentation, step 3: The Customizer

The Customizer in the Goodz WordPress theme documentation is a great WordPress feature that allows you to customize the theme and set theme options. Customization options available in the Customizer:

1. Site Identity
2. Background Image
3. Menus
4. Widgets
5. Homepage Settings
6. Color Settings
7. Theme Options
8. Front Page Settings
9. WooCommerce
10. Additional CSS

Site Identity

Site Identity allows you to set your site logo, title, tagline, and icon. The Site Title is the name of your site, and it’s displayed in the header, where the logo is displayed. The Tagline is the short description or your motto, and it’s displayed under the title.

1. Logo: For the logo, set a JPG, JPEG, or PNG image.
2. Logo Size: Moving slider to the left or right will increase or decrease logo size. Changes in logo size will be displayed in the preview panel.
3. Site title: Name of your site. The Site Title is displayed only if the Logo is not set.
4. Tagline: Site punchline. The Tagline will be displayed together with a Logo or Site Title.
5. Display Site Title and Tagline: If enabled, both Site Title and Tagline will be displayed in the header.
6. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

Background Image

Depending on the use case, some users need to set a background image on their sites. In the Background Image panel, you can set a background image. After choosing an image, you will be able to set background behavior.

1. Preset: Defines image size – Fill Screen will stretch the image to fill the whole site; Fit to the screen will cover the only visible part of the site, and Repeat will keep the original image proportions, but it will repeat the image. The Custom option allows you to set background parameters manually.
2. Image Positions: Tool used to define the starting position of the image.
3. Scroll with Page: The option is available only if the background image is set to Repeat. If checked, the background will scroll together with the page content.

Menus

This option in the Goodz WordPress theme documentation allows you to manage created menus quickly. You can select what menu will be displayed as a Primary Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.

Widgets

The Widgets section allows you to manage widgets in widget areas quickly. This option allows you the same possibility as the Widgets option in the WordPress admin panel.

Homepage Settings

This option works the same way as Settings -> Reading. It allows you to set them to read the latest post or to use static pages for landing and blog pages.

Color Settings

In the Color Settings panel in the Goodz WordPress theme documentation, you can set a color scheme for global elements (background, paragraphs, headings, and minor elements), header (background and navigation), buttons and search modal.

Theme Options

The Theme Options panel contains theme-specific settings. Available options are:

• Font Settings
• Logo Settings
• Layout Settings
• Blog Featured Slider
• Footer Settings

Font Settings

In the Font Settings panel, you can manage font families and font weights for paragraphs, headings, and navigation.

Logo Settings

In Logo Settings panel in the Goodz WordPress theme documentation, you can upload a custom logo and set a retina logo. The logo should be in a JPEG, GIF or PNG format. The retina logo should be double the size.

Layout Settings

Layout settings will apply only to the posts archives and single post pages.

• Choose Archive Pages Layout: The option allows you to control the appearance of posts archives (posts landing page, category and tag archive). A page can be full width or boxed. Boxed page width is limited to 1200px.
• Display Posts in Two Columns layout: On all archives pages, posts will be displayed in two columns.
• Choose Single Page / Post: Layout for single post or page. It can be set to boxed or full width.
• Choose Archive Paging Type: Paging can be classic or infinite post load.
• Choose infinite load type: If Infinite post load is selected in the previous step, it can be triggered by click on the button or while user scrolls.

Blog Featured Slider

On the Posts landing page in the Goodz WordPress theme documentation, you can showcase a featured content slider, which is using featured images from Posts.

• Check to enable Featured Slider: If checked, the featured slider will be displayed on the posts landing page.
• Select Category: Select the post category which will be used for the featured posts slider.
• Exclude posts from this category to display in post listings: If enabled, posts showcased in the slider will not be displayed in posts listing.
• Enable fullwidth: If checked, the slider will be displayed in full width, instead of in the boxed mode.
• Autoplay slider: If enabled, slides will switch automatically.
• Select Posts Number: Select the number of posts that will be displayed in the slider.

Footer Settings

Footer Settings have only text area. Add text to the footer copyright area. HTML markup can be used for text formatting.

Front Page Settings

Front Page Settings in the Goodz WordPress theme documentation allow you to manage homepage sections – slider, call to actions, products, and blog; and to manage their order on the front page.

• Front Page Slider Settings
• Call to Action Settings
• Product Categories Section Settings
• Products Section Settings
• Blog Section Settings
• Page Content Section Settings
• Brands Section Settings
• Front Page Sections Order

Front Page Slider Settings

Slider Settings control the presence of the slider and its effects. This slider is displayed on the page with Front Page Template, and slides are populated from the Slider section in the admin panel.

1. Enable Slider section: Turn on this option to enable slider on the front page. Please note that this is a different slider than the slider on the Portfolio page. This slider is using items from the Slider section.
2. Number of slides to display: How many slides will be displayed in the slider.
3. Choose slides category to display: Select the slider category which will be used. Leave blank to use slides from all categories.
4. Autoplay the slider: If enabled, the slider will automatically change slides.

Call to Action Settings

Call to action blocks in the Goodz WordPress theme documentation are static and usually used to promote discounts, sales, when there are new products in a store, etc.

1. Choose Call To Action Layout: Call to action sections can be displayed in the following layout options: 1/3 + 2/3, 2/3 + 1/3, 1/3 + 1/3 + 1/3, 1/2 + 1/2, full-width. Depending on the selected layout, the number of sections will vary.
2. First Box: Bg Image: For a call to action section, you can set the background image.
3. First Box: Title: Call to action title that will be displayed on the front page.
4. First Box: Subtitle / Description: Text related to call to action section. HTML formatting is accepted.
5. Title & Subtitle Color: The color of a call to action heading and text.
6. First Box: Text Position: Position of the text on the cover image.
7. Call To Action Link Text: The text that will link to the desired URL.
8. Link Text Color: The color of the text that is used for the URL.
9. First Box: Call To Action Link: Where the previously entered text will lead.

Please note that, depending on the selected call to action layout, you will get additional fields to fill in.

Products Categories Section Settings

In this section are displayed product categories that you can showcase on the front page. Only categories with associated products will be displayed, and each category should have a cover image.

• Choose categories to display in this section: Select categories you wish to display on the homepage.
• Title for “Product Categories” section: Title that will be displayed before the categories section.
• Title color: Color of the title section.
• Text color: Color of the text that is displayed under the title.
• Text for this section that goes under section title: Text that is displayed under the title.
• Section background color: Background for the product categories section.
• Enable two column category display: Categories will be displayed in two columns. The default is three.

Products Section Settings

You can use this panel in the Goodz WordPress theme documentation to manage how products will be displayed on the Shop page.

1. Title for section: Title for the products section.
2. Subtitle for the section: Subtitle for the products section.
3. Choose the type of display: How the products will be displayed. In Carousel or as a product grid.
4. Choose the product category: What product category will be displayed.
5. Number of products to display: How many new products will be displayed.

The upper image shows the product slider, while the bottom one shows you what the product grid looks like.[/caption]

Blog Section Settings

The Blog section will display the latest posts from the desired category.

1. Check to enable Blog section on front page: Must be enabled if you wish to display this section on the homepage.
2. Choose the blog category to display: Posts can be pulled from the selected category or from all categories.

Page Content Section Settings

Here, you can choose from which page static content will be displayed. This means that you can create a static page with the content, and then select that page to showcase it on the front page.

Brands Section Settings

Only one option here – Select brand category which you can use when you wish to showcase brand categories on the front page. If none is selected, then all brands will be displayed.

Front Page Sections Order

All sections (Call to action, Products, and Blog) can be enabled or disabled and changed their order using a simple drag & drop method. After changing the order and saving the new order, the homepage layout will be updated.

WooCommerce

The WooCommerce panel in the Goodz WordPress theme documentation keeps settings specific for the Shop – layout, the products and categories which will be displayed, and theme-specific image sizes for the Shop.

1. Store Notice
2. Product Catalog
3. Product Images
4. Checkout
5. Shop Header Settings
6. Shop Layout
7. Product Social Share

Store Notice

Store notice is displayed as full-width notification above the main navigation. Usually, it is used to promote discounts, sales, or important messages to users.

Product Catalog

Product catalog in the Goodz WordPress theme documentation defines how WooCommerce pages – main store page and product category pages – will display products, how many and in what layout.

1. Shop page display: Choose what to display on the main Shop page – products, categories, or both.
2. Category display: Choose what to display on product category pages – products, subcategories, or both.
3. Default product sorting: Defines the parameter that will be used for default product sorting.

Product Images

Settings related to image width on the Shop and single product page.

1. Main image width: Main product image width, which will be used on the single product page.
2. Thumbnail width: Width for the main product image on the Shop page.
3. Thumbnail cropping: How the thumbnail will be cropped. There are three settings: 1:1 – the image will be cropped proportionally based on original dimensions; Custom – depending on the input value, cropping will use that proportion; Uncropped – image will be scaled down.

Checkout

The Checkout section contains settings related to the Checkout page. Here, you can customize which optional fields will be displayed and if they are required, and you can configure Privacy Policy and Terms and Conditions pages and notices.

Shop Header Settings

Shop Header Settings in the Goodz WordPress theme documentation are used to enable or disable the header navigation cart and My Account option.

Shop Layout

The Shop Layout panel in the Goodz WordPress theme documentation contains options that determine how users will shop, as well as options related to the products that will be displayed on the Shop page.

1. Choose Shop Layout: Shop can be displayed in full width or boxed mode. In the boxed mode, page width is limited to 1200px.
2. Choose Layout Type: Products can be displayed on a regular grid or in a masonry layout. In the Regular grid, images are the same size, while masonry images are proportionally scaled.
3. Shop widget area type: How the sidebar with widgets will be displayed – as a classic sidebar or as a pop-up.
4. Choose Shop Sidebar: Shop sidebar can be on the left or right side, or disabled.
5. Number Of Product Columns: In how many columns products will be displayed.
6. Product display type: Products can be displayed in a standard mode (featured image with title and price) or in gallery mode, where only the image is displayed.
7. Enter number of products to display on shop page: How many products will be displayed on the Shop page.
8. Choose Shop Paging Type: Shop page can use classic pagination, or infinite scroll.
9. Choose product infinite load type: If an infinite load option is selected in the previous step, you can set how the load will be triggered – with the click on a button, or when a user scrolls down the page.

Product Social Share

Enable social sharing for products, and what networks will be displayed.

Additional CSS

The Additional CSS section in the Goodz WordPress theme documentation is used for custom CSS classes, without interfering with theme original CSS files or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some most used classes.

Useful CSS classes