Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

PowerPack

⌘K
  1. Home
  2. Docs
  3. PowerPack
  4. Development
  5. How to change SVG arrow icons?

How to change SVG arrow icons?

This applies to the following modules when the carousel is enabled: Content Grid, Testimonials, Image Carousel, Logos Grid & Carousel, 3D Slider.

Please add the below code to your current theme’s functions.php file:

// Code to change previous navigation arrow
add_filter( 'pp_prev_icon_svg', 'my_own_prev_icon' );
function my_own_prev_icon( $svg ) {
   // change the SVG code here.
   $svg = '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z"></path></svg>';

   return $svg;
}
// Code to change next navigation arrow
add_filter( 'pp_next_icon_svg', 'my_own_next_icon' );
function my_own_next_icon( $svg ) {
   // change the SVG code here.
   $svg = '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z"></path></svg>';

   return $svg;
}

Down Arrow

add_filter( 'pp_down_arrow_html', function( $html, $row_settings ) {
   // change the SVG code here.
   $html = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation"><path stroke="null" d="m1.00122,14.45485c0,-0.24438 0.10878,-0.48877 0.32411,-0.67587c0.4329,-0.37231 1.13663,-0.37231 1.56952,0l19.19382,16.50735l19.19381,-16.50735c0.4329,-0.37231 1.13663,-0.37231 1.56952,0s0.43289,0.97753 0,1.34983l-19.97969,17.18324c-0.43289,0.3723 -1.13662,0.3723 -1.56951,0l-19.97969,-17.18324c-0.21755,-0.1871 -0.32411,-0.43149 -0.32411,-0.67587l0.00222,0.00191z" fill="#000000" id="svg_1"/></svg>';

   return $html;
}, 10, 2 );
×