How To Customize OceanWP Theme With Code Snippets

This is a small collection of code snippets to customize the OceanWP theme and associated features. I’ve only used OceanWP on a few sites now and it is clearly a very powerful, customizable theme but there are still features not available without adding a few code snippets to your (child) theme’s functions.php file.

If you’re not comfortable with OceanWP yet, surf on over to the official OceanWP Documentation where you can find extensive documentation of the OceanWP hooks and filters as well as some simple help articles.

IMPORTANT NOTE : Never forget to disable features you’re not using with OceanWP under the Theme Panel -> Scripts & Styles. It can make a huge difference in PageSpeed scores and page load times even when using optimal cache settings.


Set Featured Image as OceanWP Page Title Background Image

There are plenty of snippets out there for this hook – ocean_page_header_background_image – but I never found one that set the featured image for the post/product as the background image automatically. So here it is! You obviously have to select ‘Background Image’ as the ‘Page Title’ style in order for this code to be effective. The code snippet should be inserted into the (child) theme’s functions.php file.

/* Set your single post or product header background image to the featured image for that product or post */
function my_product_header_bg_img( $bg_img ) {
        // Detect individual product or post pages
	if ( is_singular( 'product' ) || is_singular( 'post') ) {
		$featured_id = get_post_thumbnail_id();
                // Don't forget to specify the thumbnail size you want to use, in this case I used 'large'
		$featured_url_array = wp_get_attachment_image_src($featured_id, 'large', true);
		$bg_img = $featured_url_array[0];
	}

	return $bg_img;

}
add_filter( 'ocean_page_header_background_image', 'my_product_header_bg_img' );

Set Custom Page Title and Subheading in OceanWP (specifically for WooCommerce shop)

This code snippet is nothing special, but it shows you how you can change the WooCommerce shop page title and subheading since it can’t be changed without a little extra code. You could also use this same code snippet to change the page title or subheading on any post, page, custom post type, etc. by placing the appropriate detection in the if() statement. This is especially useful for automatically built-in pages like the Shop page that is automatically generated by WooCommerce. This code should be place in the (child) theme’s functions.php file.

/* Change Page Title on WooCommerce Shop Page */
function my_change_page_header_title( $title ) {
    if ( is_shop() ) {
        $title = 'My Custom Shop Title';
    }
    return $title;
}
add_filter( 'ocean_title', 'my_change_page_header_title', 20 );

/* Change the WooCommerce Shop page subheading */
function my_change_page_header_subheading( $subheading ) {
    if ( is_shop() ) {
        $subheading = 'Subheading for my shop';
    }
    return $subheading;
}
add_filter( 'ocean_post_subheading', 'my_change_page_header_subheading' );

Show Custom OceanWP Sidebar on Specific (WooCommerce) Pages

OceanWP allows you to create custom sidebars. To programmatically set where they appear, add the following code snippet and alter it to your liking. The code snippet below specifically sets a sidebar filled with FacetWP facets to appear on the WooCommerce shop page and all product category pages so site visitors can always filter down the products with that sidebar showing. You can alter the if() statement to detect the page(s) that you want a custom sidebar to show on – for example, is_singular( ‘gallery’ ) or is_singular( ‘product’ ) or is_page( ‘page-slug’ ). Obviously don’t forget to change the custom sidebar id to your own custom sidebar. Place this code snippet in the OceanWP (child) theme’s functions.php file.

/* Custom sidebar for product archives and shop pages */
function woo_custom_sidebar_display( $sidebar ) {
 if ( is_woocommerce() && ( is_product_taxonomy() || is_shop() )) {
        // OceanWP custom sidebar created
	return 'ocs-product-listings';
 }	
 else {
       // Return theme defined sidebar area
       return $sidebar;
 }
}
add_filter( 'ocean_get_sidebar', 'woo_custom_sidebar_display' );

Leave your ideas, requests, or feedback on these code snippets below in the comments. Thanks!

Leave a Comment