Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

C4D Variation Swatches & Gallery for WooCommerce

开发者 Coffee4dev
更新时间 2026年11月13日 17:30
捐献地址: 去捐款
PHP版本: 7.4 及以上
WordPress版本: 7.1
版权: GPLv2 or later
版权网址: 版权信息

标签

color swatches woocommerce swatches variation swatches variation images variation gallery

下载

1.2.6 1.3.47 1.3.64 1.4.0 1.2.3 1.2.7 1.2.8 1.0.3 1.2.9 2.0.0 2.0.1 2.0.2

详情介绍:

C4D Variation Swatches & Gallery turns the drop-down menus of your variable products into swatches customers can see and click: colour dots, small images or text buttons. Pick a colour and the main gallery changes to the photos of that colour. For shops that sell in sizes, customers can add several sizes to the cart in one click. It is free, has no photo limit, and works with block themes and classic themes. Variation swatches: colour, image and label Set a type on each attribute under Products → Attributes and the drop-down becomes buttons. A photo gallery for each colour Add as many photos as you like to each option in the Swatch Images box of the product editor. When a customer picks a colour, the main gallery switches to the photos of that colour. Choose a slider or grid for the thumbnails, horizontal or vertical, with zoom, a lightbox and a full-screen pan and zoom. Swatches on shop and category pages Show the colours under each product in the shop grid, flip the thumbnail when a customer hovers over a swatch, collapse long lists behind a "View more" link, and align the swatches left, centre or right. Order several sizes in one click (Multi Orders) Pick an attribute, for example Size, in the Variation Swatches tab of a product. Each value then gets a quantity box. A customer chooses a colour, ticks sizes S, M and L with quantities 2, 1 and 3, and adds them all with one button. Each size becomes its own cart line. It works together with C4D Buy More Save More: the quantities of all variations of one product add up toward the discount tiers. Style the swatches with CSS Sizes, borders, shapes and colours are styled with CSS. Add your rules in C4D Swatches → Custom CSS. They are printed late in the page head, after the theme styles, so they win. The documentation lists the selectors and has copy-and-paste examples. Features Documentation and live demo The documentation covers every setting, with setup guides and CSS examples. The demo store has the plugin working on sample products. Installation and setup
  1. Install and activate the plugin from Plugins → Add New (WooCommerce must be active).
  2. Go to Products → Attributes and set the type of an attribute: colour, image or label.
  3. Open a variable product and add photos to each option in the Swatch Images box.
  4. Open C4D Swatches in the admin menu to adjust the settings. The tabs are General, Shop page, Product page, Gallery & zoom, Colours, Compatibility and Custom CSS.
Multi Orders is chosen per product, in the Variation Swatches tab of the product editor. More from coffee4dev C4D Product Bundles for WooCommerce: sell products together at a discount. Customers tick the items, pick sizes and colours and add the whole bundle in one click. See all plugins at coffee4dev.com. Support Ask in the support forum or read the documentation. If the plugin works well on your shop, a review helps other store owners find it.

安装:

  1. Upload c4d-woo-variation-swatches to the /wp-content/plugins/ directory, or install it from Plugins → Add New.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Go to Products → Attributes and set the attribute type: colour, image or label.
  4. Open a variable product and add photos to each option in the Swatch Images box.
  5. Open C4D Swatches in the admin menu to adjust the settings.

屏幕截图:

  • A photo gallery for each colour: picking a colour switches the whole gallery.
  • Image swatches, with out-of-stock options marked.
  • Colour swatches under each product on the shop page.
  • Multi Orders: several sizes, each with its own quantity, added in one click.
  • The settings page under C4D Swatches.
  • The Colours tab: a colour for each attribute term.

升级注意事项:

2.0.2 The settings page moved from WooCommerce → Variation Images to its own admin menu, C4D Swatches. Your settings are unchanged. 2.0.1 The plugin is renamed to C4D Variation Swatches & Gallery for WooCommerce. Your settings and data are unchanged. 2.0.0 2.0.0 moves the settings to WooCommerce → Variation Images and no longer needs C4D Plugin Manager. Keep C4D Plugin Manager active while you update: your existing settings, term colours and styling are converted on the first page load after the update. You can deactivate it afterwards. Please keep a backup before updating.

常见问题:

How do I show colour swatches instead of drop-downs?

Go to Products → Attributes, edit your attribute (for example Color) and set its type to Color, Image or Text. Every variable product that uses the attribute then shows swatches instead of the drop-down. To give a colour term an exact shade, open C4D Swatches → Colours.

Can I use a different gallery for each colour?

Yes. Open a variable product, find the Swatch Images box, and add photos under each option. When a customer picks a colour, the main gallery switches to those photos. There is no limit on photos per option.

How do I show swatches on the shop page?

Swatches on shop pages are on by default. Under C4D Swatches → Shop page you can turn them off, show images instead of colours, set the alignment, flip the thumbnail on hover and collapse long lists behind "View more".

Can customers buy several sizes at once?

Yes, with Multi Orders. In the product editor open the Variation Swatches tab and choose the attribute (for example Size). Each value then gets a quantity box, and one click adds every chosen value to the cart, each as its own line.

Does it work with Buy More Save More?

Yes. C4D Buy More Save More counts the quantities of all variations of one product together, so 2 small and 3 medium count as 5 toward its discount tiers.

Does it work with block themes?

Swatches work on product pages and shop pages with block themes (tested with Twenty Twenty-Five) and classic themes (tested with Storefront). If your theme uses its own gallery markup, set the gallery selector under C4D Swatches → Product page.

How do I style the swatches?

Open C4D Swatches → Custom CSS and add your CSS. It is printed late in the page head, after the theme styles, so it wins over them. The documentation lists the selectors with examples. Saving CSS needs the unfiltered_html capability.

Do I still need C4D Plugin Manager?

No. Since 2.0.0 the plugin has its own settings page and does not need C4D Plugin Manager or Redux Framework. Keep C4D Plugin Manager ACTIVE while you update from 1.x: your settings, term colours and styling are converted on the first page load after the update (only when Plugin Manager was active). You can deactivate it afterwards if no other plugin uses it.

Where did the colour, size and border settings go?

They were replaced by CSS. Your previous styling was converted into the Custom CSS tab (when C4D Plugin Manager was active), so your shop looks the same. It is under C4D Swatches. The documentation lists the selectors you can use.

Plugin Manager was off when I updated

Reactivate C4D Plugin Manager, then delete the option c4d_woo_vs_db_version (for example with a database tool or wp option delete c4d_woo_vs_db_version). On the next page load the plugin fills in the missing settings from Plugin Manager. If you need help, ask in the support forum.

更新日志:

2.0.2 2.0.1 2.0.0 1.4.0 1.3.64 1.3.63 1.3.62 1.3.61 1.3.60 1.3.59 1.3.58 1.3.57 1.3.56 1.3.55 1.3.54 1.3.53 1.3.52 1.3.51 1.3.50 1.3.49 1.3.48 1.3.47 1.3.46 1.3.45 1.3.44 1.3.43 1.3.42 1.3.41 1.3.40 1.3.39 1.3.38 1.3.37 1.3.36 1.3.35 1.3.34 1.3.33 1.3.32 1.3.31 1.3.30 1.3.29 1.3.28 1.3.27 1.3.26 1.3.25 1.3.24 1.3.23 1.3.22 1.3.21 1.3.20 1.3.19 1.3.18 1.3.17 1.3.16 1.3.15 1.3.14 1.3.13 1.3.12 1.3.11 1.3.10 1.3.9 1.3.8 1.3.7 1.3.6 1.3.5 1.3.4 1.3.3 1.3.2 1.3.1 1.3.0 1.2.19 1.2.18 1.2.17 1.2.16 1.2.15 1.2.13 1.2.12 1.2.11 1.2.10 1.2.9 1.2.8 1.2.7 1.2.6 1.2.5 1.2.4 1.2.3 1.2.2 1.2.0 1.1.9 1.1.8 1.1.7 1.1.6 1.1.5 1.1.1 1.0.9 1.0.8 1.0.7 1.0.6 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 1.0.0