{"id":13144,"date":"2025-04-30T11:39:13","date_gmt":"2025-04-30T08:39:13","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=13144"},"modified":"2025-04-30T11:39:13","modified_gmt":"2025-04-30T08:39:13","slug":"change-flexy-navigation-arrow-icons","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/code-snippets\/change-flexy-navigation-arrow-icons\/","title":{"rendered":"Change Flexy navigation arrow icons"},"content":{"rendered":"\n<p>The\u00a0Flexy gallery\u00a0powers various elements across the theme, including the single product image gallery and sliders like the related products carousel. With a simple PHP filter, you can easily swap out the default arrow icons and replace them with any inline SVG of your choice, giving you full control over the gallery\u2019s look and feel.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter('blocksy:flexy:arrows', function($arrows) {\n\n\t$arrows&#091;'prev'] = '&lt;svg width=\"16\" height=\"10\" fill=\"currentColor\" viewBox=\"0 0 16 10\"&gt;&lt;path d=\"M15.3 4.3h-13l2.8-3c.3-.3.3-.7 0-1-.3-.3-.6-.3-.9 0l-4 4.2-.2.2v.6c0 .1.1.2.2.2l4 4.2c.3.4.6.4.9 0 .3-.3.3-.7 0-1l-2.8-3h13c.2 0 .4-.1.5-.2s.2-.3.2-.5-.1-.4-.2-.5c-.1-.1-.3-.2-.5-.2z\"&gt;&lt;\/path&gt;&lt;\/svg&gt;';\n\t\n\t$arrows&#091;'next'] = '&lt;svg width=\"16\" height=\"10\" fill=\"currentColor\" viewBox=\"0 0 16 10\"&gt;&lt;path d=\"M.2 4.5c-.1.1-.2.3-.2.5s.1.4.2.5c.1.1.3.2.5.2h13l-2.8 3c-.3.3-.3.7 0 1 .3.3.6.3.9 0l4-4.2.2-.2V5v-.3c0-.1-.1-.2-.2-.2l-4-4.2c-.3-.4-.6-.4-.9 0-.3.3-.3.7 0 1l2.8 3H.7c-.2 0-.4.1-.5.2z\"&gt;&lt;\/path&gt;&lt;\/svg&gt;';\n\n\treturn $arrows;\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0Flexy gallery\u00a0powers various elements across the theme, including the single product image gallery and sliders like the related products carousel. With a simple PHP filter, you can easily swap out the default arrow icons and replace them with any inline SVG of your choice, giving you full control over the gallery\u2019s look and feel.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[125],"class_list":["post-13144","documentation","type-documentation","status-publish","hentry","doc_categories-code-snippets"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/13144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=13144"}],"version-history":[{"count":1,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/13144\/revisions"}],"predecessor-version":[{"id":13145,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/13144\/revisions\/13145"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=13144"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=13144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}