Description

Juwel Card Variation Swatches adds variation swatches to WooCommerce product cards in Elementor Loop Grid, JetEngine Listing Grid, Gutenberg, and shortcodes.

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.

Colors are set under WooCommerce Card Swatches Global Colors. A term named Red starts red, and the picker or hex field can change it.

Shortcodes: [jucvs_color], [jucvs_attribute attribute="pa_size"], [jucvs_actions], and [jucvs].

Built by Dev Juwel. Website: https://sojol.pro.bd/ — Support: juwelclaystone@gmail.com

Blocks

This plugin provides 4 blocks.

Jucvs Color Swatches
Jucvs Attribute Swatches
Jucvs Card Actions
Jucvs All Swatches

Installation

Upload the juwel-card-variation-swatches folder to /wp-content/plugins/, or upload the zip from Plugins Add New.
Activate WooCommerce, then activate this plugin.
Open WooCommerce Card Swatches to set shapes, more-variations style, and Global Colors.
In Elementor (or your loop builder), drop the Juwel Card Variation Swatches widgets into a product loop template.

FAQ

Why are some color or size swatches disabled?: 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.
Do I need a product ID in the widget?: 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.
Where do I set swatch colors?: WooCommerce Card Swatches 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.
Text More works but + does not, or the other way around?: 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.
Does Buy now clear the cart?: No. It adds the selected variation and goes to checkout. Other cart items stay.
Will order emails show color and size?: Yes. WooCommerce stores the selected variation attributes on the order line the usual way.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Juwel Card Variation Swatches” is open source software. The following people have contributed to this plugin.

Juwel Sikdar

Translate “Juwel Card Variation Swatches” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0.4

Guest add-to-cart uses the same jucvs ajax hook as logged-in customers.

1.0.3

Renamed to Juwel Card Variation Swatches for the plugin directory review.
Prefixed stored data, hooks, and shortcodes with jucvs.
Variation JSON in script tags is hex-encoded so a closing script tag cannot break out.
Removed the manual translation loader. WordPress.org loads translations.

1.0.2

Plugin header license, WordPress 7.1 compatibility note, and directory packaging fixes for the plugin review scan.

1.0.1

Plugin URI removed so Author URI can stay on the portfolio site for WordPress.org.

1.0.0

First stable free release.
Branding: Dev Juwel, website and support links on the settings screen.
Price Style controls for color and typography above the action buttons.

0.2.9

Price above the buttons has its own Style controls for color and typography.

0.2.8

The plus count now shows on top of color swatches, not only size swatches.

0.2.7

Typography controls for buttons, labels, prices, and the more-variations text.
More variations can be a text button or a plus count on the last swatch.
Settings screen layout refreshed.

0.2.6

Global Colors has a hex code field next to the color picker.

0.2.5

Selected swatches use the chosen border width, without an extra ring.

0.2.4

Elementor swatch size, spacing, and selected colors now apply on the card. Label text and swatch letters are styled separately.

0.2.3

Elementor Style tab controls are included for swatch size, border, and selected state.

0.2.2

Elementor widgets have style controls for swatch size, shape, border, and the selected state.

0.2.1

Color swatches also detect a product attribute named Color, including attributes added on the product itself.

0.2.0

Card swatches, purchase actions, Elementor widgets, blocks, and shortcodes.

0.1.0

Initial foundation: settings and Global Colors.