Spoiler Alert! OceanWP 2.0 is Coming Out and Here is What You Can Expect

Published on 24. October, 2020

That’s right folks – the new OceanWP 2.0 version update is just around the corner!

In this article we will cover main theme changes, as well as what to expect and how to prepare for the upcoming update.

Theme Icons

As you probably know, OceanWP has been using a combination of Simple Line icons and Font Awesome for its theme icons. Simple Line Icons are used for the search icon, blog meta icons, etc.

Since we were receiving a lot of requests from our users who wanted to replace Simple Line icons with Font Awesome, we needed to come up with a solution that would satisfy both sides. Hence, we present to you the new option – Theme Icons!

OceanWP Theme Icons

Instead of using custom CSS or coming up with another solution, now you can just “flip the switch”.

How to Enable Theme Icons

To switch to Font Awesome icons, simply navigate to Appearance > Customize > General Options > Theme Icons, and take your pick.

Note: Theme Icons switcher will not affect icons where you have the option to pick between Simple Line or Font Awesome icons on your own – such as the menu cart icon.

New Blog Post Meta Icons Look

Perhaps you’ve notice on the image above – we’ve decided to freshen up our meta icons a little bit.

OceanWP meta icons style
New OceanWP meta icons style

These changes come from our users requests, but also from our strive to make OceanWP accessibility and SEO friendly. We are aware that changes can sometimes fall hard on some users, therefore it is our plan to introduce them gradually.

And, you’ve guessed! We’ve given our icons a bit of color.

By default, icons should inherit primary body text color (#333), but we have also added the options for you to choose the colors. It’s a small change, but we believe it will help you build an awesome website you deserve.

How to Change Meta Icons Color

New OceanWP features allow you pick different colors for both blog post entries and single post meta. Cool, right?

To set your meta icons color, navigate to Appearance > Customize > General Options > Theme Icons, and let your imagination and style lead the way.

WooCommerce Features

Enable or Disable WooCommerce Archive Links

Many eCommerce website owners have approached us with a request to introduce features that would allow them to conduct business only through product archive and category pages. And OceanWP has said – YES!

oceanwp theme settings to disable woocommerce archive and product category pages image and title links
Disable WooCommerce product archive image and title links

To disable Woo archive product title and image links, navigate to Appearance > Customize > WooCommerce > Archives, section Shop Conditional (our new section).

When enabled, your shop visitors will not be able “click their way” through single product pages. As a special surprise, we have also added a little conditional logic, which allows website owners to decide whether or not the link functionality will be affecting all users or just unregistered visitors and by-passers.

Note: product categories links will remain functional.

Suggestion: this feature will function best with simple products.

WooCommerce Price and Add to Cart Button Conditional Logic

Another request that came from our users was to introduce features that would control Woo Price and ‘Add to Cart’ button conditional display. The condition should also rely on a single fact – whether or not a user is logged in.

As an answer to this request, OceanWP has introduced this feature – option to hide prices and ‘Add to Cart’ buttons, with an intent to increase sales conversion and suggest users to create accounts.

OceanWP WooCommerce price and add to cart button conditional feature. Hide price and add to cart button from logged out users.
Hide WooCommerce price and ‘Add to Cart’ button from website visitors

These new settings are independently available for both Woo archives and single product pages:

  • Appearance > Customize > WooCommerce > Archives, section Shop Conditional,
  • Appearance > Customize > WooCommerce > Single Product, section Single Product Conditional.

Hide / Display Price and Add to Cart Button Additional Settings

Additional settings include options to:

  1. Display a message to logged out users or website visitors.
  2. Edit the conditional message,
  3. Include ‘My Account’ page link into the conditional message,
  4. Conditional message typography settings, and
  5. Color settings.
Display a message (notice) to shop visitors

Simply hiding price and purchase option from logged out users can be counterproductive if not used smart. That is why OceanWP has introduced an option for you to display a message, but also change it per your requirements.

OceanWP theme options to display a message to website visitors and encourage them to create an account
Display a message to website visitors and encourage them to create an account

OceanWP users can set different messages for both Woo archives and single product pages.

Important: Default message is “Log in to view price and purchase”. This message will be displayed in place of the ‘Add to Cart’ button.

Include ‘My Account’ page link into the displayed message

Motivating potential customers to register an account on your website is definitely one of the “tools” that could likely lead to a sale.

But why not that approach just a little bit easier? Instead of future clients searching for registration options – lead the way. By checking the option to include the ‘My Account’ page link, your conditional message will automatically open WooCommerce’s default ‘My Account’ page.

Conditional message typography and color settings

OceanWP wants to help you make your website stand out!

If you plan using price and ‘Add to Cart’ button conditional logic, make sure the message is visible and eye-catching. We gave you the tools, now it’s your turn.

Archive conditional message typography settings: Appearance > Customize > Typography > WooCommerce Archive Notice.

Single product message typography settings: Appearance > Customize > Typography > WooCommerce Product Notice.

Archive message color settings: Appearance > Customize > WooCommerce > Advanced Styling, section Product Entry:

  • Conditional Notice: Color, and
  • Conditional Notice: Hover Color.

Product message color settings: Appearance > Customize > WooCommerce > Advanced Styling, section Single Product.

New WooCommerce Typography Settings

And the medal for the OceanWP most request feature goes to Woo typography settings! You asked – we have delivered.

That’s right ladies and gents – days of using custom CSS mainly for WooCommerce archive typography settings are behind you. OceanWP proudly presents the following:

  • Single Product ‘Add to Cart’ (previously, archive ‘Add to Cart’ incorrectly declared as single),
  • Archive Product Title,
  • Archive Product Price,
  • Archive Category.

All typography settings mentioned here are available at Appearance > Customize > Typography.

WooCommerce Tweaks and Changes

In order for us to achieve specific things, as well as to achieve further planned enhancements in the future, we have changed and tweaked some things:

  • Archive product rating has been introduced as a separate element and does no longer hide on hover.
  • WooCommerce Floating Bar (aka sticky Add to Cart) is now displayed on devices 320px width and less.
  • Floating Bar product title has been limited to 4 words to avoid responsiveness issues.
  • Product archive title wrapped into H2 tag for SEO improvement.
Screenshot of OceanWP theme WooCommerce shipping methods layout
Improved WooCommerce shipping methods layout

WooCommerce Fixes

Fixing problems and issues is as equally important as new features. Here is a list of a few things we have covered with OceanWP 2.0 update:

  • Incorrect single product Next/Prev navigation – next product displaying previous, and vice versa.
  • Incorrect single product Next/Prev navigation translation filters.
  • Single product Next/Prev RTL arrows.
  • Blank space below footer on devices 320px and less when Floating Bar enabled.
  • RTL ‘Update Cart’ button position.
  • Cart shipping methods layout.
  • Checkout shipping methods layout.

WooCommerce Third-Party Plugins Compatibility and Theme Support

With the new update, OceanWP theme support now covers YITH WooCommerce Wishlist and Germanized for WooCommerce plugins support.

Depending on the wishlist plugin you are using, make sure to select the correct plugin support via Appearance > Customize > WooCommerce > General, section Wishlist. Default settings: TI WooCommerce Wishlist.

With the help of the Germanized for WooCommerce plugin, all OceanWP eCommerce website owners from Germany will now fulfill all specific German legal conditions.

Swap Font Display for Speed Optimization

Remember that notice from Google, reminding you to ensure the text remains visible during webfont load? Well, you’ll be happy to know those days are behind you.

OceanWP has introduced the swap font display option for all its fonts and icons, which will help you improve page speed scores, but also Google ranking.

Note: this option will only cover default theme fonts. Fonts from third-party sources (like YouTube embeds) or plugins will not be affected.

Important: During your website load, you may notice your fonts (mainly font family) being different compared to what you have chosen. This is normal, and there is no reason to panic. Your website is now “telling” browser to use their own default fonts as a substitute until the website is fully loaded. Ultimately, this is actually what ensures the text remains visible during load.

What to Expect and How to Prepare for the OceanWP Theme Update

Once you update the OceanWP theme to its 2.0 version, some changes are possible:

  1. Different WooCommerce typography settings,
  2. Different meta icon size, color and typography size,
  3. Possible other changes based on hooks or custom snippets (both CSS and PHP) you have used in the past.

This brings us to the most important part on how to prepare properly.

How to Prepare Your Website for the New OceanWP Theme Update

Precaution is always advised, even when there only small changes in question. Since the 2.0 OceanWP update brings a lot of new things, we will do our best to guide you through the entire process so that your website visitors do not encounter any style “discrepancies”, but also in case any issues emerge.

Website update preparation To-Do list:

  1. Before updating the theme, create a backup of your website.
  2. Place your website in the Maintenance mode.
  3. Update OceanWP theme to its latest version via Appearance > Themes.
  4. Inspect ALL pages thoroughly, especially the ones affected by changes covered in this article.
  5. In case of any style changes, correct the changes using paths described.

Changes Not Visible After Update

If you have update the OceanWP theme to its latest versions, but settings mentioned here and changes are not applicable to your website, there are several possible reasons for that:

  • Custom CSS you have used in the past to cover changes such as typography. Be sure to inspect your custom codes.
  • Custom PHP snippets.
  • Custom OceanWP templates overridden using a child theme.

If you don’t have custom codes, or at least believe the ones you have should not make an impact on the changes, most likely reasons could be website or browser caching. In that case, ensure to:

  1. Clear entire browser / website / cloud cache.
  2. Reset scripts via Theme Panel > Scripts & Styles, by disabling all, then enabling back again and saving changes.

And in case you stumble upon any problems related to this update, you will do us a great favor by reporting so that we address it in a timely manner.

Your Opinion Matters to Us

Here at OceanWP we value your feedback.

Make sure to tell us what you think about these updates, but also which features or enhancements would you like to see in the future.

That’s it! Enjoy your new features!

OceanWP - a free Multi-Purpose WordPress theme