{"id":392478,"date":"2026-11-01T09:04:33","date_gmt":"2026-11-01T09:04:33","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/shopnook-shoppable-images-for-woocommerce\/"},"modified":"2026-11-01T09:33:51","modified_gmt":"2026-11-01T09:33:51","slug":"shopnook-shoppable-images","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/shopnook-shoppable-images\/","author":12569545,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.1.0","stable_tag":"1.1.0","tested":"7.1.4","requires":"6.5","requires_php":"7.4","requires_plugins":null,"header_name":"Shopnook \u2013 Shoppable Images for WooCommerce, EDD & SureCart","header_author":"Sanjay Shankar","header_description":"Tag WooCommerce products on any image or gallery in the block editor. Pins open product cards with add to cart, galleries get Instagram, masonry and stories layouts, and an analytics dashboard shows views, clicks and the sales they bring.","assets_banners_color":"e4d9cb","last_updated":"2026-11-01 09:33:51","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/buymeacoffee.com\/sanjayshankar","header_plugin_uri":"https:\/\/github.com\/sanjuacodez\/shopnook","header_author_uri":"https:\/\/sanjayshankar.me","rating":0,"author_block_rating":0,"active_installs":0,"downloads":132,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"Sanju Shankar","date":"2026-11-01 09:09:05","revision":3777729},"1.1.0":{"tag":"1.1.0","author":"Sanju Shankar","date":"2026-11-01 09:33:51","revision":3777772}},"upgrade_notice":{"1.1.0":"<p>Adds Easy Digital Downloads and SureCart support, makes WooCommerce optional, and fixes prices with &quot;$&quot; text going missing.<\/p>","1.0.0":"<p>First release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.gif":{"filename":"icon-128x128.gif","revision":3777723,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3777723,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3777995,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3777995,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3778019,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"meta\":{\"title\":\"Shopnook demo: a home-goods shop with shoppable images\",\"description\":\"Installs WooCommerce and Shopnook, adds products, a shoppable lookbook post, three shoppable galleries and two months of stats.\",\"author\":\"sanju-shankar\",\"categories\":[\"Ecommerce\"]},\"landingPage\":\"\\\/autumn-lookbook-warm-neutrals-at-home\\\/\",\"preferredVersions\":{\"php\":\"8.3\",\"wp\":\"latest\"},\"features\":{\"networking\":true},\"login\":true,\"steps\":[{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"woocommerce\"},\"options\":{\"activate\":true}},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"shopnook-shoppable-images\"},\"options\":{\"activate\":true}},{\"step\":\"setSiteOptions\",\"options\":{\"blogname\":\"Nook & Co. Home (Shopnook demo)\",\"permalink_structure\":\"\\\/%postname%\\\/\"}},{\"step\":\"runPHP\",\"code\":\"<?php\\nrequire_once '\\\/wordpress\\\/wp-load.php';\\n\\\/**\\n * Demo content for WordPress Playground (Live Preview and local testing).\\n *\\n * Creates a small home-goods shop: products with generated photos, a\\n * lookbook post with shoppable images, three shoppable galleries and two\\n * months of stats. Not shipped with the plugin; bin\\\/build-blueprint puts the\\n * wp-load.php require in front of this file when it embeds it.\\n *\\\/\\n\\ndefined( 'ABSPATH' ) || exit;\\n\\nrequire_once ABSPATH . 'wp-admin\\\/includes\\\/image.php';\\n\\n\\\/**\\n * Saves a GD image as a Media Library attachment.\\n *\\n * @param GdImage|resource $im    Image.\\n * @param string           $name  File name without extension.\\n * @param string           $title Title \\\/ alt text.\\n * @return int Attachment ID.\\n *\\\/\\nfunction shopnook_demo_attach( $im, $name, $title ) {\\n\\tob_start();\\n\\timagejpeg( $im, null, 86 );\\n\\t$bytes = ob_get_clean();\\n\\timagedestroy( $im );\\n\\t$upload = wp_upload_bits( $name . '.jpg', null, $bytes );\\n\\t$id     = wp_insert_attachment(\\n\\t\\tarray(\\n\\t\\t\\t'post_mime_type' => 'image\\\/jpeg',\\n\\t\\t\\t'post_title'     => $title,\\n\\t\\t\\t'post_status'    => 'inherit',\\n\\t\\t),\\n\\t\\t$upload['file']\\n\\t);\\n\\twp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $upload['file'] ) );\\n\\tupdate_post_meta( $id, '_wp_attachment_image_alt', $title );\\n\\treturn $id;\\n}\\n\\n\\\/**\\n * A colour from hex.\\n *\\n * @param GdImage|resource $im  Image.\\n * @param string           $hex Colour.\\n * @return int\\n *\\\/\\nfunction shopnook_demo_color( $im, $hex ) {\\n\\t$hex = ltrim( $hex, '#' );\\n\\treturn imagecolorallocate( $im, hexdec( substr( $hex, 0, 2 ) ), hexdec( substr( $hex, 2, 2 ) ), hexdec( substr( $hex, 4, 2 ) ) );\\n}\\n\\n\\\/**\\n * Vertical gradient fill.\\n *\\n * @param GdImage|resource $im   Image.\\n * @param string           $from Top colour.\\n * @param string           $to   Bottom colour.\\n *\\\/\\nfunction shopnook_demo_gradient( $im, $from, $to ) {\\n\\t$w = imagesx( $im );\\n\\t$h = imagesy( $im );\\n\\t$a = sscanf( ltrim( $from, '#' ), '%02x%02x%02x' );\\n\\t$b = sscanf( ltrim( $to, '#' ), '%02x%02x%02x' );\\n\\tfor ( $y = 0; $y < $h; $y++ ) {\\n\\t\\t$t = $y \\\/ max( 1, $h - 1 );\\n\\t\\t$c = imagecolorallocate( $im, (int) ( $a[0] + ( $b[0] - $a[0] ) * $t ), (int) ( $a[1] + ( $b[1] - $a[1] ) * $t ), (int) ( $a[2] + ( $b[2] - $a[2] ) * $t ) );\\n\\t\\timageline( $im, 0, $y, $w, $y, $c );\\n\\t}\\n}\\n\\n\\\/**\\n * Draws one object; shapes are in a 0\\u2013100 coordinate space.\\n *\\n * @param GdImage|resource $im    Image.\\n * @param string           $shape Shape.\\n * @param float            $x     Centre x (%).\\n * @param float            $y     Centre y (%).\\n * @param float            $s     Size (% of width).\\n * @param string           $color Colour.\\n *\\\/\\nfunction shopnook_demo_object( $im, $shape, $x, $y, $s, $color ) {\\n\\t$w  = imagesx( $im );\\n\\t$h  = imagesy( $im );\\n\\t$cx = (int) ( $x \\\/ 100 * $w );\\n\\t$cy = (int) ( $y \\\/ 100 * $h );\\n\\t$r  = (int) ( $s \\\/ 100 * $w \\\/ 2 );\\n\\t$c  = shopnook_demo_color( $im, $color );\\n\\t$sh = imagecolorallocatealpha( $im, 0, 0, 0, 100 );\\n\\timagefilledellipse( $im, $cx, $cy + (int) ( $r * 1.05 ), (int) ( $r * 2.2 ), (int) ( $r * 0.35 ), $sh );\\n\\tswitch ( $shape ) {\\n\\t\\tcase 'vase':\\n\\t\\t\\timagefilledellipse( $im, $cx, $cy + (int) ( $r * 0.3 ), (int) ( $r * 1.3 ), (int) ( $r * 1.4 ), $c );\\n\\t\\t\\timagefilledrectangle( $im, $cx - (int) ( $r * 0.25 ), $cy - (int) ( $r * 0.9 ), $cx + (int) ( $r * 0.25 ), $cy, $c );\\n\\t\\t\\tbreak;\\n\\t\\tcase 'lamp':\\n\\t\\t\\timagefilledpolygon( $im, array( $cx - (int) ( $r * 0.8 ), $cy - (int) ( $r * 0.2 ), $cx + (int) ( $r * 0.8 ), $cy - (int) ( $r * 0.2 ), $cx + (int) ( $r * 0.5 ), $cy - $r, $cx - (int) ( $r * 0.5 ), $cy - $r ), 4, $c );\\n\\t\\t\\timagefilledrectangle( $im, $cx - 4, $cy - (int) ( $r * 0.2 ), $cx + 4, $cy + (int) ( $r * 0.8 ), shopnook_demo_color( $im, '#3b3026' ) );\\n\\t\\t\\timagefilledellipse( $im, $cx, $cy + (int) ( $r * 0.85 ), (int) ( $r * 0.9 ), (int) ( $r * 0.2 ), shopnook_demo_color( $im, '#3b3026' ) );\\n\\t\\t\\tbreak;\\n\\t\\tcase 'table':\\n\\t\\t\\timagefilledrectangle( $im, $cx - $r, $cy - (int) ( $r * 0.15 ), $cx + $r, $cy + (int) ( $r * 0.05 ), $c );\\n\\t\\t\\timagefilledrectangle( $im, $cx - (int) ( $r * 0.85 ), $cy, $cx - (int) ( $r * 0.72 ), $cy + $r, $c );\\n\\t\\t\\timagefilledrectangle( $im, $cx + (int) ( $r * 0.72 ), $cy, $cx + (int) ( $r * 0.85 ), $cy + $r, $c );\\n\\t\\t\\tbreak;\\n\\t\\tcase 'cushion':\\n\\t\\t\\timagefilledellipse( $im, $cx, $cy, (int) ( $r * 2 ), (int) ( $r * 1.5 ), $c );\\n\\t\\t\\tbreak;\\n\\t\\tcase 'rug':\\n\\t\\t\\timagefilledellipse( $im, $cx, $cy, (int) ( $r * 2 ), (int) ( $r * 0.55 ), $c );\\n\\t\\t\\tbreak;\\n\\t\\tcase 'throw':\\n\\t\\t\\timagefilledrectangle( $im, $cx - $r, $cy - (int) ( $r * 0.5 ), $cx + $r, $cy + (int) ( $r * 0.5 ), $c );\\n\\t\\t\\tfor ( $i = -3; $i <= 3; $i++ ) {\\n\\t\\t\\t\\timageline( $im, $cx + (int) ( $i * $r \\\/ 3.5 ), $cy - (int) ( $r * 0.5 ), $cx + (int) ( $i * $r \\\/ 3.5 ), $cy + (int) ( $r * 0.5 ), shopnook_demo_color( $im, '#ffffff' ) );\\n\\t\\t\\t}\\n\\t\\t\\tbreak;\\n\\t\\tdefault:\\n\\t\\t\\timagefilledrectangle( $im, $cx - $r, $cy - $r, $cx + $r, $cy + $r, $c );\\n\\t}\\n}\\n\\n\\\/**\\n * Builds the demo shop.\\n *\\\/\\nfunction shopnook_blueprint_demo() {\\n\\tglobal $wp_rewrite, $wpdb;\\n\\t$wp_rewrite->set_permalink_structure( '\\\/%postname%\\\/' );\\n\\tflush_rewrite_rules( false );\\n\\tupdate_option( 'woocommerce_currency', 'USD' );\\n\\tupdate_option( 'woocommerce_onboarding_profile', array( 'skipped' => true ) );\\n\\n\\t\\\/\\\/ name, price, sale price, shape, colour, rating.\\n\\t$catalogue = array(\\n\\t\\tarray( 'Stoneware Vase', '48', '', 'vase', '#b5643c', 4.8 ),\\n\\t\\tarray( 'Linen Table Lamp', '129', '99', 'lamp', '#e9dcc4', 4.6 ),\\n\\t\\tarray( 'Oak Side Table', '240', '', 'table', '#9a6b3f', 4.9 ),\\n\\t\\tarray( 'Boucl\\u00e9 Cushion', '39', '', 'cushion', '#efe7da', 4.4 ),\\n\\t\\tarray( 'Jute Round Rug', '180', '149', 'rug', '#c9a66b', 4.2 ),\\n\\t\\tarray( 'Waffle Cotton Throw', '72', '', 'throw', '#5f7a6a', 4.7 ),\\n\\t);\\n\\n\\t$products = array();\\n\\tforeach ( $catalogue as $i => $item ) {\\n\\t\\t$im = imagecreatetruecolor( 800, 800 );\\n\\t\\tshopnook_demo_gradient( $im, '#f4efe8', '#e2d8ca' );\\n\\t\\tshopnook_demo_object( $im, $item[3], 50, 52, 48, $item[4] );\\n\\t\\t$image = shopnook_demo_attach( $im, 'product-' . ( $i + 1 ), $item[0] );\\n\\n\\t\\t$product = new WC_Product_Simple();\\n\\t\\t$product->set_name( $item[0] );\\n\\t\\t$product->set_status( 'publish' );\\n\\t\\t$product->set_regular_price( $item[1] );\\n\\t\\tif ( $item[2] ) {\\n\\t\\t\\t$product->set_sale_price( $item[2] );\\n\\t\\t}\\n\\t\\t$product->set_short_description( 'Made in small batches with natural materials. Free returns within 30 days.' );\\n\\t\\t$product->set_image_id( $image );\\n\\t\\t$product->set_average_rating( $item[5] );\\n\\t\\t$product->set_rating_counts( array( 5 => 12 + $i * 3 ) );\\n\\t\\t$product->set_review_count( 12 + $i * 3 );\\n\\t\\t$products[ $item[3] ] = $product->save();\\n\\t}\\n\\n\\t\\\/\\\/ One variable product, to show \\\"Select options\\\".\\n\\t$variable = new WC_Product_Variable();\\n\\t$variable->set_name( 'Ceramic Mug Set' );\\n\\t$variable->set_status( 'publish' );\\n\\t$attribute = new WC_Product_Attribute();\\n\\t$attribute->set_name( 'Colour' );\\n\\t$attribute->set_options( array( 'Sand', 'Sage' ) );\\n\\t$attribute->set_variation( true );\\n\\t$attribute->set_visible( true );\\n\\t$variable->set_attributes( array( $attribute ) );\\n\\t$im = imagecreatetruecolor( 800, 800 );\\n\\tshopnook_demo_gradient( $im, '#f4efe8', '#e2d8ca' );\\n\\tshopnook_demo_object( $im, 'vase', 50, 55, 30, '#8aa38f' );\\n\\t$variable->set_image_id( shopnook_demo_attach( $im, 'product-mugs', 'Ceramic Mug Set' ) );\\n\\t$variable_id = $variable->save();\\n\\tforeach ( array( 'Sand', 'Sage' ) as $colour ) {\\n\\t\\t$variation = new WC_Product_Variation();\\n\\t\\t$variation->set_parent_id( $variable_id );\\n\\t\\t$variation->set_attributes( array( 'colour' => $colour ) );\\n\\t\\t$variation->set_regular_price( '34' );\\n\\t\\t$variation->set_status( 'publish' );\\n\\t\\t$variation->save();\\n\\t}\\n\\t$products['mugs'] = $variable_id;\\n\\n\\t\\\/\\\/ Room photos: where each object sits, so pins land on them.\\n\\t$rooms = array(\\n\\t\\tarray(\\n\\t\\t\\t'title'   => 'Living room with oak side table',\\n\\t\\t\\t'from'    => '#d9cfc2',\\n\\t\\t\\t'to'      => '#a8998a',\\n\\t\\t\\t'objects' => array( array( 'rug', 50, 86, 60 ), array( 'table', 26, 62, 18 ), array( 'lamp', 26, 40, 12 ), array( 'cushion', 66, 58, 14 ), array( 'throw', 78, 66, 16 ) ),\\n\\t\\t),\\n\\t\\tarray(\\n\\t\\t\\t'title'   => 'Reading corner',\\n\\t\\t\\t'from'    => '#cfd6cc',\\n\\t\\t\\t'to'      => '#8e9b8b',\\n\\t\\t\\t'objects' => array( array( 'lamp', 70, 36, 14 ), array( 'cushion', 38, 60, 18 ), array( 'vase', 82, 70, 8 ) ),\\n\\t\\t),\\n\\t\\tarray(\\n\\t\\t\\t'title'   => 'Shelf styling',\\n\\t\\t\\t'from'    => '#e6ddd0',\\n\\t\\t\\t'to'      => '#c2b29d',\\n\\t\\t\\t'objects' => array( array( 'vase', 30, 50, 10 ), array( 'vase', 52, 52, 7 ), array( 'mugs', 74, 56, 10 ) ),\\n\\t\\t),\\n\\t\\tarray(\\n\\t\\t\\t'title'   => 'Bedroom morning light',\\n\\t\\t\\t'from'    => '#efe6da',\\n\\t\\t\\t'to'      => '#c4b3a0',\\n\\t\\t\\t'objects' => array( array( 'throw', 50, 62, 40 ), array( 'cushion', 36, 46, 14 ), array( 'lamp', 86, 44, 12 ) ),\\n\\t\\t),\\n\\t\\tarray(\\n\\t\\t\\t'title'   => 'Entryway',\\n\\t\\t\\t'from'    => '#d6d2cc',\\n\\t\\t\\t'to'      => '#9c958b',\\n\\t\\t\\t'objects' => array( array( 'table', 50, 58, 30 ), array( 'vase', 42, 38, 8 ), array( 'rug', 50, 90, 50 ) ),\\n\\t\\t),\\n\\t\\tarray(\\n\\t\\t\\t'title'   => 'Sunday table',\\n\\t\\t\\t'from'    => '#ece2d3',\\n\\t\\t\\t'to'      => '#b9a284',\\n\\t\\t\\t'objects' => array( array( 'table', 50, 66, 56 ), array( 'mugs', 40, 50, 10 ), array( 'vase', 62, 46, 9 ) ),\\n\\t\\t),\\n\\t);\\n\\n\\t$room_ids = array();\\n\\tforeach ( $rooms as $n => $room ) {\\n\\t\\t$tall = 3 === $n || 4 === $n;\\n\\t\\t$im   = imagecreatetruecolor( $tall ? 1080 : 1600, $tall ? 1440 : 1067 );\\n\\t\\tshopnook_demo_gradient( $im, $room['from'], $room['to'] );\\n\\t\\timagefilledrectangle( $im, 0, (int) ( imagesy( $im ) * 0.72 ), imagesx( $im ), imagesy( $im ), imagecolorallocatealpha( $im, 60, 45, 30, 90 ) );\\n\\t\\t$spots = array();\\n\\t\\tforeach ( $room['objects'] as $obj ) {\\n\\t\\t\\t$shape = 'mugs' === $obj[0] ? 'vase' : $obj[0];\\n\\t\\t\\t$color = 'mugs' === $obj[0] ? '#8aa38f' : $catalogue[ array_search( $obj[0], array_column( $catalogue, 3 ), true ) ][4];\\n\\t\\t\\tshopnook_demo_object( $im, $shape, $obj[1], $obj[2], $obj[3], $color );\\n\\t\\t\\t$spots[] = array(\\n\\t\\t\\t\\t'id'      => substr( md5( $room['title'] . $obj[0] . $obj[1] ), 0, 8 ),\\n\\t\\t\\t\\t'x'       => $obj[1],\\n\\t\\t\\t\\t'y'       => $obj[2],\\n\\t\\t\\t\\t'product' => $products[ $obj[0] ],\\n\\t\\t\\t\\t'label'   => '',\\n\\t\\t\\t);\\n\\t\\t}\\n\\t\\t$id = shopnook_demo_attach( $im, 'room-' . ( $n + 1 ), $room['title'] );\\n\\t\\tShopnook_Images::save( $id, array( 'hotspots' => $spots ) );\\n\\t\\t$room_ids[] = $id;\\n\\t}\\n\\n\\t$image_block = function ( $id, $settings, $caption = '' ) {\\n\\t\\t$url  = wp_get_attachment_image_url( $id, 'large' );\\n\\t\\t$alt  = esc_attr( get_post_meta( $id, '_wp_attachment_image_alt', true ) );\\n\\t\\t$json = wp_json_encode(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'id'       => $id,\\n\\t\\t\\t\\t'sizeSlug' => 'large',\\n\\t\\t\\t\\t'shopnook' => $settings,\\n\\t\\t\\t)\\n\\t\\t);\\n\\t\\t$cap  = $caption ? '<figcaption class=\\\"wp-element-caption\\\">' . esc_html( $caption ) . '<\\\/figcaption>' : '';\\n\\t\\treturn '<!-- wp:image ' . $json . ' --><figure class=\\\"wp-block-image size-large\\\"><img src=\\\"' . esc_url( $url ) . '\\\" alt=\\\"' . $alt . '\\\" class=\\\"wp-image-' . $id . '\\\"\\\/>' . $cap . '<\\\/figure><!-- \\\/wp:image -->';\\n\\t};\\n\\t$gallery_block = function ( $ids, $settings ) use ( $image_block ) {\\n\\t\\t$inner = '';\\n\\t\\tforeach ( $ids as $id ) {\\n\\t\\t\\t$inner .= $image_block( $id, new stdClass() );\\n\\t\\t}\\n\\t\\t$json = wp_json_encode(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'linkTo'   => 'none',\\n\\t\\t\\t\\t'shopnook' => $settings,\\n\\t\\t\\t)\\n\\t\\t);\\n\\t\\treturn '<!-- wp:gallery ' . $json . ' --><figure class=\\\"wp-block-gallery has-nested-images columns-default is-cropped\\\">' . $inner . '<\\\/figure><!-- \\\/wp:gallery -->';\\n\\t};\\n\\t$p = function ( $text ) {\\n\\t\\treturn '<!-- wp:paragraph --><p>' . esc_html( $text ) . '<\\\/p><!-- \\\/wp:paragraph -->';\\n\\t};\\n\\t$h = function ( $text ) {\\n\\t\\treturn '<!-- wp:heading --><h2 class=\\\"wp-block-heading\\\">' . esc_html( $text ) . '<\\\/h2><!-- \\\/wp:heading -->';\\n\\t};\\n\\n\\t$lookbook = wp_insert_post(\\n\\t\\tarray(\\n\\t\\t\\t'post_type'    => 'post',\\n\\t\\t\\t'post_status'  => 'publish',\\n\\t\\t\\t'post_title'   => 'Autumn Lookbook: Warm Neutrals at Home',\\n\\t\\t\\t'post_content' => $p( 'Soft textures, warm wood and a few handmade pieces. Tap the dots on any photo to shop the look.' )\\n\\t\\t\\t\\t. $image_block( $room_ids[0], array( 'enabled' => true ), 'Tooltip cards (the default).' )\\n\\t\\t\\t\\t. $p( 'Layer a jute rug under oak and linen for a room that feels finished but relaxed.' )\\n\\t\\t\\t\\t. $image_block( $room_ids[1], array( 'enabled' => true, 'overrides' => array( 'display' => 'list', 'pin_style' => 'number' ) ), 'Shop this look list with numbered pins.' )\\n\\t\\t\\t\\t. $image_block( $room_ids[2], array( 'enabled' => true, 'overrides' => array( 'display' => 'panel', 'pin_style' => 'bag', 'pin_bg' => '#ffffff', 'pin_color' => '#111111' ) ), 'Panel below the image, bag pins.' )\\n\\t\\t\\t\\t. $image_block( $room_ids[3], array( 'enabled' => true, 'overrides' => array( 'display' => 'drawer', 'pin_style' => 'pulse' ) ), 'Side drawer, pulsing pins.' )\\n\\t\\t\\t\\t. $image_block( $room_ids[4], array( 'enabled' => false ), 'Shoppable switched off: a plain image.' ),\\n\\t\\t)\\n\\t);\\n\\n\\t$galleries = wp_insert_post(\\n\\t\\tarray(\\n\\t\\t\\t'post_type'    => 'page',\\n\\t\\t\\t'post_status'  => 'publish',\\n\\t\\t\\t'post_title'   => 'Shop the Feed',\\n\\t\\t\\t'post_content' => $h( 'Instagram grid' ) . $gallery_block( $room_ids, array( 'enabled' => true, 'layout' => 'instagram' ) )\\n\\t\\t\\t\\t. $h( 'Stories' ) . $gallery_block( $room_ids, array( 'enabled' => true, 'layout' => 'stories' ) )\\n\\t\\t\\t\\t. $h( 'Masonry' ) . $gallery_block( $room_ids, array( 'enabled' => true, 'layout' => 'masonry' ) ),\\n\\t\\t)\\n\\t);\\n\\n\\t\\\/\\\/ About two months of activity, busier towards today.\\n\\t$table = Shopnook_DB::table();\\n\\tforeach ( range( 0, 59 ) as $age ) {\\n\\t\\t$day   = gmdate( 'Y-m-d', strtotime( current_time( 'Y-m-d' ) ) - $age * DAY_IN_SECONDS );\\n\\t\\t$scale = 1 + ( 60 - $age ) \\\/ 40;\\n\\t\\tforeach ( array_slice( $room_ids, 0, 4 ) as $n => $att ) {\\n\\t\\t\\t$views = (int) ( wp_rand( 30, 60 ) * $scale \\\/ ( $n + 1 ) );\\n\\t\\t\\t$wpdb->replace( $table, array( 'day' => $day, 'event' => 1, 'source' => 1, 'post_id' => $lookbook, 'attachment_id' => $att, 'product_id' => 0, 'hits' => $views, 'revenue' => 0 ) ); \\\/\\\/ phpcs:ignore WordPress.DB.DirectDatabaseQuery\\n\\t\\t\\tforeach ( $rooms[ $n ]['objects'] as $obj ) {\\n\\t\\t\\t\\t$product = $products[ $obj[0] ];\\n\\t\\t\\t\\t$opens   = (int) round( $views * wp_rand( 6, 14 ) \\\/ 100 );\\n\\t\\t\\t\\t$clicks  = (int) round( $opens * wp_rand( 25, 45 ) \\\/ 100 );\\n\\t\\t\\t\\t$carts   = (int) round( $clicks * wp_rand( 20, 40 ) \\\/ 100 );\\n\\t\\t\\t\\t$sold    = (int) round( $carts * wp_rand( 30, 60 ) \\\/ 100 );\\n\\t\\t\\t\\t$price   = (float) wc_get_product( $product )->get_price();\\n\\t\\t\\t\\tforeach ( array( 2 => $opens, 3 => $clicks, 4 => $carts, 5 => $sold ) as $event => $hits ) {\\n\\t\\t\\t\\t\\tif ( $hits ) {\\n\\t\\t\\t\\t\\t\\t$wpdb->replace( $table, array( 'day' => $day, 'event' => $event, 'source' => 1, 'post_id' => $lookbook, 'attachment_id' => $att, 'product_id' => $product, 'hits' => $hits, 'revenue' => 5 === $event ? $hits * $price : 0 ) ); \\\/\\\/ phpcs:ignore WordPress.DB.DirectDatabaseQuery\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tif ( $sold ) {\\n\\t\\t\\t\\t\\t$wpdb->query( $wpdb->prepare( 'INSERT INTO %i (day, event, source, post_id, attachment_id, product_id, hits, revenue) VALUES (%s, 6, 0, 0, 0, 0, %d, 0) ON DUPLICATE KEY UPDATE hits = hits + VALUES(hits)', $table, $day, max( 1, (int) ( $sold * 0.8 ) ) ) ); \\\/\\\/ phpcs:ignore WordPress.DB.DirectDatabaseQuery\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t$wpdb->replace( $table, array( 'day' => $day, 'event' => 1, 'source' => 2, 'post_id' => $galleries, 'attachment_id' => $room_ids[5], 'product_id' => 0, 'hits' => (int) ( wp_rand( 20, 40 ) * $scale ), 'revenue' => 0 ) ); \\\/\\\/ phpcs:ignore WordPress.DB.DirectDatabaseQuery\\n\\t}\\n\\n\\tupdate_option( 'shopnook_demo', array( 'lookbook' => $lookbook, 'galleries' => $galleries, 'rooms' => $room_ids, 'products' => $products ) );\\n}\\n\\nshopnook_blueprint_demo();\\n\"}]}"}},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3777723,"resolution":"1","location":"assets","locale":"","width":1152,"height":801},"screenshot-10.jpg":{"filename":"screenshot-10.jpg","revision":3777723,"resolution":"10","location":"assets","locale":"","width":1400,"height":875},"screenshot-11.jpg":{"filename":"screenshot-11.jpg","revision":3777723,"resolution":"11","location":"assets","locale":"","width":1400,"height":1460},"screenshot-12.jpg":{"filename":"screenshot-12.jpg","revision":3777723,"resolution":"12","location":"assets","locale":"","width":1400,"height":875},"screenshot-13.jpg":{"filename":"screenshot-13.jpg","revision":3777723,"resolution":"13","location":"assets","locale":"","width":1400,"height":1147},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3777723,"resolution":"2","location":"assets","locale":"","width":1280,"height":1180},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3777723,"resolution":"3","location":"assets","locale":"","width":1280,"height":860},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3777723,"resolution":"4","location":"assets","locale":"","width":1152,"height":1005},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":3777723,"resolution":"5","location":"assets","locale":"","width":1152,"height":795},"screenshot-6.jpg":{"filename":"screenshot-6.jpg","revision":3777723,"resolution":"6","location":"assets","locale":"","width":1400,"height":1094},"screenshot-7.jpg":{"filename":"screenshot-7.jpg","revision":3777723,"resolution":"7","location":"assets","locale":"","width":780,"height":1688},"screenshot-8.jpg":{"filename":"screenshot-8.jpg","revision":3777723,"resolution":"8","location":"assets","locale":"","width":1400,"height":875},"screenshot-9.jpg":{"filename":"screenshot-9.jpg","revision":3777723,"resolution":"9","location":"assets","locale":"","width":1400,"height":875}},"screenshots":{"1":"A shoppable image: tap a pin and a product card opens with the price, rating and Add to cart.","2":"The \"Shop this look\" list: numbered pins and every product listed under the photo.","3":"The Instagram-style gallery popup: the photo with its pins on one side and its products on the other.","4":"The stories carousel: tall slides with pins on every slide.","5":"A shoppable Instagram grid with product counts on each tile.","6":"The side drawer display mode.","7":"On phones, products open in a bottom sheet.","8":"Tagging products: click the photo to drop pins and search products by name or SKU.","9":"The Shopnook panel on the Image block, with Media Library pins and \"Customize for this post\".","10":"Tagging an image in the Media Library, with its own look and display settings.","11":"The analytics dashboard: revenue, views, clicks, the trend chart, the funnel and top images, products and posts.","12":"Settings: pin styles with a live preview.","13":"Settings: display modes, phone behaviour and product card fields."}},"plugin_section":[],"plugin_tags":[5484,253575,145850,218637,286],"plugin_category":[45],"plugin_contributors":[238683],"plugin_business_model":[],"class_list":["post-392478","plugin","type-plugin","status-publish","hentry","plugin_tags-easy-digital-downloads","plugin_tags-shop-the-look","plugin_tags-shoppable-images","plugin_tags-surecart","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-sanju-shankar","plugin_committers-sanju-shankar"],"banners":{"banner":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/banner-772x250.jpg?rev=3777995","banner_2x":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/banner-1544x500.jpg?rev=3777995","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/icon-128x128.gif?rev=3777723","icon_2x":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/icon-256x256.gif?rev=3777723","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-1.jpg?rev=3777723","caption":"A shoppable image: tap a pin and a product card opens with the price, rating and Add to cart."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-2.jpg?rev=3777723","caption":"The \"Shop this look\" list: numbered pins and every product listed under the photo."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-3.jpg?rev=3777723","caption":"The Instagram-style gallery popup: the photo with its pins on one side and its products on the other."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-4.jpg?rev=3777723","caption":"The stories carousel: tall slides with pins on every slide."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-5.jpg?rev=3777723","caption":"A shoppable Instagram grid with product counts on each tile."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-6.jpg?rev=3777723","caption":"The side drawer display mode."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-7.jpg?rev=3777723","caption":"On phones, products open in a bottom sheet."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-8.jpg?rev=3777723","caption":"Tagging products: click the photo to drop pins and search products by name or SKU."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-9.jpg?rev=3777723","caption":"The Shopnook panel on the Image block, with Media Library pins and \"Customize for this post\"."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-10.jpg?rev=3777723","caption":"Tagging an image in the Media Library, with its own look and display settings."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-11.jpg?rev=3777723","caption":"The analytics dashboard: revenue, views, clicks, the trend chart, the funnel and top images, products and posts."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-12.jpg?rev=3777723","caption":"Settings: pin styles with a live preview."},{"src":"https:\/\/ps.w.org\/shopnook-shoppable-images\/assets\/screenshot-13.jpg?rev=3777723","caption":"Settings: display modes, phone behaviour and product card fields."}],"raw_content":"<!--section=description-->\n<p>Shopnook is a shoppable images plugin for <strong>WooCommerce<\/strong>, <strong>Easy Digital Downloads (EDD)<\/strong> and <strong>SureCart<\/strong>. Add product hotspots (product tags) to any photo, build \"shop the look\" lookbooks, and turn galleries into shoppable Instagram-style feeds, all with the WordPress blocks you already use.<\/p>\n\n<p>Shopnook turns the photos in your posts and pages into shoppable images. Switch on \"Shoppable image\" on any Image block, click the photo to drop pins, and pick a product from your store for each. Visitors tap a pin to see the product, add it to the cart without leaving the page, or open the product page.<\/p>\n\n<p>There is no separate builder, shortcode or custom post type to learn. You tag products where the image already lives: in the block editor, or once in the Media Library so the photo is shoppable everywhere you use it. Turn the switch off and it is a normal image again.<\/p>\n\n<p>Then the dashboard shows what each image actually does for your shop: views, pin opens, product clicks, add to carts, orders and revenue.<\/p>\n\n<h4>Works with your store<\/h4>\n\n<p>Shopnook needs one of these e-commerce plugins. Use one, or several on the same site:<\/p>\n\n<ul>\n<li><strong>WooCommerce:<\/strong> physical and digital products. Simple products add to the cart right from the card; variable, grouped and external products link to their page. Sales are credited when the order is paid.<\/li>\n<li><strong>Easy Digital Downloads (EDD):<\/strong> ebooks, courses, software, templates, music and other downloads. Single-price downloads add to the cart right from the card; downloads with price options link to their page. Sales are credited when the order is complete.<\/li>\n<li><strong>SureCart:<\/strong> physical products, digital products and subscriptions. The card's <strong>Buy now<\/strong> button opens SureCart's instant checkout (or the product page), and sales are credited when SureCart confirms the checkout.<\/li>\n<\/ul>\n\n<p>Refunds and cancellations are taken back out of the stats in all three. Other store plugins are planned; tell us which one you use.<\/p>\n\n<p>\ud83d\udc49 <strong>Try it before you install:<\/strong> click <strong>Live Preview<\/strong> at the top of this page to open a demo shop with a shoppable lookbook and three gallery layouts.<\/p>\n\n<h4>Who it is for<\/h4>\n\n<ul>\n<li><strong>Fashion and apparel stores:<\/strong> turn outfit photos and lookbooks into \"shop the look\" pages, one pin per piece.<\/li>\n<li><strong>Home, furniture and decor shops:<\/strong> tag every item in a styled room, from the sofa to the vase on the shelf.<\/li>\n<li><strong>Beauty and skincare brands:<\/strong> tag the products in a routine, a flat lay or a \"what's in my bag\" photo.<\/li>\n<li><strong>Food, kitchen and recipe sites:<\/strong> tag the cookware, ingredients and tableware in a recipe photo.<\/li>\n<li><strong>Gift guides and seasonal campaigns:<\/strong> one photo per guide with every gift tagged, plus a \"Shop this look\" list underneath.<\/li>\n<li><strong>Brand merch and company stores:<\/strong> show tees, hoodies, mugs and stickers styled together on a desk or in the wild.<\/li>\n<li><strong>Blogs that sell:<\/strong> keep writing as you do now and make the photos in your posts shop for you.<\/li>\n<li><strong>Instagram-style feeds:<\/strong> turn a gallery into a shoppable grid or a stories carousel that feels familiar to social shoppers.<\/li>\n<li><strong>Creators and influencers with their own shop:<\/strong> tag your products in the photos you already post on your blog.<\/li>\n<li><strong>Agencies and freelancers:<\/strong> give clients shoppable lookbooks and campaign pages without custom code or a page builder.<\/li>\n<li><strong>Digital product sellers (EDD):<\/strong> course creators, designers, photographers, musicians and software makers who sell downloads. Tag the ebook cover, the template preview or the preset in a photo.<\/li>\n<li><strong>SureCart stores:<\/strong> creators and small brands selling products and subscriptions with SureCart's fast checkout.<\/li>\n<\/ul>\n\n<h4>Ideas: where to use shoppable images<\/h4>\n\n<ul>\n<li><strong>Lookbooks and collections:<\/strong> a seasonal lookbook post where every outfit or room is shoppable.<\/li>\n<li><strong>Shop the look pages:<\/strong> one hero photo with a \"Shop this look\" list of every product under it.<\/li>\n<li><strong>Blog posts and tutorials:<\/strong> \"how to style\", \"my morning routine\" or \"what I cook with\" posts that sell the products in them.<\/li>\n<li><strong>Gift guides:<\/strong> \"gifts under $50\" or holiday guides with every gift tagged.<\/li>\n<li><strong>Product launches and campaigns:<\/strong> a launch photo with the new range tagged, linked from your newsletter or social posts.<\/li>\n<li><strong>Home page and landing pages:<\/strong> a shoppable hero image or a stories carousel at the top of the page.<\/li>\n<li><strong>Customer and community photos:<\/strong> real photos of your products in use, tagged and ready to buy.<\/li>\n<li><strong>Digital product showcases:<\/strong> a desk setup with the Notion template, Lightroom presets or icon pack you sell, each one tagged.<\/li>\n<li><strong>Course and ebook promotions:<\/strong> a photo of your workspace or a book mockup with the course or ebook tagged, sold through EDD or SureCart.<\/li>\n<li><strong>A shoppable feed on your own site:<\/strong> upload your social photos to a gallery and show them as an Instagram grid or stories, with products tagged.<\/li>\n<\/ul>\n\n<h4>How it works<\/h4>\n\n<ol>\n<li>Select an Image block in any post or page and switch on <strong>Shoppable image<\/strong> in the Shopnook panel.<\/li>\n<li>Click <strong>Tag products<\/strong>, click the photo where each product is, and search for the product by name or SKU.<\/li>\n<li>Publish. Pins appear on the photo, and the dashboard starts counting.<\/li>\n<\/ol>\n\n<p>Prefer to tag once and reuse? Open the image in the <strong>Media Library<\/strong>, click <strong>Tag products<\/strong>, and those pins follow the image into every post where it is shoppable. If one post needs different products, click <strong>Customize for this post<\/strong> in the block settings.<\/p>\n\n<p>The most specific setting wins: <strong>the block in your post, then the Media Library image, then the plugin settings.<\/strong><\/p>\n\n<h4>Features<\/h4>\n\n<p><strong>Tagging<\/strong><\/p>\n\n<ul>\n<li>\"Shoppable image\" switch on the core Image block, and \"Shoppable gallery\" on the core Gallery block. No new blocks.<\/li>\n<li>Pin editor right in the block editor: click to place, drag to move, arrow keys to nudge, Delete to remove.<\/li>\n<li>Product search by name or SKU, with image, price and stock shown as you pick.<\/li>\n<li>Optional label per pin, shown on hover.<\/li>\n<li>Unlimited pins per image.<\/li>\n<li>Tag images in the Media Library and reuse the pins everywhere, or give one post its own pins.<\/li>\n<li>A \"Products\" column in the Media Library list shows how many products each image has.<\/li>\n<\/ul>\n\n<p><strong>Pins<\/strong><\/p>\n\n<ul>\n<li>Seven styles: dot, pulsing dot, plus, number, shopping bag, price tag, or your own image (your logo works well).<\/li>\n<li>Three sizes, your own pin and icon colours, and pins always visible or only on hover.<\/li>\n<li>Hover labels with the product name.<\/li>\n<\/ul>\n\n<p><strong>How the product opens<\/strong><\/p>\n\n<ul>\n<li><strong>Tooltip card:<\/strong> a small card next to the pin.<\/li>\n<li><strong>Panel below the image:<\/strong> the product opens under the photo, and the next pin swaps it.<\/li>\n<li><strong>Side drawer:<\/strong> a panel slides in from the edge of the screen.<\/li>\n<li><strong>\"Shop this look\" list:<\/strong> every product listed under the photo with numbered pins that highlight their product.<\/li>\n<li><strong>On phones:<\/strong> a bottom sheet that is easy to use with one thumb, the desktop view, or a panel below the image.<\/li>\n<\/ul>\n\n<p><strong>Product cards<\/strong><\/p>\n\n<ul>\n<li>Choose what the card shows: product image, name, price, sale badge, star rating, short description, Add to cart and View product.<\/li>\n<li>Your own button text and button colour.<\/li>\n<li><strong>Add to cart in place<\/strong> for simple products, with your theme's mini cart updated and a \"View cart\" link.<\/li>\n<li>Variable and grouped products show \"Select options\" and link to the product page. External products link to their own site.<\/li>\n<li>Out of stock products are labelled, and pins for deleted or unpublished products hide themselves.<\/li>\n<\/ul>\n\n<p><strong>Shoppable galleries<\/strong><\/p>\n\n<ul>\n<li><strong>Instagram grid:<\/strong> square tiles with a product count badge. A photo opens in a popup with its pins on one side and its products on the other, like an Instagram post. Arrow keys move between photos.<\/li>\n<li><strong>Masonry:<\/strong> Pinterest-style columns that keep each photo's shape, with the same popup.<\/li>\n<li><strong>Stories carousel:<\/strong> tall slides visitors swipe through, with pins on every slide. Each slide crops around its pins so they stay in view.<\/li>\n<li>Set the number of columns per gallery, and the default layout, columns, spacing and product count badge for the whole site.<\/li>\n<\/ul>\n\n<p><strong>Look and feel per image<\/strong><\/p>\n\n<p>Every look setting (pin style, size, colours, display mode, phone behaviour, card fields, button text and colour) can be set site-wide, overridden for one image in the Media Library, and overridden again for one post in the block settings.<\/p>\n\n<h4>Analytics: see what your images sell<\/h4>\n\n<p>The Shopnook dashboard shows, for any date range and compared with the previous period:<\/p>\n\n<ul>\n<li><strong>Revenue<\/strong> from shoppable images, front and centre.<\/li>\n<li><strong>Views, pin opens, product clicks, add to carts, orders and items sold.<\/strong><\/li>\n<li>A <strong>trend chart<\/strong> for each measure, with a table view.<\/li>\n<li>A <strong>view-to-sale funnel<\/strong> with the conversion rate at every step.<\/li>\n<li><strong>Top images, top products and top posts and galleries<\/strong>, ranked by revenue.<\/li>\n<li>Orders that came from an image are marked on the WooCommerce and EDD order screens.<\/li>\n<\/ul>\n\n<p><strong>How sales are credited:<\/strong> when a visitor clicks a product on a shoppable image (or adds it to the cart from the card), Shopnook remembers the product and the image. If that product is bought within the credit window (7 days by default, adjustable from 1 to 90), the order line is credited to the image. The most recent click wins. Only paid orders count, and cancelled, refunded or failed orders are taken back out.<\/p>\n\n<h4>Privacy first<\/h4>\n\n<ul>\n<li>Counts are anonymous daily totals. No personal data or IP addresses are stored.<\/li>\n<li>One first-party cookie, <code>shopnook_ref<\/code>, remembers which image led to a product, for the credit window only. It holds product and image IDs and nothing else.<\/li>\n<li>Works with cookie consent plugins that support the WP Consent API: nothing is counted and no cookie is set until visitors allow statistics cookies.<\/li>\n<li>Visits by logged-in editors and admins are not counted (you can change this), and neither are bots.<\/li>\n<li>Suggested text is added to your privacy policy page.<\/li>\n<li>Choose how long stats are kept: 3 months to forever.<\/li>\n<li>No third-party tracking scripts. Shoppable image stats stay in your WordPress database. The only outside services are the optional, admin-only newsletter sign-up and deactivation survey described under External services.<\/li>\n<\/ul>\n\n<h4>Fast and light<\/h4>\n\n<ul>\n<li>Scripts and styles load only on pages with a shoppable image or gallery.<\/li>\n<li>The front-end script has no dependencies: no jQuery, no frameworks.<\/li>\n<li>Pins are added when the page renders, so they work with page caching.<\/li>\n<li>Stats are stored as small daily totals, so the table stays small even on busy shops.<\/li>\n<\/ul>\n\n<h4>Accessible<\/h4>\n\n<ul>\n<li>Pins are real buttons with product names for screen readers.<\/li>\n<li>Full keyboard support: Tab to a pin, Enter to open, Escape to close, and focus returns to the pin.<\/li>\n<li>The drawer, bottom sheet and gallery popup trap focus while open.<\/li>\n<li>Respects \"reduce motion\" settings.<\/li>\n<\/ul>\n\n<h4>Built the WordPress way<\/h4>\n\n<ul>\n<li>Uses the core Image and Gallery blocks. Deactivate Shopnook and you have ordinary images and galleries again; nothing in your content breaks.<\/li>\n<li>Works with block themes and classic themes.<\/li>\n<li>Compatible with WooCommerce High-Performance Order Storage (HPOS) and the Cart and Checkout blocks.<\/li>\n<li>Translation ready.<\/li>\n<\/ul>\n\n<h4>Need a custom feature?<\/h4>\n\n<p>Want Shopnook to do something it does not do yet, such as a custom layout, an integration with another plugin, or help setting it up on your store? <a href=\"https:\/\/sanjayshankar.me\/contact\/\">Get in touch<\/a>. I build custom WordPress and WooCommerce features, and good ideas often make it into the free plugin for everyone. Feature requests are also welcome in the <a href=\"https:\/\/wordpress.org\/support\/plugin\/shopnook-shoppable-images\/\">support forum<\/a>.<\/p>\n\n<h4>For developers<\/h4>\n\n<ul>\n<li><code>shopnook_product_card<\/code> filter: change the data a product card shows. The card's <code>store<\/code> key says which store it came from.<\/li>\n<li><code>shopnook_stores<\/code> filter: add your own store integration by extending <code>Shopnook_Store<\/code>.<\/li>\n<li>Pins on an image are stored in the <code>_shopnook_image<\/code> attachment meta; per-post pins live in the block's <code>shopnook<\/code> attribute.<\/li>\n<li>REST routes under <code>shopnook\/v1<\/code>.<\/li>\n<li>Development happens on <a href=\"https:\/\/github.com\/sanjuacodez\/shopnook\">GitHub<\/a>. Bug reports and pull requests are welcome.<\/li>\n<\/ul>\n\n<h4>External services<\/h4>\n\n<p>Used only when an admin chooses to. Visitors never trigger them.<\/p>\n\n<ul>\n<li><strong>Newsletter (Brevo):<\/strong> when an admin clicks Subscribe, their email, first name and the plugin name are sent to Brevo. <a href=\"https:\/\/www.brevo.com\/legal\/termsofuse\/\">Terms<\/a>, <a href=\"https:\/\/www.brevo.com\/legal\/privacypolicy\/\">Privacy<\/a><\/li>\n<li><strong>Deactivation survey (Google Apps Script):<\/strong> when an admin clicks Send &amp; deactivate, the reason, comment, plugin, WordPress, WooCommerce and PHP versions, admin language and, if the contact box is ticked, their name and email are sent to the author's Google Sheet. <a href=\"https:\/\/policies.google.com\/terms\">Terms<\/a>, <a href=\"https:\/\/policies.google.com\/privacy\">Privacy<\/a><\/li>\n<\/ul>\n\n<h4>Support Shopnook<\/h4>\n\n<p>Shopnook is free, with no locked features and no ads. If it helps your shop:<\/p>\n\n<ul>\n<li>\u2615 <a href=\"https:\/\/buymeacoffee.com\/sanjayshankar\">Buy me a coffee<\/a> to support development.<\/li>\n<li>\u2b50 <a href=\"https:\/\/wordpress.org\/support\/plugin\/shopnook-shoppable-images\/reviews\/#new-post\">Leave a review<\/a> so other store owners can find it.<\/li>\n<li>\ud83d\udcac Questions or problems: the <a href=\"https:\/\/wordpress.org\/support\/plugin\/shopnook-shoppable-images\/\">support forum<\/a>.<\/li>\n<li>\ud83d\udee0 Code, bug reports and pull requests: <a href=\"https:\/\/github.com\/sanjuacodez\/shopnook\">GitHub<\/a>.<\/li>\n<\/ul>\n\n<h4>About the author<\/h4>\n\n<p>Shopnook is built and maintained by <a href=\"https:\/\/sanjayshankar.me\">Sanjay Shankar<\/a>.<\/p>\n\n<ul>\n<li>Website: <a href=\"https:\/\/sanjayshankar.me\">sanjayshankar.me<\/a><\/li>\n<li>Contact: <a href=\"https:\/\/sanjayshankar.me\/contact\/\">sanjayshankar.me\/contact<\/a><\/li>\n<li>LinkedIn: <a href=\"https:\/\/www.linkedin.com\/in\/sanjay-shankar-a6885224\/\">Sanjay Shankar<\/a><\/li>\n<li>X (Twitter): <a href=\"https:\/\/x.com\/sanjayshankarr\">@sanjayshankarr<\/a><\/li>\n<li>GitHub: <a href=\"https:\/\/github.com\/sanjuacodez\">sanjuacodez<\/a><\/li>\n<li>All my WordPress plugins: <a href=\"https:\/\/profiles.wordpress.org\/sanju-shankar\/\">profiles.wordpress.org\/sanju-shankar<\/a><\/li>\n<\/ul>\n\n<h4>More plugins by Sanjay Shankar<\/h4>\n\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/likenook\/\">Likenook \u2013 Like Dislike Buttons<\/a>: like and dislike buttons for posts, pages, products and comments, with \"Was this helpful?\" feedback and analytics.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/anchormap\/\">Anchormap \u2013 AI Internal Linking &amp; Link Map<\/a>: a visual link map, orphan page finder and one-click internal link suggestions.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/halloween-animations\/\">Seasonal Effects &amp; Notice Bar<\/a>: festive animations, countdown timers and notice bars for Black Friday, Christmas and every season.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/advanced-preloader\/\">Advanced Preloader<\/a>: beautiful loading animations while your site loads.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Install and activate your store plugin: WooCommerce, Easy Digital Downloads or SureCart.<\/li>\n<li>Go to <strong>Plugins \u2192 Add New<\/strong>, search for <strong>Shopnook<\/strong> and click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<li>Edit a post or page, select an Image block, and switch on <strong>Shoppable image<\/strong> in the Shopnook panel. In WordPress 7.0 and later the panel is in the block sidebar's <strong>Content<\/strong> tab.<\/li>\n<li>Click <strong>Tag products<\/strong>, click the photo to drop pins and pick a product for each.<\/li>\n<li>Optional: choose your default pin, card and gallery styles under <strong>Shopnook \u2192 Settings<\/strong>.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"what%20is%20a%20shoppable%20image%3F\"><h3>What is a shoppable image?<\/h3><\/dt>\n<dd><p>A photo with small pins (hotspots) on the products in it. Visitors tap a pin to see the product's name, price and an Add to cart button, so they can buy what they see without searching your shop. Shopnook adds this to any image or gallery on your WooCommerce site.<\/p><\/dd>\n<dt id=\"can%20i%20create%20a%20%22shop%20the%20look%22%20page%20or%20a%20lookbook%3F\"><h3>Can I create a \"shop the look\" page or a lookbook?<\/h3><\/dt>\n<dd><p>Yes. Add your photos to a post or page, switch on <strong>Shoppable image<\/strong> and tag the products. Choose the <strong>Shop this look<\/strong> display to list every product under the photo, or turn a gallery into an Instagram grid, masonry or stories layout for a full lookbook.<\/p><\/dd>\n<dt id=\"can%20i%20make%20my%20instagram%20photos%20shoppable%20on%20my%20website%3F\"><h3>Can I make my Instagram photos shoppable on my website?<\/h3><\/dt>\n<dd><p>Shopnook does not connect to your Instagram account. Upload the photos to a Gallery block, switch on <strong>Shoppable gallery<\/strong> and choose the Instagram grid or stories layout. Your visitors get the same tap-to-shop feel, with products from your own store.<\/p><\/dd>\n<dt id=\"do%20i%20need%20a%20special%20block%20or%20shortcode%3F\"><h3>Do I need a special block or shortcode?<\/h3><\/dt>\n<dd><p>No. Shopnook adds a switch to the core Image and Gallery blocks. Your content stays ordinary blocks.<\/p><\/dd>\n<dt id=\"where%20is%20the%20shopnook%20panel%20in%20the%20block%20editor%3F\"><h3>Where is the Shopnook panel in the block editor?<\/h3><\/dt>\n<dd><p>Select an Image or Gallery block and open the block sidebar. In WordPress 7.0 and later it is in the <strong>Content<\/strong> tab; in earlier versions it is in the block <strong>Settings<\/strong>.<\/p><\/dd>\n<dt id=\"i%20tagged%20products%20in%20the%20media%20library%20but%20the%20pins%20do%20not%20show.%20why%3F\"><h3>I tagged products in the Media Library but the pins do not show. Why?<\/h3><\/dt>\n<dd><p>Media Library pins show wherever the image is shoppable. Select the Image block in your post and switch on <strong>Shoppable image<\/strong>, then update the post. Featured images printed by your theme are not Image blocks, so they do not get pins.<\/p><\/dd>\n<dt id=\"what%20is%20the%20difference%20between%20media%20library%20pins%20and%20pins%20in%20a%20post%3F\"><h3>What is the difference between Media Library pins and pins in a post?<\/h3><\/dt>\n<dd><p>Media Library pins are saved on the image itself and show in every post where that image is shoppable. If one post needs different products, click <strong>Customize for this post<\/strong> in the block settings. That post keeps its own pins and the others are not affected. <strong>Use Media Library pins<\/strong> switches it back.<\/p><\/dd>\n<dt id=\"what%20happens%20if%20i%20deactivate%20the%20plugin%3F\"><h3>What happens if I deactivate the plugin?<\/h3><\/dt>\n<dd><p>Your images and galleries show as normal images and galleries. Shopnook only adds pins when the page renders, so nothing in your saved content breaks.<\/p><\/dd>\n<dt id=\"which%20products%20can%20i%20tag%3F\"><h3>Which products can I tag?<\/h3><\/dt>\n<dd><p>Any published product from WooCommerce, Easy Digital Downloads or SureCart, and you can mix them in one photo.<\/p>\n\n<ul>\n<li><strong>WooCommerce:<\/strong> simple products add to the cart from the card. Variable and grouped products show \"Select options\" and link to the product page. External products link to their own site.<\/li>\n<li><strong>Easy Digital Downloads:<\/strong> single-price downloads add to the cart from the card, with a Checkout link. Downloads with price options link to their page.<\/li>\n<li><strong>SureCart:<\/strong> <strong>Buy now<\/strong> opens SureCart's instant checkout when the product's buy link is on, otherwise the product page. Products with variants or several prices link to their page.<\/li>\n<\/ul>\n\n<p>Out of stock products are labelled. Pins for deleted or unpublished products are hidden automatically.<\/p><\/dd>\n<dt id=\"which%20e-commerce%20plugins%20does%20shopnook%20work%20with%3F\"><h3>Which e-commerce plugins does Shopnook work with?<\/h3><\/dt>\n<dd><p>WooCommerce, Easy Digital Downloads (EDD) and SureCart. You need at least one of them, and you can use more than one on the same site. Support for more store plugins is planned. If you use another one, tell us which in the <a href=\"https:\/\/wordpress.org\/support\/plugin\/shopnook-shoppable-images\/\">support forum<\/a> so we know what to build first.<\/p><\/dd>\n<dt id=\"does%20it%20work%20without%20woocommerce%3F\"><h3>Does it work without WooCommerce?<\/h3><\/dt>\n<dd><p>Yes. Since version 1.1, WooCommerce is optional. Shopnook works with Easy Digital Downloads or SureCart on their own.<\/p><\/dd>\n<dt id=\"can%20i%20sell%20digital%20products%20with%20shoppable%20images%3F\"><h3>Can I sell digital products with shoppable images?<\/h3><\/dt>\n<dd><p>Yes. With Easy Digital Downloads, tag ebooks, courses, templates, presets or software in your photos, and shoppers add them to the cart from the card. WooCommerce digital products and SureCart products work too.<\/p><\/dd>\n<dt id=\"how%20are%20surecart%20sales%20credited%3F\"><h3>How are SureCart sales credited?<\/h3><\/dt>\n<dd><p>When a shopper clicks a SureCart product on a shoppable image and then pays, SureCart confirms the checkout in the shopper's browser and Shopnook credits the sale to the image. Refunded (revoked) purchases are taken back out.<\/p><\/dd>\n<dt id=\"can%20i%20tag%20products%20from%20other%20stores%2C%20like%20amazon%3F\"><h3>Can I tag products from other stores, like Amazon?<\/h3><\/dt>\n<dd><p>Not in this version. Shopnook tags products from your own WooCommerce, Easy Digital Downloads or SureCart store.<\/p><\/dd>\n<dt id=\"can%20you%20add%20a%20feature%20i%20need%3F\"><h3>Can you add a feature I need?<\/h3><\/dt>\n<dd><p>Very likely. Post it in the <a href=\"https:\/\/wordpress.org\/support\/plugin\/shopnook-shoppable-images\/\">support forum<\/a>, or <a href=\"https:\/\/sanjayshankar.me\/contact\/\">contact me<\/a> if you need a custom feature or integration for your store.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20my%20theme%3F\"><h3>Does it work with my theme?<\/h3><\/dt>\n<dd><p>Shopnook works with block themes and classic themes. Pins and cards use your theme's fonts, and you set the colours. If a theme or another plugin puts a full-screen overlay or a floating button on top of the page, it can sit above the pins; tell us in the support forum and we will help.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20page%20builders%20or%20the%20classic%20editor%3F\"><h3>Does it work with page builders or the Classic Editor?<\/h3><\/dt>\n<dd><p>Version 1.0 works in the block editor. Support for more editors is planned.<\/p><\/dd>\n<dt id=\"does%20it%20slow%20down%20my%20site%3F\"><h3>Does it slow down my site?<\/h3><\/dt>\n<dd><p>No. Shopnook loads its small script and stylesheet only on pages that have a shoppable image or gallery, and the script has no dependencies. Pins are part of the page HTML, so they work with page caching.<\/p><\/dd>\n<dt id=\"how%20are%20sales%20credited%20to%20an%20image%3F\"><h3>How are sales credited to an image?<\/h3><\/dt>\n<dd><p>When a visitor clicks a product on a shoppable image (or adds it to the cart from the card), Shopnook remembers the product and the image in a cookie. If that product is bought within the credit window, the order line is credited to the image. The most recent click wins. The sale is counted when the order is paid and removed if the order is cancelled, refunded or fails.<\/p><\/dd>\n<dt id=\"will%20my%20own%20testing%20inflate%20the%20numbers%3F\"><h3>Will my own testing inflate the numbers?<\/h3><\/dt>\n<dd><p>No. Visits by logged-in users who can edit posts are not counted by default. You can change this under <strong>Shopnook \u2192 Settings \u2192 Tracking<\/strong>.<\/p><\/dd>\n<dt id=\"is%20it%20gdpr%20friendly%3F\"><h3>Is it GDPR friendly?<\/h3><\/dt>\n<dd><p>Shopnook stores only anonymous daily totals, never IP addresses or personal data. Its one cookie holds product and image IDs. With a consent plugin that supports the WP Consent API, nothing is tracked until visitors allow statistics cookies. Shopnook also adds suggested text to your privacy policy page.<\/p><\/dd>\n<dt id=\"can%20i%20turn%20tracking%20off%3F\"><h3>Can I turn tracking off?<\/h3><\/dt>\n<dd><p>Yes. Switch off <strong>Count views, clicks and sales<\/strong> under <strong>Shopnook \u2192 Settings \u2192 Tracking<\/strong>. Pins and cards keep working.<\/p><\/dd>\n<dt id=\"what%20does%20uninstalling%20remove%3F\"><h3>What does uninstalling remove?<\/h3><\/dt>\n<dd><p>By default, deleting the plugin keeps your data in case you reinstall. Switch on <strong>Delete all Shopnook data<\/strong> under <strong>Settings \u2192 Tracking<\/strong> to remove settings, stats and the pins saved on images when the plugin is deleted.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>New: Easy Digital Downloads support. Tag downloads on images and galleries, add them to the cart from the card, and see their sales in the dashboard. Refunds are taken back out.<\/li>\n<li>New: SureCart support. Tag SureCart products, open SureCart's instant checkout from the card, and credit confirmed checkouts to the image. Revoked purchases are taken back out.<\/li>\n<li>New: WooCommerce is no longer required. Shopnook works with any one of WooCommerce, Easy Digital Downloads or SureCart, or several together.<\/li>\n<li>New: the product picker shows which store each product comes from when more than one store is active.<\/li>\n<li>New: <code>shopnook_stores<\/code> filter for custom store integrations.<\/li>\n<li>Fix: a product name or price with a \"$\" followed by digits (like \"Gift card $50\") could lose that text on the page.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First release: shoppable Image and Gallery blocks, Media Library tagging, seven pin styles, four display modes plus a phone bottom sheet, Instagram, masonry and stories gallery layouts, sales attribution and the analytics dashboard.<\/li>\n<\/ul>","raw_excerpt":"Shoppable images and shop the look for WooCommerce, Easy Digital Downloads and SureCart. Tag products on photos and galleries. Track sales.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/392478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=392478"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/sanju-shankar"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=392478"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=392478"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=392478"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=392478"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=392478"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=392478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}