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 a post, page, or product as the background image automatically. So here it is! You obviously have to select ‘Background Image’ as the ‘Page Title’ style inside the Customizer settings for the OceanWP theme 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 page, post, or product header background image to the featured image for that page, post, or product */
function my_oceanwp_header_bg_img( $bg_img ) {
/* Detect if it's an individual product, post, or page. You can add or remove post types inside the if statement to customize display conditions */
if ( is_singular( 'product' ) || is_singular( 'post') || is_singular( 'page' ) {
$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_oceanwp_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!