History of a bug

OceanWP, Woocommerce and custom menu

Rédigé par gorki Aucun commentaire

Problem :

A wordpress site with OceanWP theme, Woocommerce plugin.

The requirement was to have 3 parts in the website :

  • Each parts has a different menu
  • Each parts has a different colors for menu and header

With OceanWP, you can set for each page : menu, custom header, colors...

A bit tedious to maintain from my point of view, but works, except for Woocommerce pages, especially categories.

Solution :

As everything in wordpress works with extensions, even OceanWP andWoocommerce have their own set of paid extensions... A world of business here (as 50% of the websites run wordpress...). Paid extension could be really usefull in some cases, for my simple task, I simply do it like that :

  1. Export OceanWP parameters
  2. Create a child theme of OceanWP and activate it
  3. Import OceanWP parameters
  4. Advantages :
    1. You can copy / paste of the parent theme in the child theme to modify it
    2. You can add custom functions
  5. Here is the main part, as OceanWP is very customizable (to authorize paid plugins), they already have a lot of hook ready
    1. ocean_custom_header_template : a hook to select the template
    2. ocean_custom_menu : a hook to select the menu

Adding hook to select the right theme for Woocommerce page :

function my_custom_header_function($template) {
        if ( is_shop() || is_product() || is_product_category() ) {
          if ('<name-of-my-slug>' == get_queried_object()->slug) {
// Exception for one category
// We have created custom OceanWP header in OceanWP Theme Library, here is the ID (shown in the URL when editing the custom header)
          } else {
// All others categories have another header
	return $result;
add_filter( 'ocean_custom_header_template', 'my_custom_header_function' );

And for the menu :

function my_custom_menu($menu) {
        if ( is_shop() || is_product() || is_product_category() ) {
                if ('<name-of-my-slug>' != get_queried_object()->slug) {
                        // Except for one category, I return the custom menu to display
                        return '493';
        return $menu;

add_filter( 'ocean_custom_menu', 'my_custom_menu');

Well, done, not perfect but done thanks to OceanWP possible customization and Wordpress ecosystem of paid plugins.

Could be done :

  • Suggest a pull request to OceanWP with an GUI to select the custom header/menu for a given slug
  • Select the custom header in a list instead of putting direct ID...

But no time today !

And I tried a mix of extensions :

But as everything, they are designed to work for a given use case and OceanWP+Woocommerce for categories was not in the scope.

Fil RSS des articles de ce mot clé