WPShortcode

Ocean Extra Shortcodes

Below, you’ll find a detailed guide on how to add the Ocean Extra Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Ocean Extra Plugin shortcodes not to show or not to work correctly.

Before starting, here is an overview of the Ocean Extra Plugin and the shortcodes it provides:

Plugin Icon
Ocean Extra

"Ocean Extra is a powerful WordPress plugin designed to enhance your website with unique features. This plugin extends the functionality of the OceanWP theme, making customization more straightforward and flexible."

★★★✩✩ (68) Active Installs: 700000+ Tested with: 6.3.2 PHP Version: 7.2
Included Shortcodes:
  • [oceanwp_library]
  • [oceanwp_logo]
  • [oceanwp_nav]
  • [oceanwp_date year="your chosen year"]
  • [oceanwp_search]
  • [oceanwp_site_url]
  • [oceanwp_login]
  • [oceanwp_current_user]
  • [oceanwp_woo_cart]
  • [oceanwp_woo_total_cart]
  • [oceanwp_woo_cart_items]
  • [oceanwp_woo_free_shipping_left]
  • [oceanwp_breadcrumb]
  • [oceanwp_last_modified]
  • [oceanwp_icon]

Ocean Extra [oceanwp_library] Shortcode

The OceanWP Library shortcode is a versatile tool that allows you to embed various types of content into your WordPress site. It accepts an ‘id’ attribute, which corresponds to the ID of the content you want to display. The shortcode works with different builders like Elementor, Beaver Builder, SiteOrigin, and Gutenberg. If the content is created with these builders, it will be displayed accordingly. If not, the shortcode will simply display the template content.

Shortcode: [oceanwp_library]

Parameters

Here is a list of all possible oceanwp_library shortcode parameters and attributes:

  • id – unique identifier for the library item to be displayed

Examples and Usage

Basic example – The shortcode is used to display a specific template by referencing its ID. The referenced template must be of the ‘oceanwp_library’ post type and have a status of ‘publish’.

[oceanwp_library id=1 /]

Advanced examples

Using the shortcode to display a template that is created with Elementor. The template is referenced by its ID. If the template is not created with Elementor, the shortcode will not display anything.

[oceanwp_library id=2 /]

Using the shortcode to display a template that is created with Beaver Builder. The template is referenced by its ID. If the template is not created with Beaver Builder, the shortcode will not display anything.

[oceanwp_library id=3 /]

Using the shortcode to display a template that is created with SiteOrigin. The template is referenced by its ID. If the template is not created with SiteOrigin, the shortcode will not display anything.

[oceanwp_library id=4 /]

Using the shortcode to display a template that is not created with any of the above-mentioned page builders. The template is referenced by its ID. The content of the template will be displayed as a Gutenberg block if it is created as such.

[oceanwp_library id=5 /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_library] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_library', array( $this, 'library_shortcode' ) );

Shortcode PHP function:

function library_shortcode( $atts, $content = null ) {

			// Attributes
			$atts = shortcode_atts( array(
				'id' => '',
			), $atts, 'oceanwp_library' );

			ob_start();

			if ( $atts[ 'id' ] ) {

				$owp_post_type = get_post_type( intval( $atts[ 'id' ] ) );
				$owp_post_status = get_post_status( intval( $atts[ 'id' ] ) );

				if ( $owp_post_type !== 'oceanwp_library' || $owp_post_status !== 'publish' ) {
					return;
				}

				// Check if the template is created with Elementor
				$elementor  = get_post_meta( $atts[ 'id' ], '_elementor_edit_mode', true );

				// If Elementor
				if ( class_exists( 'Elementor\Plugin' ) && $elementor ) {

					echo Elementor\Plugin::instance()->frontend->get_builder_content_for_display( $atts[ 'id' ] );

				}

				// If Beaver Builder.
				else if ( class_exists( 'FLBuilder' ) && ! empty( $atts[ 'id' ] ) ) {

					echo do_shortcode( '[fl_builder_insert_layout id="' . $atts[ 'id' ] . '"]' );

				}

				// if SiteOrigin.
				else if ( class_exists( 'SiteOrigin_Panels' ) && get_post_meta( $atts[ 'id' ], 'panels_data', true ) ) {

					echo SiteOrigin_Panels::renderer()->render( $atts[ 'id' ] );

				}

				// Else
				else {

					// Get template content
					$content = $atts[ 'id' ];

					if ( ! empty( $content ) ) {

						$template = get_post( intval( $content ) );

						if ( is_object( $template ) && ! is_wp_error( $template ) ) {
							$content = $template->post_content;
						}

					}

					// If Gutenberg.
					if ( ocean_is_block_template( $atts[ 'id' ] ) ) {
						$content = apply_filters( 'oe_library_shortcode_template_content', do_blocks( $content ) );
					}

					// Display template content.
					echo do_shortcode( $content );

				}
			}

			return ob_get_clean();

		}

Code file location:

ocean-extra/ocean-extra/includes/panel/library-shortcode.php

Ocean Extra [oceanwp_logo] Shortcode

The OceanWP Logo shortcode allows for the customization of the logo’s position on a webpage. It adds classes for styling and returns the logo from the header.

Shortcode: [oceanwp_logo]

Parameters

Here is a list of all possible oceanwp_logo shortcode parameters and attributes:

  • position – sets the alignment of the logo on the page

Examples and Usage

Basic example – The following is a basic usage of the ‘oceanwp_logo’ shortcode. By default, the logo position is set to ‘left’.

[oceanwp_logo /]

Advanced examples

Setting the logo position to ‘right’. The position attribute allows you to control where the logo appears. In this example, the logo will be positioned on the right.

[oceanwp_logo position='right' /]

Setting the logo position to ‘center’. By using the ‘center’ value, the logo will be displayed in the middle of the header.

[oceanwp_logo position='center' /]

Note: The position attribute only accepts ‘left’, ‘right’, and ‘center’ as valid values. Any other values will be ignored and the default ‘left’ position will be used.

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_logo] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_logo', 'oceanwp_logo_shortcode' );

Shortcode PHP function:

function oceanwp_logo_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'position' => 'left',
			),
			$atts
		);

		$position = $settings['position'];

		// Add classes
		$classes   = array( 'custom-header-logo', 'clr' );
		$classes[] = $position;
		$classes   = implode( ' ', $classes );

		ob_start();
		?>

		<div class="<?php echo esc_attr( $classes ); ?>">
			<?php get_template_part( 'partials/header/logo' ); ?>
		</div>

		<?php
		return ob_get_clean();
	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_nav] Shortcode

The OceanWP Nav shortcode is a powerful tool for customizing website navigation. It allows you to set the position of your navigation bar to the left. The PHP code for this shortcode creates a function that adds classes to the navigation bar, including the position class. It then outputs a div with these classes, containing the navigation and mobile navigation bars.

Shortcode: [oceanwp_nav]

Parameters

Here is a list of all possible oceanwp_nav shortcode parameters and attributes:

  • position – defines the alignment of the navigation bar on the page

Examples and Usage

Basic example – The basic usage of the ‘oceanwp_nav’ shortcode. It will display the navigation menu at the left side of the header as default.

[oceanwp_nav /]

Advanced examples

Using the shortcode to display navigation menu at the right side of the header. The ‘position’ attribute is used to define the position of the navigation menu.

[oceanwp_nav position="right" /]

Using the shortcode to display navigation menu at the center of the header. The ‘position’ attribute is used to define the position of the navigation menu.

[oceanwp_nav position="center" /]

Please note that the position attribute in the shortcode accepts three values: ‘left’, ‘right’, and ‘center’. If no value is provided, it will default to ‘left’.

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_nav] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_nav', 'oceanwp_nav_shortcode' );

Shortcode PHP function:

function oceanwp_nav_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'position' => 'left',
			),
			$atts
		);

		$position = $settings['position'];

		// Add classes
		$classes   = array( 'custom-header-nav', 'clr' );
		$classes[] = $position;
		$classes   = implode( ' ', $classes );

		ob_start();
		?>

		<div class="<?php echo esc_attr( $classes ); ?>">
			<?php
			// Navigation
			get_template_part( 'partials/header/nav' );

			// Mobile nav
			get_template_part( 'partials/mobile/mobile-icon' );
			?>
		</div>

		<?php
		return ob_get_clean();
	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_date year=”your chosen year”] Shortcode

The ‘oceanwp_date’ shortcode is used to display a date range. It accepts ‘year’ as an attribute and returns a string in the format ‘year – current year’. . If no year is provided, it will simply display the current year.

Shortcode: [oceanwp_date year="your chosen year"]

Parameters

Here is a list of all possible oceanwp_date year=”your chosen year” shortcode parameters and attributes:

  • year – Specifies a custom year to append before the current year

Examples and Usage

Basic example – Displays the current year by using the ‘oceanwp_date’ shortcode without any parameters.

[oceanwp_date /]

Advanced examples

Display a custom year range by specifying the ‘year’ parameter in the ‘oceanwp_date’ shortcode. The year you specify will be displayed first, followed by the current year.

[oceanwp_date year="2000" /]

In this example, the output will be ‘2000 – current year’. This can be particularly useful for copyright notices or any other place where you need to show a year range that updates automatically.

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_date year="your chosen year"] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_date', 'oceanwp_date_shortcode' );

Shortcode PHP function:

function oceanwp_date_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'year' => '',
			),
			$atts
		);

		$year = $settings['year'];

		// Var
		$date = '';

		if ( '' != $year ) {
			$date .= $year . ' - ';
		}

		$date .= date( 'Y' );

		return esc_attr( $date );

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_search] Shortcode

The Ocean Extra plugin shortcode ‘oceanwp_search’ is designed to create a customizable search form. It allows you to adjust the width, height, placeholder text, button icon, and post type. This shortcode enhances user experience by providing a tailored search function. The form’s appearance and functionality can be easily manipulated to fit any theme or layout.

Shortcode: [oceanwp_search]

Parameters

Here is a list of all possible oceanwp_search shortcode parameters and attributes:

  • width – sets the width of the search form in pixels
  • height – sets the height of the search form in pixels
  • placeholder – sets the placeholder text in the search field
  • btn_icon – sets the icon for the search button
  • post_type – determines the type of post to search for

Examples and Usage

Basic example – A simple usage of the ‘oceanwp_search’ shortcode without any additional parameters.

[oceanwp_search /]

Advanced examples

Customizing the ‘oceanwp_search’ shortcode to change the width, height, and placeholder text of the search form.

[oceanwp_search width="300" height="50" placeholder="Search our site..."/]

Further customizing the ‘oceanwp_search’ shortcode to specify a custom search button icon and limit the search to a specific post type.

[oceanwp_search btn_icon="icon-search" post_type="product"/]

Please note that the ‘btn_icon’ parameter accepts any valid icon class, and the ‘post_type’ parameter can be any registered post type in your WordPress installation.

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_search] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_search', 'oceanwp_search_shortcode' );

Shortcode PHP function:

function oceanwp_search_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'width'       => '',
				'height'      => '',
				'placeholder' => esc_html__( 'Search', 'ocean-extra' ),
				'btn_icon'    => 'icon-magnifier',
				'post_type'   => 'any',
			),
			$atts
		);

		$width       = $settings['width'];
		$height      = $settings['height'];
		$placeholder = $settings['placeholder'];
		$btn_icon    = $settings['btn_icon'];
		$post_type   = $settings['post_type'];

		// Styles.
		$style = array();
		if ( ! empty( $width ) ) {
			$style[] = 'width: ' . intval( $width ) . 'px;';
		}
		if ( ! empty( $height ) ) {
			$style[] = 'height: ' . intval( $height ) . 'px;min-height: ' . intval( $height ) . 'px;';
		}
		$style = implode( '', $style );

		if ( $style ) {
			$style = wp_kses( $style, array() );
			$style = ' style="' . esc_attr( $style ) . '"';
		}

		$html      = '<form aria-label="' . oe_lang_strings( 'oe-string-search-form-label', false ) . '" role="search" method="get" class="oceanwp-searchform" id="searchform" action="' . esc_url( home_url( '/' ) ) . '"' . $style . '>';
			$html .= '<input aria-label="' . oe_lang_strings( 'oe-string-search-field', false ) . '" type="text" class="field" name="s" id="s" placeholder="' . esc_attr( $placeholder ) . '">';
		if ( 'any' != $post_type ) {
			$html .= '<input type="hidden" name="post_type" value="' . esc_attr( $post_type ) . '">';
		}
			$html .= '<button aria-label="' . oe_lang_strings( 'oe_string_search_submit', false ) . '" type="submit" class="search-submit" value=""><i class="' . esc_attr( $btn_icon ) . '" aria-hidden="true"></i></button>';
		$html     .= '</form>';

		// Return.
		return $html;

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_site_url] Shortcode

The OceanWP Site URL shortcode is a dynamic tool that generates a hyperlink to your website’s homepage. It uses the site’s name as the anchor text. This shortcode allows customization of the target attribute. By default, it opens the link in the same tab (‘self’). However, you can modify it to open the link in a new tab (‘blank’) by adding the ‘target’ parameter in the shortcode. Shortcode: [oceanwp_site_url target=”blank”]

Shortcode: [oceanwp_site_url]

Parameters

Here is a list of all possible oceanwp_site_url shortcode parameters and attributes:

  • target – determines where the website link will open

Examples and Usage

Basic Example – A simple usage of the ‘oceanwp_site_url’ shortcode to display the site URL. The default target is set to ‘self’, which means the link will open in the same tab.

[oceanwp_site_url /]

Advanced Examples

1. Using the ‘oceanwp_site_url’ shortcode with a custom target. In this example, the target is set to ‘blank’, which means the link will open in a new tab or window.

[oceanwp_site_url target="blank" /]

2. Another advanced usage could be to use the shortcode within a text block to create a clickable site name. This could be useful for creating a footer or signature at the end of a post.

Thank you for reading! Visit us at [oceanwp_site_url /] for more interesting articles.

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_site_url] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_site_url', 'oceanwp_site_url_shortcode' );

Shortcode PHP function:

function oceanwp_site_url_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'target' => 'self',
			),
			$atts
		);

		$target = $settings['target'];

		$html = '<a href="' . esc_url( home_url( '/' ) ) . '" target="_' . esc_attr( $target ) . '">' . esc_html( get_bloginfo( 'name' ) ) . '</a>';

		// Return
		return $html;

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_login] Shortcode

The OceanWP Login shortcode enables a customizable login/logout button on your WordPress site. The shortcode allows you to specify a custom URL for redirection, login/logout text, and target. If a user is logged in, it displays a logout button, otherwise, a login button. It also supports logout redirection to the current page or a specified URL.

Shortcode: [oceanwp_login]

Parameters

Here is a list of all possible oceanwp_login shortcode parameters and attributes:

  • custom_url – allows you to set a custom login URL
  • login_text – lets you customize the text for the login link
  • logout_text – allows you to customize the text for the logout link
  • target – sets the target attribute for the login link, default is ‘self’
  • logout_redirect – sets the URL where users are redirected after logout

Examples and Usage

Basic example – A simple usage of the login shortcode without any additional parameters. This will generate a login link with the default text “Login”.

[oceanwp_login /]

Advanced examples

Customizing the login text and target attribute. The login text is set to “Member Login” and the link opens in a new tab or window because the target is set to “_blank”.

[oceanwp_login login_text="Member Login" target="_blank" /]

Setting a custom login URL and logout redirect. The login link redirects to a custom URL, and after logging out, the user is redirected to the homepage.

[oceanwp_login custom_url="https://example.com/custom-login" logout_redirect="https://example.com/home" /]

Changing the login and logout text. The login text is set to “Sign In” and the logout text is set to “Sign Out”.

[oceanwp_login login_text="Sign In" logout_text="Sign Out" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_login] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_login', 'oceanwp_login_shortcode' );

Shortcode PHP function:

function oceanwp_login_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'custom_url'      => '',
				'login_text'      => esc_html__( 'Login', 'ocean-extra' ),
				'logout_text'     => esc_html__( 'Log Out', 'ocean-extra' ),
				'target'          => 'self',
				'logout_redirect' => '',
			),
			$atts
		);

		$custom_url      = $settings['custom_url'];
		$login_text      = $settings['login_text'];
		$logout_text     = $settings['logout_text'];
		$target          = $settings['target'];
		$logout_redirect = $settings['logout_redirect'];

		// Custom login url.
		if ( ! empty( $custom_url ) ) {
			$login_url = $custom_url;
		} else {
			$login_url = wp_login_url();
		}

		// Logout redirect.
		if ( ! empty( $logout_redirect ) ) {
			$current = get_permalink();
			if ( 'current' == $logout_redirect
				&& $current ) {
				$logout_redirect = $current;
			} else {
				$logout_redirect = $logout_redirect;
			}
		} else {
			$logout_redirect = home_url( '/' );
		}

		// Logout link.
		$logout_url = wp_logout_url( $logout_redirect );

		// Logged in link.
		if ( is_user_logged_in() ) {
			return '<a href="' . esc_url( $logout_url ) . '" class="oceanwp-logout">' . esc_html( $logout_text ) . '</a>';
		}

		// Logged out link.
		else {
			return '<a href="' . esc_url( $login_url ) . '" class="oceanwp-login" target="_' . esc_attr( $target ) . '">' . esc_html( $login_text ) . '</a>';
		}

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_current_user] Shortcode

The OceanWP Current User shortcode is a personalized greeting tool. It displays a customizable message to the logged-in user. The code fetches the current user’s details and if the user is logged in, it returns a greeting message with the user’s display name. If the user isn’t logged in, it returns nothing.

Shortcode: [oceanwp_current_user]

Parameters

Here is a list of all possible oceanwp_current_user shortcode parameters and attributes:

  • text – sets the greeting message before the user’s name.
  • display – determines which user information is displayed (default is ‘display_name’).

Examples and Usage

Basic example – Displays a welcome message with the current user’s display name.

[oceanwp_current_user /]

Advanced examples

Display a personalized welcome message by setting the ‘text’ attribute. The ‘text’ attribute allows you to specify a custom welcome message.

[oceanwp_current_user text="Good to see you again," /]

Display the current user’s login name instead of the display name. The ‘display’ attribute determines which user property to display. By setting it to ‘user_login’, the shortcode will display the user’s login name.

[oceanwp_current_user display="user_login" /]

Combining both ‘text’ and ‘display’ attributes. This example displays a custom welcome message and the user’s login name.

[oceanwp_current_user text="Welcome back," display="user_login" /]

Please note that the ‘display’ attribute can take any valid property of the WP_User object, such as ‘user_email’, ‘user_url’, ‘user_registered’, etc. Always ensure that the property you’re trying to display exists and is accessible.

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_current_user] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_current_user', 'oceanwp_current_user_shortcode' );

Shortcode PHP function:

function oceanwp_current_user_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'text'    => esc_html__( 'Welcome back', 'ocean-extra' ),
				'display' => 'display_name',
			),
			$atts
		);

		$text    = $settings['text'];
		$display = $settings['display'];

		// Get current user
		$current_user = wp_get_current_user();

		// Text
		if ( ! empty( $text ) ) {
			$text = $text . ' ';
		}

		// If logged in
		if ( is_user_logged_in() ) {
			return esc_html( $text ) . $current_user->$display;
		}

		// Return if not logged in
		else {
			return;
		}

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_woo_cart] Shortcode

The OceanWP WooCommerce Cart shortcode is a versatile tool that allows you to customize the appearance and functionality of your WooCommerce shopping cart. This shortcode enables you to define various settings like style, color, and cart visibility. It also supports custom links and Elementor editing mode. It dynamically displays cart content count and total value, with an option to hide if the cart is empty. It also includes a drop-down feature showing current cart items.

Shortcode: [oceanwp_woo_cart]

Parameters

Here is a list of all possible oceanwp_woo_cart shortcode parameters and attributes:

  • class – Additional custom classes for the cart icon.
  • style – Defines the style of the cart icon, ‘drop_down’ by default.
  • custom_link – Allows setting a custom URL for the cart icon.
  • total – If set to true, displays the total cart value.
  • cart_style – Specifies the style of the cart, ‘compact’ by default.
  • hide_if_empty – If true, hides the cart icon when the cart is empty.
  • color – Sets the color of the cart icon.
  • hover_color – Defines the color of the cart icon on mouse hover.
  • count_color – Sets the color of the cart item count.
  • count_hover_color – Defines the color of the cart item count on mouse hover.

Examples and Usage

Basic example – Displaying the WooCommerce cart icon using the OceanWP plugin shortcode without any additional parameters.

[oceanwp_woo_cart]

Advanced examples

Displaying the WooCommerce cart icon with a custom style and a custom link. The style is set to ‘drop_down’, which means the cart contents will be displayed in a dropdown menu when the cart icon is clicked. The custom link redirects to a custom page when the cart icon is clicked.

[oceanwp_woo_cart style="drop_down" custom_link="http://yourwebsite.com/custom-cart-page"]

Displaying the WooCommerce cart icon with a custom color and hover color. This can be used to match the cart icon with the website’s color scheme.

[oceanwp_woo_cart color="#000000" hover_color="#ffffff"]

Displaying the WooCommerce cart icon with the total cart amount and count color. This can be used to highlight the total amount in the cart and the number of items in the cart.

[oceanwp_woo_cart total="true" count_color="#ff0000"]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_woo_cart] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_woo_cart', 'oceanwp_woo_cart_icon_shortcode' );

Shortcode PHP function:

function oceanwp_woo_cart_icon_shortcode( $atts ) {

		// Return if WooCommerce is not enabled or if admin to avoid error
		if ( ! class_exists( 'WooCommerce' )
			|| is_admin() ) {
			return;
		}

		// Return if is in the Elementor edit mode, to avoid error
		if ( class_exists( 'Elementor\Plugin' )
			&& \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			return esc_html__( 'This shortcode only works in front end', 'ocean-extra' );
		}

		$settings = shortcode_atts(
			array(
				'class'             => '',
				'style'             => 'drop_down',
				'custom_link'       => '',
				'total'             => false,
				'cart_style'        => 'compact',
				'hide_if_empty'     => false,
				'color'             => '',
				'hover_color'       => '',
				'count_color'       => '',
				'count_hover_color' => '',
			),
			$atts
		);

		$class             = $settings['class'];
		$style             = $settings['style'];
		$custom_link       = $settings['custom_link'];
		$total             = $settings['total'];
		$cart_style        = $settings['cart_style'];
		$hide_if_empty     = $settings['hide_if_empty'];
		$color             = $settings['color'];
		$hover_color       = $settings['hover_color'];
		$count_color       = $settings['count_color'];
		$count_hover_color = $settings['count_hover_color'];

		// Return items if "hide if empty cart" is checked (for mobile)
		if ( true == $hide_if_empty
			&& ! WC()->cart->cart_contents_count > 0 ) {
			return;
		}

		// Toggle class
		$toggle_class = 'toggle-cart-widget';

		// Define classes to add to li element
		$classes = array( 'woo-menu-icon', 'bag-style', 'woo-cart-shortcode' );

		// Add style class
		$classes[] = 'wcmenucart-toggle-' . $style;

		// Cart style
		if ( 'compact' != $cart_style ) {
			$classes[] = $cart_style;
		}

		// Prevent clicking on cart and checkout
		if ( 'custom_link' != $style && ( is_cart() || is_checkout() ) ) {
			$classes[] = 'nav-no-click';
		}

		// Add toggle class
		else {
			$classes[] = $toggle_class;
		}

		// If custom class
		if ( ! empty( $class ) ) {
			$classes[] = $class;
		}

		// Turn classes into string
		$classes = implode( ' ', $classes );

		// URL
		if ( 'custom_link' == $style && $custom_link ) {
			$url = esc_url( $custom_link );
		} else {
			$cart_id = wc_get_page_id( 'cart' );
			if ( function_exists( 'icl_object_id' ) ) {
				$cart_id = icl_object_id( $cart_id, 'page' );
			}
			$url = get_permalink( $cart_id );
		}

		// Style
		if ( ! empty( $color )
			|| ! empty( $hover_color )
			|| ! empty( $count_color )
			|| ! empty( $count_hover_color ) ) {

			// Vars
			$css    = '';
			$output = '';

			if ( ! empty( $color ) ) {
				$css .= '.woo-cart-shortcode .wcmenucart-cart-icon .wcmenucart-count {color:' . esc_attr( $color ) . '; border-color:' . esc_attr( $color ) . ';}';
				$css .= '.woo-cart-shortcode .wcmenucart-cart-icon .wcmenucart-count:after {border-color:' . esc_attr( $color ) . ';}';
			}

			if ( ! empty( $hover_color ) ) {
				$css .= '.woo-cart-shortcode.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count, .show-cart .wcmenucart-cart-icon .wcmenucart-count {background-color: ' . esc_attr( $hover_color ) . '; border-color:' . esc_attr( $hover_color ) . ';}';
				$css .= '.woo-cart-shortcode.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count:after, .show-cart .wcmenucart-cart-icon .wcmenucart-count:after {border-color:' . esc_attr( $hover_color ) . ';}';
			}

			if ( ! empty( $count_color ) ) {
				$css .= '.woo-cart-shortcode .wcmenucart-cart-icon .wcmenucart-count {color:' . esc_attr( $count_color ) . ';}';
			}

			if ( ! empty( $count_hover_color ) ) {
				$css .= '.woo-cart-shortcode.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count, .show-cart .wcmenucart-cart-icon .wcmenucart-count {color:' . esc_attr( $count_hover_color ) . ';}';
			}

			// Add style
			if ( ! empty( $css ) ) {
				echo "<style type=\"text/css\">\n" . wp_strip_all_tags( oceanwp_minify_css( $css ) ) . "\n</style>";
			}
		}

		ob_start();
		?>

		<div class="<?php echo esc_attr( $classes ); ?>">
			<a href="<?php echo esc_url( $url ); ?>" class="wcmenucart-shortcode">
				<?php
				if ( true == $total ) {
					?>
					<span class="wcmenucart-total"><?php WC()->cart->get_total(); ?></span>
				<?php } ?>
				<span class="wcmenucart-cart-icon">
					<span class="wcmenucart-count"><?php WC()->cart->get_cart_contents_count(); ?></span>
				</span>
			</a>
			<?php
			if ( 'drop_down' == $style
				&& ! is_cart()
				&& ! is_checkout() ) {
				?>
				<div class="current-shop-items-dropdown owp-mini-cart clr">
					<div class="current-shop-items-inner clr">
						<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
					</div>
				</div>
			<?php } ?>
		</div>

		<?php
		return ob_get_clean();

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_woo_total_cart] Shortcode

The ‘oceanwp_woo_total_cart’ shortcode is a feature of the Ocean Extra plugin. It displays the total amount in the WooCommerce shopping cart. This shortcode works only on the front end and not in the Elementor edit mode or the admin area. It returns the total cart value within a styled span class, providing an easy way to display cart totals on your WordPress site.

Shortcode: [oceanwp_woo_total_cart]

Examples and Usage

Basic example – A simple usage of the shortcode to display the total cart value in WooCommerce.

[oceanwp_woo_total_cart /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_woo_total_cart] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_woo_total_cart', 'oceanwp_woo_total_cart_shortcode' );

Shortcode PHP function:

function oceanwp_woo_total_cart_shortcode() {

		// Return if WooCommerce is not enabled or if admin to avoid error
		if ( ! class_exists( 'WooCommerce' )
			|| is_admin() ) {
			return;
		}

		// Return if is in the Elementor edit mode, to avoid error
		if ( class_exists( 'Elementor\Plugin' )
			&& \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			return esc_html__( 'This shortcode only works in front end', 'ocean-extra' );
		}

		$html  = '<span class="oceanwp-woo-total">';
		$html .= WC()->cart->get_total();
		$html .= '</span>';

		return $html;

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_woo_cart_items] Shortcode

The ‘oceanwp_woo_cart_items’ shortcode is a feature of the Ocean Extra plugin. It displays the number of items in a WooCommerce cart. . This shortcode checks if WooCommerce is active and if it’s not in admin or Elementor edit mode. It then generates HTML to display the cart item count.

Shortcode: [oceanwp_woo_cart_items]

Examples and Usage

Basic example – A simple implementation of the oceanwp_woo_cart_items shortcode to display the number of items in the cart.

[oceanwp_woo_cart_items /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_woo_cart_items] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_woo_cart_items', 'oceanwp_woo_cart_items_shortcode' );

Shortcode PHP function:

function oceanwp_woo_cart_items_shortcode() {

		// Return if WooCommerce is not enabled or if admin to avoid error
		if ( ! class_exists( 'WooCommerce' )
			|| is_admin() ) {
			return;
		}

		// Return if is in the Elementor edit mode, to avoid error
		if ( class_exists( 'Elementor\Plugin' )
			&& \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			return esc_html__( 'This shortcode only works in front end', 'ocean-extra' );
		}

		$html  = '<span class="oceanwp-woo-cart-count">';
		$html .= WC()->cart->get_cart_contents_count();
		$html .= '</span>';

		return $html;

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_woo_free_shipping_left] Shortcode

The OceanWP WooCommerce Free Shipping Left shortcode is a tool that displays how much more a customer needs to spend to qualify for free shipping. This shortcode checks if WooCommerce is enabled, then enqueues the ‘owp-free-shipping’ script. It allows customization of the displayed messages and the free shipping threshold through its attributes.

Shortcode: [oceanwp_woo_free_shipping_left]

Parameters

Here is a list of all possible oceanwp_woo_free_shipping_left shortcode parameters and attributes:

  • content – The message displayed to customers before they reach free shipping threshold.
  • content_reached – The message displayed to customers after they reach the free shipping threshold.
  • multiply_by – The value used to calculate the remaining amount for free shipping.

Examples and Usage

Basic example – A simple usage of the ‘oceanwp_woo_free_shipping_left’ shortcode without any additional parameters. This will display the default messages for the free shipping status.

[oceanwp_woo_free_shipping_left /]

Advanced examples

Customizing the free shipping status messages by providing ‘content’ and ‘content_reached’ parameters. This will allow you to display your own messages when the free shipping threshold is not yet reached and when it is already reached, respectively.

[oceanwp_woo_free_shipping_left content="Spend %left_to_free% more to get free shipping" content_reached="Congratulations! You have earned free shipping!" /]

Further customization can be done by adding the ‘multiply_by’ parameter. This can be used to adjust the calculation for the remaining amount needed for free shipping. For example, if you want to display the remaining amount in a different currency where the conversion rate is 2, you can set ‘multiply_by’ to 2.

[oceanwp_woo_free_shipping_left content="Spend %left_to_free% more to get free shipping" content_reached="Congratulations! You have earned free shipping!" multiply_by=2 /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_woo_free_shipping_left] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_woo_free_shipping_left', 'oceanwp_woo_free_shipping_left_shortcode' );

Shortcode PHP function:

function oceanwp_woo_free_shipping_left_shortcode( $atts, $content ) {

		// Return if WooCommerce is not enabled
		if ( ! class_exists( 'WooCommerce' ) ) {
			return;
		}

		// Call the script
		wp_enqueue_script( 'owp-free-shipping' );

		// Initiation data on data attr on span
		$content_data    = '';
		$content_reached = '';
		if ( ! empty( $atts ) ) {
			if ( isset( $atts['content'] ) ) {
				$content_data = $atts['content'];
			}
			if ( isset( $atts['content_reached'] ) ) {
				$content_reached = $atts['content_reached'];
			}
		}

		$x = str_replace( '%', '+', $content_data );

		$settings = shortcode_atts(
			array(
				'content'         => esc_html__( 'Buy for %left_to_free% more and get free shipping', 'ocean-extra' ),
				'content_reached' => esc_html__( 'You have Free delivery!', 'ocean-extra' ),
				'multiply_by'     => 1,
			),
			$atts
		);

		$content         = $settings['content'];
		$content_reached = $settings['content_reached'];
		$multiply_by     = $settings['multiply_by'];

		return oceanwp_woo_free_shipping_left( "<span class='oceanwp-woo-free-shipping' data-content='" . esc_attr($x ) . "' data-reach='" . esc_attr( $content_reached ) . "'>" . wp_kses_post( $content ) . '</span>', '<span class="oceanwp-woo-free-shipping">' . wp_kses_post( $content_reached ) . '</span>', esc_attr( $multiply_by ) );

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_breadcrumb] Shortcode

The OceanWP Breadcrumb shortcode is a versatile tool that adds breadcrumb navigation to your WordPress site. It provides a user-friendly way to trace their path back to the home page. This shortcode checks if the site is in Elementor edit mode or in admin mode, and if the OceanWP_Breadcrumb_Trail class exists. It allows customization of the breadcrumb’s class, color, and hover color. It also integrates with Yoast SEO for enhanced functionality.

Shortcode: [oceanwp_breadcrumb]

Parameters

Here is a list of all possible oceanwp_breadcrumb shortcode parameters and attributes:

  • class – specifies an additional class for the breadcrumb
  • color – sets the text color of the breadcrumb
  • hover_color – sets the text color when hovering over breadcrumb links

Examples and Usage

Basic example – Here is a simple usage of the ‘oceanwp_breadcrumb’ shortcode without any parameters. This will display the breadcrumb navigation on your page.

[oceanwp_breadcrumb]

Advanced examples

Using the shortcode with a custom class. This allows you to style the breadcrumb navigation separately in your CSS. Here, ‘my_custom_class’ is the name of the custom class you want to use.

[oceanwp_breadcrumb class="my_custom_class"]

Using the shortcode with color parameters. This allows you to set the color and hover color of the breadcrumb links directly. The color values must be valid CSS color values.

[oceanwp_breadcrumb color="#333" hover_color="#999"]

Using the shortcode with multiple parameters. This example combines the previous examples, allowing you to set a custom class and color values at the same time.

[oceanwp_breadcrumb class="my_custom_class" color="#333" hover_color="#999"]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_breadcrumb] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_breadcrumb', 'oceanwp_breadcrumb_shortcode' );

Shortcode PHP function:

function oceanwp_breadcrumb_shortcode( $atts ) {

		// Return if is in the Elementor edit mode, to avoid error
		if ( class_exists( 'Elementor\Plugin' )
			&& \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			return esc_html__( 'This shortcode only works in front end', 'ocean-extra' );
		}

		// Return if is in the admin, to avoid conflict with Yoast SEO
		if ( is_admin() ) {
			return;
		}

		// Return if OceanWP_Breadcrumb_Trail doesn't exist
		if ( ! class_exists( 'OceanWP_Breadcrumb_Trail' ) ) {
			return;
		}

		$settings = shortcode_atts(
			array(
				'class'       => '',
				'color'       => '',
				'hover_color' => '',
			),
			$atts
		);

		$class       = $settings['class'];
		$color       = $settings['color'];
		$hover_color = $settings['hover_color'];

		$args = '';

		// Add a space for the beginning of the class attr
		if ( ! empty( $class ) ) {
			$class = ' ' . $class;
		}

		// Style
		if ( ! empty( $color ) || ! empty( $hover_color ) ) {

			// Vars
			$css    = '';
			$output = '';

			if ( ! empty( $color ) ) {
				$css .= '.oceanwp-breadcrumb .site-breadcrumbs, .oceanwp-breadcrumb .site-breadcrumbs a {color:' . esc_attr( $color ) . ';}';
			}

			if ( ! empty( $hover_color ) ) {
				$css .= '.oceanwp-breadcrumb .site-breadcrumbs a:hover {color:' . esc_attr( $hover_color ) . ';}';
			}

			// Add style
			if ( ! empty( $css ) ) {
				echo "<style type=\"text/css\">\n" . wp_strip_all_tags( oceanwp_minify_css( $css ) ) . "\n</style>";
			}
		}

		// Yoast breadcrumbs
		if ( function_exists( 'yoast_breadcrumb' ) && current_theme_supports( 'yoast-seo-breadcrumbs' ) ) {
			$classes = 'site-breadcrumbs clr';
			if ( $breadcrumbs_position = get_theme_mod( 'ocean_breadcrumbs_position' ) ) {
				$classes .= ' position-' . esc_attr( $breadcrumbs_position );
			}
			return yoast_breadcrumb( '<nav class="' . esc_attr( $classes ) . '">', '</nav>' );
		}

		$breadcrumb = apply_filters( 'breadcrumb_trail_object', null, $args );

		if ( ! is_object( $breadcrumb ) ) {
			$breadcrumb = new OceanWP_Breadcrumb_Trail( $args );
		}

		return '<span class="oceanwp-breadcrumb' . esc_attr( $class ) . '">' . $breadcrumb->get_trail() . '</span>';

	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_last_modified] Shortcode

The OceanWP Last Modified shortcode is used to display the last modified date of a post in WordPress. This shortcode retrieves the last updated date of the content and displays it with a predefined text. The date format can be customized, providing flexibility.

Shortcode: [oceanwp_last_modified]

Parameters

Here is a list of all possible oceanwp_last_modified shortcode parameters and attributes:

  • olm_text – Defines the introductory text displayed before the modified date.
  • olm_date_format – Specifies the format for presenting the modified date.

Examples and Usage

Basic example – Displays the last modification date of a post or page with the default “Last Updated on:” text and date format.

[oceanwp_last_modified /]

Advanced examples

Customizing the introductory text to “Last Edited on:” instead of the default “Last Updated on:”

[oceanwp_last_modified olm_text="Last Edited on:" /]

Specifying a custom date format. In this example, the date format is set to ‘d M Y’, which would display the date as ’01 Jan 2022′.

[oceanwp_last_modified olm_date_format="d M Y" /]

Combining both custom introductory text and date format. This will display the last modification date with the introductory text “Page Revised on:” and the date format as ‘d M Y’.

[oceanwp_last_modified olm_text="Page Revised on:" olm_date_format="d M Y" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_last_modified] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_last_modified', 'oceanwp_last_modified_shortcode' );

Shortcode PHP function:

function oceanwp_last_modified_shortcode( $atts ) {
		$settings = shortcode_atts(
			array(
				'olm_text'        => esc_html__( 'Last Updated on:', 'ocean-extra' ),
				'olm_date_format' => '',
			),
			$atts
		);

		$olm_text        = $settings['olm_text'];
		$olm_date_format = $settings['olm_date_format'];

		if ( ! empty( $olm_date_format ) ) {
			$olm_date = get_the_modified_date( $olm_date_format );
		} else {
			$olm_date = get_the_modified_date( 'F j, Y' );
		}

		$olm_shortcode = '<p class="ocean-last-modified">' . esc_html( $olm_text . ' ' . $olm_date ) . '</p>';

		// Return.
		return $olm_shortcode;
	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Ocean Extra [oceanwp_icon] Shortcode

The OceanWP Icon shortcode is a powerful tool that allows you to embed SVG icons into your WordPress site. It accepts parameters like ‘icon’, ‘class’, ‘title’, ‘desc’, ‘area_hidden’, and ‘fallback’. You can customize the icon’s appearance by changing the ‘icon’ and ‘class’ attributes. ‘Title’ and ‘desc’ provide additional information about the icon, while ‘area_hidden’ and ‘fallback’ control its accessibility and backup options.

Shortcode: [oceanwp_icon]

Parameters

Here is a list of all possible oceanwp_icon shortcode parameters and attributes:

  • icon – Defines the specific icon to be displayed.
  • class – Specifies any additional CSS classes for the icon.
  • title – Sets a title for the icon for better accessibility.
  • desc – Provides a description for the icon, enhancing accessibility.
  • area_hidden – Controls whether the icon is hidden to screen readers.
  • fallback – Determines if a fallback icon should be used when the primary fails.

Examples and Usage

Basic example – Here is a simple usage of the oceanwp_icon shortcode. This will display the specified icon with the default parameters.

[oceanwp_icon icon="sample-icon" /]

Advanced examples

Adding an icon with a custom class. This will display the specified icon with a custom CSS class that can be used to apply custom styling.

[oceanwp_icon icon="sample-icon" class="custom-class" /]

Using the shortcode to display an icon with a title and description. This will display the specified icon with a title and description, which can be useful for accessibility and SEO.

[oceanwp_icon icon="sample-icon" title="Sample Icon" desc="This is a sample icon." /]

Using the shortcode to display an icon with a fallback image. If the SVG icon cannot be loaded for any reason, the fallback image will be displayed instead.

[oceanwp_icon icon="sample-icon" fallback="fallback-image.png" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [oceanwp_icon] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'oceanwp_icon', 'oceanwp_svg_icon_shortcode' );

Shortcode PHP function:

function oceanwp_svg_icon_shortcode( $atts, $content = null ) {

		$owp_icon = '';

		// Extract attributes.
		$attr = shortcode_atts(
			array(
				'icon'        => 'Add an icon class',
				'class'       => '',
				'title'       => '',
				'desc'        => '',
				'area_hidden' => true,
				'fallback'    => false,
			),
			$atts
		);

		if ( function_exists( 'ocean_svg' ) ) {
			$owp_icon = ocean_svg( $attr['icon'], false, $attr['class'], $attr['title'], $attr['desc'], $attr['area_hidden'], $attr['fallback'] );
		}

		return $owp_icon;
	}

Code file location:

ocean-extra/ocean-extra/includes/shortcodes/shortcodes.php

Conclusion

Now that you’ve learned how to embed the Ocean Extra Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.

Related Shortcodes

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *