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 );
🎃 🎃

⚡ HALLOWEEN FLASH SALE! Save up to 40% OFF  Claim Your Treats ➔

🎃 Wait! Your Halloween Savings Are Still Here!

You're about to miss our biggest sale of the year. Save up to 40% and secure unlimited site licenses before the Halloween sale ends.

×