German translation included (Germany, Austria, Switzerland), used when the site language is\nDeutsch. No settings change.<\/p>","0.7.0":"
Help links to the setup guide on every Swatches screen, and a welcome screen for new installs.<\/p>","0.6.0":"
New Tile swatch type: each option's photo with its price, and a gallery preview on hover.\nNothing changes until you set an attribute to Tile.<\/p>","0.5.0":"
Swatches on shop and category pages, separate swatch width and height, and a font size\nsetting. Your current size carries over.<\/p>","0.4.0":"
Swatches for custom product attributes, and color filled in from a color name.<\/p>","0.3.3":"
Tooltips now show instantly on hover and keyboard focus. No settings change.<\/p>","0.3.2":"
Maintenance release. No settings change.<\/p>","0.3.1":"
Selected swatches look different: a ring outside the swatch instead of a thickened border, so\nselection stays visible on dark colours. Set the selection style to Border to keep the old look.<\/p>","0.2.0":"
Settings have moved to the new Swatches menu. Nothing needs reconfiguring.<\/p>","0.1.0":"
First release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3744585,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3744585,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3744585,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3744585,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3752900,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"meta\":{\"title\":\"KABAA Swatches for WooCommerce demo\",\"description\":\"A small WooCommerce store with colour and button swatches, sold-out options, and a product past the 30-variation preload.\",\"author\":\"badrul007\",\"categories\":[\"WooCommerce\"]},\"landingPage\":\"\\\/product\\\/classic-hoodie\\\/\",\"preferredVersions\":{\"php\":\"8.3\",\"wp\":\"latest\"},\"features\":{\"networking\":true},\"login\":true,\"steps\":[{\"step\":\"installTheme\",\"themeData\":{\"resource\":\"wordpress.org\\\/themes\",\"slug\":\"storefront\"},\"options\":{\"activate\":true}},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"woocommerce\"},\"options\":{\"activate\":true}},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"kabaa-swatches\"},\"options\":{\"activate\":true}},{\"step\":\"setSiteOptions\",\"options\":{\"blogname\":\"KABAA Swatches demo\",\"woocommerce_onboarding_profile\":{\"skipped\":true},\"woocommerce_coming_soon\":\"no\",\"woocommerce_store_pages_only\":\"no\",\"woocommerce_currency\":\"USD\",\"woocommerce_default_country\":\"US:CA\",\"woocommerce_show_marketplace_suggestions\":\"no\",\"woocommerce_allow_tracking\":\"no\"}},{\"step\":\"runPHP\",\"code\":\" '#1e3a8a',\\n\\t'Red' => '#dc2626',\\n\\t'Green' => '#16a34a',\\n\\t'Mustard' => '#eab308',\\n\\t'Black' => '#111827',\\n\\t'White' => '#f9fafb',\\n);\\n$sizes = array( 'S', 'M', 'L', 'XL', 'XXL', '3XL' );\\n\\n$attributes = array(\\n\\t'color' => array( 'Color', array_keys( $colors ) ),\\n\\t'size' => array( 'Size', $sizes ),\\n);\\n\\n$term_ids = array();\\nforeach ( $attributes as $slug => $def ) {\\n\\tif ( ! wc_attribute_taxonomy_id_by_name( $slug ) ) {\\n\\t\\twc_create_attribute(\\n\\t\\t\\tarray(\\n\\t\\t\\t\\t'name' => $def[0],\\n\\t\\t\\t\\t'slug' => $slug,\\n\\t\\t\\t\\t'type' => 'select',\\n\\t\\t\\t\\t'order_by' => 'menu_order',\\n\\t\\t\\t)\\n\\t\\t);\\n\\t}\\n\\t$taxonomy = 'pa_' . $slug;\\n\\tif ( ! taxonomy_exists( $taxonomy ) ) {\\n\\t\\tregister_taxonomy( $taxonomy, array( 'product' ), array( 'hierarchical' => false ) );\\n\\t}\\n\\tforeach ( $def[1] as $position => $name ) {\\n\\t\\t$term = term_exists( $name, $taxonomy );\\n\\t\\tif ( ! $term ) {\\n\\t\\t\\t$term = wp_insert_term( $name, $taxonomy );\\n\\t\\t}\\n\\t\\t$term_id = (int) $term['term_id'];\\n\\n\\t\\t$term_ids[ $taxonomy ][ $name ] = $term_id;\\n\\t\\t\\\/\\\/ Custom ordering, so sizes read S, M, L\\u2026 rather than alphabetically.\\n\\t\\tupdate_term_meta( $term_id, 'order', $position );\\n\\t\\tif ( isset( $colors[ $name ] ) ) {\\n\\t\\t\\tupdate_term_meta( $term_id, 'kabaa_swatches_color', $colors[ $name ] );\\n\\t\\t}\\n\\t}\\n}\\ndelete_transient( 'wc_attribute_taxonomies' );\\n\\nupdate_option(\\n\\t'kabaa_swatches_settings',\\n\\tarray(\\n\\t\\t'attribute_types' => array(\\n\\t\\t\\t'pa_color' => 'color',\\n\\t\\t\\t'pa_size' => 'button',\\n\\t\\t),\\n\\t\\t'card_attribute_mode' => 'all',\\n\\t\\t'card_order' => array( 'pa_color', 'pa_size' ),\\n\\t),\\n\\ttrue\\n);\\n\\n\\\/**\\n * A product picture in one colour, drawn with GD and added to the media library.\\n *\\n * @param string $label File and title label.\\n * @param string $hex Garment colour.\\n * @param bool $tee Tee (short sleeves) or hoodie (long sleeves, hood).\\n *\\n * @return int Attachment ID, or 0 when GD is unavailable.\\n *\\\/\\nfunction kabaa_demo_image( string $label, string $hex, bool $tee ): int {\\n\\tif ( ! function_exists( 'imagecreatetruecolor' ) ) {\\n\\t\\treturn 0;\\n\\t}\\n\\t$size = 800;\\n\\t$img = imagecreatetruecolor( $size, $size );\\n\\timagefill( $img, 0, 0, imagecolorallocate( $img, 241, 243, 246 ) );\\n\\n\\tlist( $r, $g, $b ) = sscanf( $hex, '#%02x%02x%02x' );\\n\\t$fill = imagecolorallocate( $img, $r, $g, $b );\\n\\t$shade = imagecolorallocate( $img, (int) ( $r * 0.8 ), (int) ( $g * 0.8 ), (int) ( $b * 0.8 ) );\\n\\t$sleeve = $tee ? 330 : 600;\\n\\n\\t\\\/\\\/ Body and sleeves as one outline: shoulders, sleeve, side, hem, mirrored.\\n\\t$outline = array(\\n\\t\\t300, 170, 200, 200, 110, 270, 110 + ( $tee ? 40 : 0 ), $sleeve, 200, $sleeve - ( $tee ? 0 : 20 ),\\n\\t\\t220, 300, 220, 660, 580, 660, 580, 300,\\n\\t\\t600, $sleeve - ( $tee ? 0 : 20 ), 690 - ( $tee ? 40 : 0 ), $sleeve, 690, 270, 600, 200, 500, 170,\\n\\t);\\n\\timagefilledpolygon( $img, $outline, $fill );\\n\\tif ( $tee ) {\\n\\t\\timagefilledarc( $img, 400, 170, 200, 110, 0, 180, $shade, IMG_ARC_PIE );\\n\\t} else {\\n\\t\\timagefilledellipse( $img, 400, 175, 230, 150, $shade );\\n\\t\\timagefilledrectangle( $img, 300, 520, 500, 600, $shade );\\n\\t}\\n\\n\\t$file = wp_upload_bits( sanitize_file_name( $label ) . '.png', null, '' );\\n\\timagepng( $img, $file['file'] );\\n\\timagedestroy( $img );\\n\\n\\t$id = wp_insert_attachment(\\n\\t\\tarray(\\n\\t\\t\\t'post_title' => $label,\\n\\t\\t\\t'post_mime_type' => 'image\\\/png',\\n\\t\\t\\t'post_status' => 'inherit',\\n\\t\\t),\\n\\t\\t$file['file']\\n\\t);\\n\\twp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file['file'] ) );\\n\\n\\treturn (int) $id;\\n}\\n\\n\\\/**\\n * A variable product with every colour x size combination.\\n *\\n * @param string $name Product name.\\n * @param int $price Price of every variation.\\n * @param string[] $names Colours to use.\\n * @param string[] $use Sizes to use.\\n * @param string[] $sold_out \\\"Color|Size\\\" pairs out of stock; \\\"Color|*\\\" for a whole colour.\\n * @param bool $tee Tee or hoodie pictures.\\n *\\\/\\nfunction kabaa_demo_product( string $name, int $price, array $names, array $use, array $sold_out, bool $tee, array $term_ids, array $colors ): int {\\n\\t$product = new WC_Product_Variable();\\n\\t$product->set_name( $name );\\n\\t$product->set_status( 'publish' );\\n\\t$product->set_short_description( 'A demo product for KABAA Swatches. Pick a colour and size: the picture follows your choice, and crossed-out options are out of stock.' );\\n\\n\\t$attrs = array();\\n\\tforeach ( array( 'pa_color' => $names, 'pa_size' => $use ) as $taxonomy => $values ) {\\n\\t\\t$attr = new WC_Product_Attribute();\\n\\t\\t$attr->set_id( wc_attribute_taxonomy_id_by_name( $taxonomy ) );\\n\\t\\t$attr->set_name( $taxonomy );\\n\\t\\t$attr->set_options(\\n\\t\\t\\tarray_map(\\n\\t\\t\\t\\tstatic function ( $value ) use ( $term_ids, $taxonomy ) {\\n\\t\\t\\t\\t\\treturn $term_ids[ $taxonomy ][ $value ];\\n\\t\\t\\t\\t},\\n\\t\\t\\t\\t$values\\n\\t\\t\\t)\\n\\t\\t);\\n\\t\\t$attr->set_visible( true );\\n\\t\\t$attr->set_variation( true );\\n\\t\\t$attrs[] = $attr;\\n\\t}\\n\\t$product->set_attributes( $attrs );\\n\\n\\t$images = array();\\n\\tforeach ( $names as $color ) {\\n\\t\\t$images[ $color ] = kabaa_demo_image( $name . ' ' . $color, $colors[ $color ], $tee );\\n\\t}\\n\\tif ( $images[ $names[0] ] ) {\\n\\t\\t$product->set_image_id( $images[ $names[0] ] );\\n\\t}\\n\\t$id = $product->save();\\n\\n\\tforeach ( $names as $color ) {\\n\\t\\tforeach ( $use as $size ) {\\n\\t\\t\\t$variation = new WC_Product_Variation();\\n\\t\\t\\t$variation->set_parent_id( $id );\\n\\t\\t\\t$variation->set_attributes(\\n\\t\\t\\t\\tarray(\\n\\t\\t\\t\\t\\t'pa_color' => sanitize_title( $color ),\\n\\t\\t\\t\\t\\t'pa_size' => sanitize_title( $size ),\\n\\t\\t\\t\\t)\\n\\t\\t\\t);\\n\\t\\t\\t$variation->set_regular_price( (string) $price );\\n\\t\\t\\t$variation->set_image_id( $images[ $color ] );\\n\\t\\t\\t$out = in_array( $color . '|' . $size, $sold_out, true ) || in_array( $color . '|*', $sold_out, true );\\n\\t\\t\\t$variation->set_stock_status( $out ? 'outofstock' : 'instock' );\\n\\t\\t\\t$variation->save();\\n\\t\\t}\\n\\t}\\n\\tWC_Product_Variable::sync( $id );\\n\\twc_delete_product_transients( $id );\\n\\n\\treturn $id;\\n}\\n\\nif ( ! get_page_by_path( 'classic-hoodie', OBJECT, 'product' ) ) {\\n\\t\\\/\\\/ 20 variations: WooCommerce sends them all with the page.\\n\\tkabaa_demo_product( 'Classic Hoodie', 45, array( 'Navy', 'Red', 'Green', 'Mustard', 'Black' ), array( 'S', 'M', 'L', 'XL' ), array( 'Mustard|*', 'Red|XL', 'Navy|S' ), false, $term_ids, $colors );\\n\\t\\\/\\\/ 36 variations: past the 30-variation preload, so availability comes over AJAX.\\n\\tkabaa_demo_product( 'Everyday Tee', 25, array_keys( $colors ), $sizes, array( 'Green|*', 'Black|S', 'Black|M', 'White|3XL' ), true, $term_ids, $colors );\\n}\\n\\nif ( wc_get_page_id( 'shop' ) < 1 ) {\\n\\tWC_Install::create_pages();\\n}\\nflush_rewrite_rules();\\n\"}]}"}},"all_blocks":[],"tagged_versions":["0.3.3","0.4.0","0.5.0","0.6.0","0.7.0","0.8.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3746996,"resolution":"1","location":"assets","locale":"","width":1600,"height":1000},"screenshot-10.png":{"filename":"screenshot-10.png","revision":3748497,"resolution":"10","location":"assets","locale":"","width":1600,"height":1000},"screenshot-11.png":{"filename":"screenshot-11.png","revision":3748497,"resolution":"11","location":"assets","locale":"","width":1600,"height":1000},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3746996,"resolution":"2","location":"assets","locale":"","width":1600,"height":1000},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3746996,"resolution":"3","location":"assets","locale":"","width":1600,"height":1000},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3746996,"resolution":"4","location":"assets","locale":"","width":1600,"height":1000},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3746996,"resolution":"5","location":"assets","locale":"","width":1600,"height":1000},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3746996,"resolution":"6","location":"assets","locale":"","width":1600,"height":1000},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3746996,"resolution":"7","location":"assets","locale":"","width":1600,"height":1000},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3748497,"resolution":"8","location":"assets","locale":"","width":1600,"height":1000},"screenshot-9.png":{"filename":"screenshot-9.png","revision":3748497,"resolution":"9","location":"assets","locale":"","width":1600,"height":1000}},"screenshots":{"1":"Image swatches on a product page. Each option shows its own picture, the chosen one carries a ring, and the product photo follows the choice.","2":"Swatches on a shop page product card. The chosen colour carries a ring, colours that can't go with it are crossed out, and the price follows the choice.","3":"Sold-out options marked on the shop card, on products of any size.","4":"Swatches > Settings > Product page \u2014 shape, size, font size, tooltips and how a selected swatch is marked, with a live preview.","5":"Swatches > Settings > Shop page \u2014 which attributes product cards show, in the order you drag them into, with a card preview.","6":"The Swatches tab of a product \u2014 hide its card swatches, choose its attributes, or untick values the card shouldn't show.","7":"A custom attribute made inside a product, shown as button swatches, set from that product's Swatches tab.","8":"Tile swatches on a product page: each option's own photo with its price underneath. Sale prices show struck through, and sold-out options are crossed out.","9":"Hovering a tile previews its photo in the main product image.","10":"Swatches > Settings > Product page \u2014 the tile price setting, with a preview of tiles drawn from a product in your store.","11":"The Swatches tab of a product with an attribute set to Tile. Photos come from the variations; an image here is only a fallback."}},"plugin_section":[],"plugin_tags":[37395,66595,130912,6602,286],"plugin_category":[45],"plugin_contributors":[286409],"plugin_business_model":[],"class_list":["post-385084","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatches","plugin_tags-product-attributes","plugin_tags-variation-swatches","plugin_tags-variations","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-badrul007","plugin_committers-badrul007","plugin_support_reps-badrul007"],"banners":{"banner":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/banner-772x250.png?rev=3744585","banner_2x":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/banner-1544x500.png?rev=3744585","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/icon-128x128.png?rev=3744585","icon_2x":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/icon-256x256.png?rev=3744585","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-1.png?rev=3746996","caption":"Image swatches on a product page. Each option shows its own picture, the chosen one carries a ring, and the product photo follows the choice."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-2.png?rev=3746996","caption":"Swatches on a shop page product card. The chosen colour carries a ring, colours that can't go with it are crossed out, and the price follows the choice."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-3.png?rev=3746996","caption":"Sold-out options marked on the shop card, on products of any size."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-4.png?rev=3746996","caption":"Swatches > Settings > Product page \u2014 shape, size, font size, tooltips and how a selected swatch is marked, with a live preview."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-5.png?rev=3746996","caption":"Swatches > Settings > Shop page \u2014 which attributes product cards show, in the order you drag them into, with a card preview."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-6.png?rev=3746996","caption":"The Swatches tab of a product \u2014 hide its card swatches, choose its attributes, or untick values the card shouldn't show."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-7.png?rev=3746996","caption":"A custom attribute made inside a product, shown as button swatches, set from that product's Swatches tab."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-8.png?rev=3748497","caption":"Tile swatches on a product page: each option's own photo with its price underneath. Sale prices show struck through, and sold-out options are crossed out."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-9.png?rev=3748497","caption":"Hovering a tile previews its photo in the main product image."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-10.png?rev=3748497","caption":"Swatches > Settings > Product page \u2014 the tile price setting, with a preview of tiles drawn from a product in your store."},{"src":"https:\/\/ps.w.org\/kabaa-swatches\/assets\/screenshot-11.png?rev=3748497","caption":"The Swatches tab of a product with an attribute set to Tile. Photos come from the variations; an image here is only a fallback."}],"raw_content":"\n
WooCommerce shows product variations as dropdown menus. A shopper choosing a colour reads\nthe word \"Ocean Blue\" instead of seeing it, and on a phone the dropdown opens a picker that\ntakes them off the page entirely.<\/p>\n\n
KABAA Swatches replaces those dropdowns with swatches a shopper can see and tap.<\/p>\n\n
https:\/\/www.youtube.com\/watch?v=s-srg4spJ-g<\/p>\n\n
Works with classic themes that use WooCommerce's standard variation form.<\/p>\n\n
Setup guide, every screen with a screenshot: kazibadrul.com\/kabaa-swatches\/docs<\/a><\/p>\n\n Works on products with many variations.<\/strong><\/p>\n\n WooCommerce sends variation data to the browser only up to a threshold (30 variations by\ndefault). Below it, the plugin uses that data and adds no extra request. Above it, the plugin\nfetches availability sized to the number of swatches on screen, not the number of variations,\nand keeps sold-out combinations marked as the shopper chooses.<\/p>\n\n Independent of catalog visibility.<\/strong><\/p>\n\n Out-of-stock swatches work the same whether WooCommerce's \"Hide out of stock items from the\ncatalog\" option is on or off, so you can keep sold-out products visible in your shop.<\/p>\n\n Everything the plugin does lives under the Swatches<\/strong> menu: Settings, Attributes (set the\ntype for every attribute in one place), Terms (jump to the terms that need a colour or image)\nand Status (read-only diagnostics for support).<\/p>\n\n Terms are edited on WordPress's own screens rather than in a rebuilt copy, so you keep its\nsearch, bulk actions and quick edit.<\/p>\n\n Step by step, with a screenshot of every screen: the setup guide<\/a>.<\/p>\n\n\nOut-of-stock handling<\/h4>\n\n
What it does<\/h4>\n\n
\n
Built to stay out of the way<\/h4>\n\n
\n
<select><\/code> stays in the form and stays in charge. The plugin writes to it\nand listens to it; it never resolves variations or touches add to cart.<\/li>\n\n