Barberry - Modern WooCommerce Theme

Contents

1. Theme Installation

2. How to import the demo content?

3. Child theme

4. How to update the theme?

5. How to upload my Logo

6. How to disable the Sticky Header

7. Navigation

8. Customizing Typography

9. How to add page/shop category header background image

10. Shop - How to show product categories and category icon to the header

11. Shop / Product - How to enable product attribute swatches.

12. Shop - Change the No. of Product in the Shop

13. Shop - Product Image Sizes

14. Shop - Sidebar Setup

15. Shop - How to enable filters in Shop?

16. Shop - How to enable Wishlist

17. Shop - How to enable Compare

18. Shop - Display Type: Categories, Products or Both

19. Shop - Setting Free Shipping

20. Product - How to create a size guide table

21. How to Add Meta Titles and Descriptions for Pages

22. Missing style.css — Installation Error

23. Outdated WooCommerce Templates

24. Error: "Are you sure you want to do this?..."

25. Fatal error: Allowed memory size of xxxxxxxx bytes exhausted

26. How to setup Newsletter in Footer

27. How to configure Social login

28. What is WooCommerce?

29. WPBakery Page Builder

30. WooCommerce Guided Tour

31. Wordpress & Woocommerce resources

32. Barberry Updates History

33. Theme requirements

1. Theme Installation

You must be excited about starting your new project, so let's just get on with it. It won't be long until you get it to the point when you can actually start working on your site. The following steps will get you there.

1. Get the Theme’s Files

Save the theme's files on your computer first. Navigate to the Downloads section in your Envato account, that's where all your purchases are kept, then click the green Download button to grab the theme, make sure you’re getting the “Installable WordPress file only”.

2. Upload and Activate the theme

Now that the theme's files are saved on your computer, you can log into WordPress administration dashboard to upload and install it.

2. How to import the demo content?

The Setup Wizard

The theme comes with a setup wizard making it really easy to install the plugins coming with it and import the demo content in two simple steps. As soon as the theme is activated, the setup wizard will start automatically.

This is what you should be seeing on your screen:


Setup Wizard Step 1: Server Requirements


Setup Wizard Step 2: Install Child Theme


Setup Wizard Step 3: Install Plugins

The following plugins are required by the theme’s demo imported, so it can import dummy content in the next step.

Setup Wizard Step 4: Import Content

The importer will help you start with the pre-built layouts from the demo and dummy content such as product pages, blog posts and widgets. In case you're using the theme on an existing site you may not want to import the demo content. In that case, simply skip this step.


You can start working on your site now

Good luck with your project!

Alternative Importing Method

Importing the demo content is part of the setup wizard but it can also be done using the One Click Demo Import plugin, by navigation to Appearance > One Click Demo Import. 

The importer will help you start with the pre-built layouts from the demo and dummy content such as product pages, blog posts and widgets.

You will find demo files in full theme package in /Demo Content/ folder.


3. Child theme

A child theme is a theme that inherits the functions and styles of the other theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. My theme has full support for creating child theme.

How to create child theme 

A Guide To: WordPress Child Themes Development

4. How to update the theme?

Connect your Envato Account to your WordPress site using the Envato Market WordPress Plugin to receive updates for all your ThemeForest and CodeCanyon purchases. 

If the plugin is already installed and activated you should see the Envato Market section in your WordPress administration dashboard. Follow the steps on screen to enable updates.

Once the Envato API connection is made from the Settings page, a list of available Themes will be shown. This will list all WordPress Themes that have been purchased through the Envato Market / ThemeForest. Any available theme updates can be applied here or from the standard WordPress update page at Dashboard > Updates.

Cannot find the Envato Market section?

Sounds like the Envato Market WordPress Plugin is not installed/activated.
Go to Appearance > Install Plugins to Install and Activate it; or download the zip file and manually install it via Plugins > Add New.

How to get the latest version of the theme as a zip file?

You can always grab it from the Downloads section on ThemeForest.


5. How to upload my Logo

It's probably one of the first things you may want to do when you start customizing the theme to align its looks to your brand. To upload your logo, navigate to Appearance > Customize >Header > Logo.

Logo Light will be displayed on transparent (light) header.

Sticky Logo will be displayed on sticky header.

For tablet & mobile theme uses original Logo. You can set logo max height for mobile and sticky header


6. How to disable the Sticky Header

When enabled, the sticky header feature will display a minimized version of the header while the user scrolls down through the page.

The option you're looking for can be found by navigating to  Appearance > Customize > Header > Sticky Header:


7. Navigation

1. Create New Menu

Following these steps to create a menu.

Step 1 – Go to Appearance > Menus

Step 2 – Click the create a new menu link to create new menu.

Step 3 – Select items from the left meta boxes and click Add to Menu

Step 4 – On the right, feel free to drag and drop menu items to organize them

Step 5 – When you’re done moving menu items, check a menu location at the bottom of the page

Step 6 – Click Save Menu

By default WordPress only shows the basic menu items, but you can scroll on top page, click to ‘Screen Options’ and check section menu you want to show. Such as Product Categories, Products.

2. Create New Mega Menu

The theme adds some options to the menu item. They allow you to config mega menu. Click the Settings link in every menu item to show options.

Mega Menu Content

  1. Mega Menu tab. Only top level items can have this tab.
  2. Turn on or off the mega menu item. Only top level items can enable the Mega Menu
  3. The width of the mega menu. It is optional. The default value is 100%. It affects on the top level items only.
  4. The columns of the submenu.
  5. Increase or decrease the number of the columns.
  1. Mega Menu Background tab. Only top level items can have this tab.
  2. Options of background such as background color, background image, background repeat…

Menu Content

  1. Menu Content tab. Only second level items can have this tab.
  2. The text area allows you to enter any custom content for the menu items, like HTML or shortcodes.

Menu General

  1. Menu General tab. Only second level items can have this tab
  2. Hide the title of this menu.
  3. Display the HOT badge on menu items.
  4. Display the NEW badge on menu items.
  5. Display the TRENDING badge on menu items.


8. Customizing Typography

Barberry supports rich typography customization options. You are free to select any of 900+ Google Fonts available from WordPress Customizer panel.

Choosing Fonts

Being in WordPress Customizer navigate to Customizer → Typography

Using Adobe Typekit

The theme supports integration with Custom Adobe Fonts plugin. This enables you to use your Adobe Typekit fonts in the theme. To make this plugin work you need to get Project ID from Adobe Fonts

Fonts for the project pre-selected on Adobe Fonts. Make sure to grab Project ID from project page

Set Project ID in Appearance → Adobe Fonts

If you've done everything correctly, a new font name should appear in fonts selectors in WordPress Customizer → Typography

Custom font is fetched from Adobe Fonts and ready to use


Uploading Custom Fonts

In Barberry theme you may also upload and use your own fonts. This feature is available in Custom Fonts options page in admin panel. Let's figure out the fonts uploading process step-by-step.

▶️️️️️ Step 1.

Before uploading the fonts into your website, you need to make sure that they are ready for use in web. The theme supports popular .woff and .woff2 web-font formats. If your font package is missing files with those extensions (for example, you may have only .ttf or .otf files), you will need to convert the fonts files to .woff format. Otherwise, feel free to skip this step.

There is a handy free online tool called Transfonter It allows to convert fonts to web-compatible format.

Upload your font files to the tool. Make sure that Family support is on and woff format is selected.

TIP

woff is the universal format supported across many modern browsers so it's recommended to selection. You can read more information related to the different fonts formats here in Font formats page

Click Convert button. You should get a download link with the .zip archive of your fonts package.

Unzip the archive and make sure that .woff font files are there.

▶️️️️️ Step 2.

Go to Custom Fonts options page in admin panel. Click on Add Custom Font button and enter your font name first. In the example font is named "Gilroy"

Now you need to upload your .woff font files to WordPress and select the appropriate font weight of the uploaded file.

The process of uploading other font weights is the same. Add Font File → Upload .woff File to Media Library → Select Font Weight → Repeat

After you are done with this, click Save Changes button in the top right corner. You should get a message that invites you to go to WordPress Customizer.

▶️️️️️ Step 3.

Open WordPress Customizer and go to Typography In the dropdown list you should see your new font name under Custom Fonts The custom font is now available to select and preview in live. Don't forget to click Publish to save changes.



9. How to add page/shop category header background image

How to add Header background image for Product Category

To add page header image globally, navigate to Appearance > Customize > Header > Page Heading. 

The options you're setting up here are treated as global settings, which means all the pages of your site will be affected.

To add page header image for current page open/create page and navigate to Page Settings:

The same for Shop archive page:

2. How to add Header background image for Product Category

Go to the Products > Categories and add/edit category and select image in Image for category heading section.

10. Shop - How to show product categories and category icon to the header

1. How to show product categories

To show product categories in header, navigate to Appearance > Customize > WooCommerce > Shop Catalog

2. How to add product categories icons

Go to the Products -> Categories and upload icon image or svg icon in "Image (icon) for categories navigation on the shop page" section. Also you can upload icon for light color scheme of header in "Image (icon) for categories navigation on the shop page (Light Page Title Color Scheme)" section.


11. Shop / Product - How to enable product attribute swatches.


First please activate WCBoost - Variation Swatches plugin. Then go to the Products -> Attributes section and select attribute for edit  and select swatch type for it (Color, for example)


Then go to the Products -> Attributes section and select attribute for edit  and select swatch type for it (Color, for example)


Then configure terms for current attribute.

How to enable product attribute on product in shop catalog?

This feature only applies to variable products.  Go to Appearance > Customize > WooCommerce > Shop Catalog > Product Attribute to select the attribute you want to show on.

You can change the attribute for a product you want. Edit a Variable product > Product Attribute tab and select the attribute you want to show.

How to show attribute swatches widget on sidebar?

Go to the Appearance -> Widgets section and add Barberry Attributes Filter widget

How to show the selected attribute's label?

Navigate to Appearance -> Customizer -> WooCommerce -> Variation Swatches and check "Show the selected attribute's label"


12. Shop - Change the No. of Product in the Shop

To set up the shop to display a different number of items per row and product columns per page, navigate to Appearance > Customize > WooCommerce > Shop Catalog. This is what you should be looking for on your screen:

13. Shop - Product Image Sizes

If you installed the theme on an existing site, you need to make sure the product image sizes in WooCommerce will fit your newly installed theme.

Where can I find the Image Size Settings for Products?

In your WordPress admin dashboard, navigate to Appearance > Customize > WooCommerce > Product Images.

There is no fixed size to be set for the product images, but you may want to increase or decrease the size. For example, if the images are looking blurry or pixelated, you'll need to increase the size to avoid having small images being stretched.


14. Shop - Sidebar Setup

How to enable the shop sidebar? 

The Shop Sidebar is an actual WordPress widgets area and it should show up as soon as it's populated with at least one widget. Navigate to Appearance > Customize > WooCommerce > Shop Catalog > Layout to enable the Shop Sidebar.

How to Add Widgets?

Navigate to Appearance > Customize > Widgets > Shop Sidebar and press Add Widget button, you can add widgets by clicking the available widgets.

15. Shop - How to enable filters in Shop?

Navigate to Appearance > Customize > WooCommerce > Shop Settings  to enable the Shop filters.

How to Add Widgets?

Navigate to Appearance > Customize > Widgets > Shop Filters and press Add Widget button, you can add widgets by clicking the available widgets.


16. Shop - How to enable Wishlist

First please install and activate YITH WooCommerce Wishlist plugin in Appearance -> Install Plugins section.

Then go to the Pages section and create new page Wishlist with page contents: [yith_wcwl_wishlist]

Then go to the YITH -> Wishlist and select your Wishlist page:

Using WP Rocket with YITH WooCommerce Wishlist

If you use the YITH WooCommerce Wishlist plugin, you may notice some random issue with caching where the most common is the wish list being cached and not showing the correct products.

YITH WooCommerce Wishlist works with a cookie. The solution to avoid problems with caching is to enter the following cookie ID into the option Never cache cookies on the Advanced Rules settings tab:

yith_wcwl_session_<COOKIEHASH>

where is an hash of your site url. Generate COOKIEHASH by https://www.md5hashgenerator.com/




17. Shop - How to enable Compare

First please install and activate YITH WooCommerce Compare plugin.

Then go to the Pages section and create new page Compare and select "Barberry View Compare" page template for it.

Then navigate to Customiser -> WooCommerce -> Compare Settings and activate "Extends Yith Compare Plugin" and select Compare page in Page View Compare Products:



18. Shop - Display Type: Categories, Products or Both

Shop Page — Display Type

Once you've decided to go with a different look for your Shop page, you can navigate to Customizing > WooCommerce > Product Catalog > Shop page display and choose one of the following options:

Product Categories — Display Type

Also by navigating to Customizing > WooCommerce > Product Catalog > Category display, you can find the option to change what to show on your category pages:

Display Type for a specific category

The options above will be applied to all categories. To change the display style for a specific category, edit the category you're after and find the Category Display Dropdown:

19. Shop - Setting Free Shipping


The firstly, you need install plugin WooCommerce Advanced Free Shipping and active it.

Note: you need to create only one Free shipping rates with the format as image


20. Product - How to create a size guide table

This function can be activated in Appearance -> Customize -> WooCommerce ->  Product Page -> Size guides. Then, you can create new tables in Dashboard -> Size Guides. Each size guide table you can attach to particular product categories while editing them or to some specific products when you edit these products. You can also put any content like text or pictures that will be displayed before the size table.


21. How to Add Meta Titles and Descriptions for Pages

Question:

How do I input meta title and meta description into each page of my website?

 

Answer:

You should use an SEO plugin for that, there must be lots of options out there. Yoast SEO is free and it's a powerful tool that should help you in this matter.

22. Missing style.css — Installation Error

That's a common issue caused by not uploading the correct zip file. Go back to http://themeforest.net/downloads and when clicking the Download button, choose the "Installable WordPress file only". This is what you should be looking for on your screen:

23. Outdated WooCommerce Templates

Issue:

"Your theme (Barberry) contains outdated copies of some WooCommerce template files. These files may need updating to ensure they are compatible with the current version of WooCommerce. You can see which files are affected from the system status page. If in doubt, check with the author of the theme."

Solution:

In case you're seeing a notification in your administration dashboard saying the theme includes some outdated WooCommerce templates, it means you've recently updated WooCommerce but haven't updated the theme yet. Please wait theme update that compatible with current WooCommerce version. You can check what version of WooCommerce support latest theme version in change log. 

How to update the theme?


24. Error: "Are you sure you want to do this?..."

If you're seeing this confusing WordPress error when trying to upload the theme, it means the process breaks at some point and that's most probably due to a few server settings limiting resources for your site. For example the maximum upload size could be set to 5MB and the theme's package is larger than that (e.g. 8MB). This isn't a bug but a matter of server settings and you should increase that limit to at least 12MB otherwise, even uploading a larger image could cause the same issue.

You can either reach out to your hosting company and ask them to increase it for your, or read more about how to do it yourself: How to Increase the Maximum File Upload Size in WordPress on wpbeginner.com.

25. Fatal error: Allowed memory size of xxxxxxxx bytes exhausted

There's a certain amount of memory that the server will attribute to each site which it hosts. You may need to set a higher memory limit for your WordPress site to avoid some of the most common errors. The default memory limit for WordPress is 32MB. 

The most popular errors we're talking about are looking something like:

Fatal error: Allowed memory size of xxxxxxxx bytes exhausted (tried to allocate xxxxxxxx bytes) in /site/public_html/wp-includes/plugin.php on line xx

or

Fatal Error: Allowed Memory size of xxxxxxxx bytes exhausted ...

How To Increase The PHP Memory Limit For Wordpress

Connect to your server via FTP and edit the wp-config.php file. Add the following line:

If the solution above won't work in your case, then contacting the hosting company should solve it.

Read more about increasing the PHP memory in the WordPress Codex.


26. How to setup Newsletter in Footer

1. Install MC4WP: Mailchimp for WordPress plugin.

2. Navigate to MC4WP -> Forms and add code below:

<p class="mailchimp_intro">Get instant updates about our new products and special promos!</p>
<p>
    <input type="email" name="EMAIL" placeholder="Your email address" required="">
</p>
<p>
    <input type="submit" value="Sign up">
</p>

3. Navigate to Appearance -> Widgets and add "MailChimp Sign-Up Form" widget to Footer widget area


27. How to configure Social login

To integrate social network (Facebook, Google, Twitter) login function into WordPress theme please follow these steps:

1. Please install plugin Nextend Social Login and Register (Facebook, Google, Twitter) on your site:

2. From Dashboard > Settings > Nextend Social Login :


3. Getting started:

28. What is WooCommerce?

The world's favorite eCommerce solution that gives both store owners and developers complete control. Sell anything. Beautifully. Get started for free.

WooCommerce User Guide         

29. WPBakery Page Builder

Barberry is coming with WPBakery's Page Builder as its page building pluing. It's a premium plugin that comes for free with the theme so it doesn't require a license validation.

For a full guide on how to use the page builder check out the plugin's Knowledge Base at https://kb.wpbakery.com/

WPBakery Page Builder free video tutorials will quickly guide you through everything you need to know about WPBakery Page Builder to create WordPress site. Video tutorials are created in a way that even pro WPBakery Page Builder user or WordPress developer will discover helpful tips and hidden features of the most popular page builder plugin for WordPress.


How to Activate Your Own Premium License

WPBakery's Page Builder plugin comes free with the theme. The license activation option in the plugin is hidden when Barberry is activated and that prevents free users to be asked for license activation at all times, but if you do have your own license and would like to activate it to unlock their premium library and automatic update, you'll have to temporarily deactivate the theme. You can do that by enabling the default WordPress theme, TwentyNineteen for example. As soon as Barberry is deactivated you will be prompted to activate the plugin's license and the License Activation section will no longer be hidden.

You can go back to Appearance > Themes to activate Barberry back as soon as you're done with the plugin's License Activation.


30. WooCommerce Guided Tour

This collection of videos covers anything and everything you'd need to know about installing, setting up WooCommerce, creating products, getting paid, and more!

Settings

General Store Settings

Products Settings

Tax Settings

Tax Rate Example

Checkout Settings

Email Settings

Creating products

Simple Product Overview

Variable Products (Color/Size)

External/Affiliate Product Overview

Downloadable Product Overview

Grouped Product Overview

Categories, Tags, Shipping Classes, & Attributes

Store Management

Managing Orders

Refunding Orders

Reporting

Widgets

Coupons

Payment Gateways

Bank Transfer (BACS)

Cash on Delivery

Check Payments

PayPal Standard

PayPal Powered by Braintree

Stripe

Shipping

Shipping Zones

Shipping Options

Shipping Classes

31. Wordpress & Woocommerce resources

Installing WordPress - Installing WordPress

WordPress for Beginners 2015 - WordPress for Beginners 2015 is a course specifically designed by the great folks from WordPress Informer for those who want to learn WordPress step-by-step, from the very beginning.

WooThemes Documentation - Documentation, Reference Materials, and Tutorials for your WooThemes products

WooCommerce Guided Tour - This series of videos covers anything and everything you'd need to know about installing & setting up WooCommerce.

32. Barberry Updates History

Version 2.9.9.89

— February 4, 2024

Version 2.9.9.88

— November 13, 2023

Version 2.9.9.87

— September 25, 2023

Version 2.9.9.86

— July 20, 2023

Version 2.9.9.85

— June 29, 2023

Version 2.9.9.84

— June 2, 2023

Version 2.9.9.83

— May 7, 2023

Version 2.9.9.82

— April 9, 2023

Version 2.9.9.81

— February 16, 2023

Version 2.9.9.8

— January 17, 2023

Version 2.9.9.7

— January 7, 2023

Version 2.9.9.6

— December 15, 2022

Version 2.9.9.5

— November 2, 2022

Version 2.9.9.4

— October 19, 2022

Version 2.9.9.3

— September 15, 2022

Version 2.9.9.2

— June 22, 2022

Version 2.9.9.1

— June 8, 2022

Version 2.9.9

— March 4, 2022

Version 2.9.8.9

— February 21, 2022

Version 2.9.8.8

— February 2, 2022

Version 2.9.8.7

— January 13, 2022

Version 2.9.8.6

— November 23, 2021

Version 2.9.8.5

— November 3, 2021

Version 2.9.8.4

— November 1, 2021

Version 2.9.8.3

— October 30, 2021

Version 2.9.8.2

— October 15, 2021

Version 2.9.8.1

— September 6, 2021

Version 2.9.8

— July 22, 2021

Version 2.9.7

— July 12, 2021

Version 2.9.6

— June 27, 2021

Version 2.9.5

— June 21, 2021

Version 2.9.3

— May 21, 2021

Version 2.9.2

— April 26, 2021

Version 2.9.1

— March 25, 2021

Version 2.9

— March 22, 2021

Version 2.8.1

— January 13, 2021

Version 2.8

— January 6, 2021

Version 2.7

— October 23, 2020

Version 2.6

— September 5, 2020

Version 2.5

— August 22, 2020

Version 2.4

— August 18, 2020

Version 2.3

— June 22, 2020

Version 2.2

— April 17, 2020

Version 2.1

— March 11, 2020

Version 2.0

— March 10, 2020

Version 1.5

— February 11, 2020

Version 1.4.9

— January 21, 2020

Version 1.4.8

— December 30, 2019

Version 1.4.7

— November 18, 2019

Version 1.4.6

— August 12, 2019

Version 1.4.5

— July 21, 2019

Version 1.4.4

— May 7, 2019

Version 1.4.3

— April 22, 2019

Version 1.4.2

— April 8, 2019

Version 1.4.1

— February 1, 2019

Version 1.4

— January 20, 2019

Version 1.3

— December 28, 2018

Version 1.2

— December 4, 2018

Version 1.1

— November 17, 2018

Version 1.0

— November 8, 2018

33. Theme requirements

Many issues you may run into such as; white screen, demo content fails when importing, empty page content, changing skin problems and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

max_execution_time 300

memory_limit 128M

post_max_size 64M

upload_max_filesize 64M

max_input_time 60

 max_input_vars 3000

Also consider upgrading your PHP version to the latest version, the newer the better.

How To Verify Your Current PHP Limits?

You can check your PHP configuration limits them by installing the FastDev plugin and then going to WordPress dashboard > Fastdev > and choose PHP tab to compare your server info (see example). The first column (Local) refers to your installation value, and the second column (Master) refers to the limits of your host. The latter values are often lower if you have selected a cheaper hosting package.

Updating your PHP version

In most cases, you cannot update the PHP version yourself and need to contact your host about this. The upgrade process is an easy process and should be something your host can do for you without impacting your website or charging you a fee. Here’s a letter you can send to your hosting company:

Dear host, I’m running a WordPress theme on one of your servers and WordPress and this theme has recommended using at least PHP 7 or higher. WordPress, the content management system that my theme uses, has listed PHP 7.2 as the recommended version on their requirements page: https://wordpress.org/about/requirements/ Can you please let me know if my hosting supports PHP 7.0 or higher and how I can upgrade?
Also please increase those limits to a minimum as follows:
max_execution_time 300 memory_limit 128M post_max_size 64M upload_max_filesize 64M max_input_time 60
Looking forward to your reply.