{"id":394482,"date":"2026-11-11T10:15:51","date_gmt":"2026-11-11T10:15:51","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/card-variation-swatches\/"},"modified":"2026-11-11T10:15:21","modified_gmt":"2026-11-11T10:15:21","slug":"juwel-card-variation-swatches","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/juwel-card-variation-swatches\/","author":23455841,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.4","stable_tag":"1.0.4","tested":"7.1.4","requires":"6.5","requires_php":"7.4","requires_plugins":null,"header_name":"Juwel Card Variation Swatches","header_author":"Dev Juwel","header_description":"Variation swatches for WooCommerce product cards. Place color, size, and add-to-cart actions inside Elementor, JetEngine, Gutenberg, or any product loop.","last_updated":"2026-11-11 10:15:21","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/sojol.pro.bd\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":102,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.4":{"tag":"1.0.4","author":"devjuwel","date":"2026-11-11 10:15:21","revision":3796043}},"upgrade_notice":{"1.0.0":"<p>Stable free release with author branding and price style controls.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3796064,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3796064,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3796064,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3796064,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"jucvs\/color-swatches":{"name":"jucvs\/color-swatches","title":"Jucvs Color Swatches"},"jucvs\/attribute-swatches":{"name":"jucvs\/attribute-swatches","title":"Jucvs Attribute Swatches"},"jucvs\/card-actions":{"name":"jucvs\/card-actions","title":"Jucvs Card Actions"},"jucvs\/all-swatches":{"name":"jucvs\/all-swatches","title":"Jucvs All Swatches"}},"tagged_versions":["1.0.4"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Color and size swatches on a product card in a loop.","2":"Elementor Style tab for swatch size, border, and selected state.","3":"Global Colors with picker and hex field.","4":"Plugin settings: more variations as text or plus."}},"plugin_section":[],"plugin_tags":[76538,265140,18781,6602,286],"plugin_category":[45],"plugin_contributors":[292019],"plugin_business_model":[],"class_list":["post-394482","plugin","type-plugin","status-publish","hentry","plugin_tags-elementor","plugin_tags-product-card","plugin_tags-swatches","plugin_tags-variations","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-devjuwel","plugin_committers-devjuwel"],"banners":{"banner":"https:\/\/ps.w.org\/juwel-card-variation-swatches\/assets\/banner-772x250.png?rev=3796064","banner_2x":"https:\/\/ps.w.org\/juwel-card-variation-swatches\/assets\/banner-1544x500.png?rev=3796064","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/juwel-card-variation-swatches\/assets\/icon-128x128.png?rev=3796064","icon_2x":"https:\/\/ps.w.org\/juwel-card-variation-swatches\/assets\/icon-256x256.png?rev=3796064","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>Juwel Card Variation Swatches adds variation swatches to WooCommerce product cards in Elementor Loop Grid, JetEngine Listing Grid, Gutenberg, and shortcodes.<\/p>\n\n<p>Place Color Swatches, Attribute Swatches, and Card Actions separately, or use the all-in-one widget. Choosing a variation can update the card price, image, and stock. Add to cart shows a toast at the bottom right. Buy now sends that variation to checkout without emptying the rest of the cart.<\/p>\n\n<p>Colors are set under WooCommerce \u2192 Card Swatches \u2192 Global Colors. A term named Red starts red, and the picker or hex field can change it.<\/p>\n\n<p>Shortcodes: <code>[jucvs_color]<\/code>, <code>[jucvs_attribute attribute=\"pa_size\"]<\/code>, <code>[jucvs_actions]<\/code>, and <code>[jucvs]<\/code>.<\/p>\n\n<p>Built by Dev Juwel. Website: https:\/\/sojol.pro.bd\/ \u2014 Support: juwelclaystone@gmail.com<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>juwel-card-variation-swatches<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or upload the zip from Plugins \u2192 Add New.<\/li>\n<li>Activate WooCommerce, then activate this plugin.<\/li>\n<li>Open WooCommerce \u2192 Card Swatches to set shapes, more-variations style, and Global Colors.<\/li>\n<li>In Elementor (or your loop builder), drop the Juwel Card Variation Swatches widgets into a product loop template.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"why%20are%20some%20color%20or%20size%20swatches%20disabled%3F\"><h3>Why are some color or size swatches disabled?<\/h3><\/dt>\n<dd><p>Unavailable mode is set to disable by default. A swatch is disabled when no matching variation is in stock and purchasable (often the variation has no price). Add a price and stock on each variation, or switch unavailable mode to show a message instead.<\/p><\/dd>\n<dt id=\"do%20i%20need%20a%20product%20id%20in%20the%20widget%3F\"><h3>Do I need a product ID in the widget?<\/h3><\/dt>\n<dd><p>No. Inside a product loop the current product is used automatically. You can set a product ID only when you want a fixed product outside a loop.<\/p><\/dd>\n<dt id=\"where%20do%20i%20set%20swatch%20colors%3F\"><h3>Where do I set swatch colors?<\/h3><\/dt>\n<dd><p>WooCommerce \u2192 Card Swatches \u2192 Global Colors. Use Auto for attributes named like Color, or Choose attributes for specific global taxonomies. Product-level custom attributes named Color still work in Auto mode.<\/p><\/dd>\n<dt id=\"text%20more%20works%20but%20%2B%20does%20not%2C%20or%20the%20other%20way%20around%3F\"><h3>Text More works but + does not, or the other way around?<\/h3><\/dt>\n<dd><p>Both styles are in General settings (and can be overridden per Elementor widget). Plus puts +N on the last visible swatch; text shows a More button. Color and size use the same setting when they share one all-in-one widget.<\/p><\/dd>\n<dt id=\"does%20buy%20now%20clear%20the%20cart%3F\"><h3>Does Buy now clear the cart?<\/h3><\/dt>\n<dd><p>No. It adds the selected variation and goes to checkout. Other cart items stay.<\/p><\/dd>\n<dt id=\"will%20order%20emails%20show%20color%20and%20size%3F\"><h3>Will order emails show color and size?<\/h3><\/dt>\n<dd><p>Yes. WooCommerce stores the selected variation attributes on the order line the usual way.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.4<\/h4>\n\n<ul>\n<li>Guest add-to-cart uses the same jucvs ajax hook as logged-in customers.<\/li>\n<\/ul>\n\n<h4>1.0.3<\/h4>\n\n<ul>\n<li>Renamed to Juwel Card Variation Swatches for the plugin directory review.<\/li>\n<li>Prefixed stored data, hooks, and shortcodes with jucvs.<\/li>\n<li>Variation JSON in script tags is hex-encoded so a closing script tag cannot break out.<\/li>\n<li>Removed the manual translation loader. WordPress.org loads translations.<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Plugin header license, WordPress 7.1 compatibility note, and directory packaging fixes for the plugin review scan.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Plugin URI removed so Author URI can stay on the portfolio site for WordPress.org.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First stable free release.<\/li>\n<li>Branding: Dev Juwel, website and support links on the settings screen.<\/li>\n<li>Price Style controls for color and typography above the action buttons.<\/li>\n<\/ul>\n\n<h4>0.2.9<\/h4>\n\n<ul>\n<li>Price above the buttons has its own Style controls for color and typography.<\/li>\n<\/ul>\n\n<h4>0.2.8<\/h4>\n\n<ul>\n<li>The plus count now shows on top of color swatches, not only size swatches.<\/li>\n<\/ul>\n\n<h4>0.2.7<\/h4>\n\n<ul>\n<li>Typography controls for buttons, labels, prices, and the more-variations text.<\/li>\n<li>More variations can be a text button or a plus count on the last swatch.<\/li>\n<li>Settings screen layout refreshed.<\/li>\n<\/ul>\n\n<h4>0.2.6<\/h4>\n\n<ul>\n<li>Global Colors has a hex code field next to the color picker.<\/li>\n<\/ul>\n\n<h4>0.2.5<\/h4>\n\n<ul>\n<li>Selected swatches use the chosen border width, without an extra ring.<\/li>\n<\/ul>\n\n<h4>0.2.4<\/h4>\n\n<ul>\n<li>Elementor swatch size, spacing, and selected colors now apply on the card. Label text and swatch letters are styled separately.<\/li>\n<\/ul>\n\n<h4>0.2.3<\/h4>\n\n<ul>\n<li>Elementor Style tab controls are included for swatch size, border, and selected state.<\/li>\n<\/ul>\n\n<h4>0.2.2<\/h4>\n\n<ul>\n<li>Elementor widgets have style controls for swatch size, shape, border, and the selected state.<\/li>\n<\/ul>\n\n<h4>0.2.1<\/h4>\n\n<ul>\n<li>Color swatches also detect a product attribute named Color, including attributes added on the product itself.<\/li>\n<\/ul>\n\n<h4>0.2.0<\/h4>\n\n<ul>\n<li>Card swatches, purchase actions, Elementor widgets, blocks, and shortcodes.<\/li>\n<\/ul>\n\n<h4>0.1.0<\/h4>\n\n<ul>\n<li>Initial foundation: settings and Global Colors.<\/li>\n<\/ul>","raw_excerpt":"Show WooCommerce color and size swatches on product cards inside custom loops.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/394482","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=394482"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/devjuwel"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=394482"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=394482"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=394482"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=394482"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=394482"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=394482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}