Snippets

Snippet: Override Carousel Icons with Custom SVG’s

  • Updated:

The following snippet can be used to override the theme's default carousel arrows with custom SVG icons. In this example we are changing the arrows to use the forward and back arrows from the Google material design icon set. You can modify the code to use any SVG's you want, just make sure that your SVG's are still wrapped in the wpex-svg-icon class and that the fill color is set to currentColor (unless you want to use a custom fill color).

/**
 * Modify carousel icons.
 */
add_filter( 'totalthemecore/vcex/carousel/owl/default_options', function( $options ) {
	// Simply switch the values to the SVG's you want to use - but keep the wpex-svg-icon span wrapper!
	$options['prevIcon'] = '<span class="wpex-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span>';
	$options['nextIcon'] = '<span class="wpex-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg></span>';
	return $options;
} );

/**
 * OPTIONAL: Completely remove the theme icons CSS.
 *
 * @important Only add this code if you are using SVG icons on your site.
 */
add_action( 'wp_enqueue_scripts', function() {
	wp_deregister_style( 'ticons' );
	wp_dequeue_style( 'ticons' );
}, PHP_INT_MAX );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top