{"id":5564,"date":"2022-07-05T17:48:46","date_gmt":"2022-07-05T17:48:46","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=5564"},"modified":"2026-04-22T15:23:48","modified_gmt":"2026-04-22T15:23:48","password":"","slug":"add-image-switch-on-hover-for-product-archives","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/add-image-switch-on-hover-for-product-archives\/","title":{"rendered":"How to Add Image Switch on Hover for Product Archives"},"content":{"rendered":"\n<p>The Image Switch feature is part of the Kadence Theme. To add image switch on hover to your product archives, first ensure that you have added images to your individual products product gallery. The image shown when switched will pull from the first image in your product gallery. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/snake.png\" alt=\"\" class=\"wp-image-5584\" width=\"459\" height=\"434\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/snake.png 612w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/snake-300x283.png 300w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/figure><\/div>\n\n\n<p>Next, navigate to Customize &gt; WooCommerce &gt; Product Catalog &gt; Product Image Hover Switch. There you can choose which style of switch you would like. <\/p>\n\n\n\n<p>Fade:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/fade.gif\" alt=\"\" class=\"wp-image-5578\" width=\"675\" height=\"444\" \/><\/figure><\/div>\n\n\n<p>Slide:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/slide.gif\" alt=\"\" class=\"wp-image-5580\" width=\"675\" height=\"444\" \/><\/figure><\/div>\n\n\n<p>Zoom:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/zoom.gif\" alt=\"\" class=\"wp-image-5581\" width=\"675\" height=\"444\" \/><\/figure><\/div>\n\n\n<p>Flip:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2022\/07\/flip.gif\" alt=\"\" class=\"wp-image-5579\" width=\"675\" height=\"444\" \/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>The Image Switch feature is part of the Kadence Theme. To add image switch on hover to your product archives, first ensure that you have added images to your individual products product gallery. The image shown when switched will pull from the first image in your product gallery. Next, navigate to Customize &gt; WooCommerce &gt;&#8230;<\/p>\n","protected":false},"author":1889,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[409],"doc_tag":[],"knowledge_base":[6],"class_list":["post-5564","docs","type-docs","status-publish","hentry","doc_category-theme-woocommerce","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":77,"total_views":"4496","reactions":{"happy":"0","normal":"1","sad":"0"},"author_info":{"display_name":"Hannah","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/ritner-hans\/"},"doc_category_info":[{"term_name":"Woocommerce","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-woocommerce\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":409,"label":"Woocommerce"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1889"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=5564"}],"version-history":[{"count":6,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5564\/revisions"}],"predecessor-version":[{"id":16770,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5564\/revisions\/16770"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=5564"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=5564"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=5564"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=5564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}